I am trying to detect Which image id="" was clicked ?

V

vmars316

Joined
May 21, 2012
Messages
44
Reaction score
0
Thanks
I am trying to detect Which image id="" was clicked ?
Pls , how can I do that ?
Run code here:
https://vmars.us/ShowMe/function-fireContextMenu-2-IMAGES.html
There are 2 images :

Code: 
<span class="a"><div class="hero" id="elem1"><img style="z-index:800; width:32px; height:32px; " src="1-Red-Circle-Transp.png" ></div>  <!--  -->
</span> 

<span class="a"><div class="hero draggable"  id="elem2"><img class="draggable"; style="z-index:500; width:20px; height:20px;" src="naturalAccidental-Grey-vm.png"></div>  <!--  -->
</span>

Here is where in code I want to do it :
Code: 
function fireContextMenu(event) {
  event.preventDefault();
console.log("function fireContextMenu( )")
console.log("event.target.id = " + event.target.id)

//  if element.id = "elem1" {
element.id = document.getElementById("elem1").innerHTML
console.log("element.id = " + element.id)

FULL CODE:
Code: 
<!DOCTYPE html>
<!-- saved from url=(0043)https://en.js.cx/task/drag-heroes/solution/ -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>file:///C:/PureBasic-myApps/vmProjects/BUTTONS/Guitar-Scales-and-Boxes/DnD.en.js.cx-Super-Heroes/en.js.cx-task-DnD-Multi-Items-WORKING-TRY-STUFF-01.html</title>
<style>
html, body {
  margin: 0;
  padding: 0;
}

span.a {
  display: inline-block;
//  width: 100px;
//  height: 100px;
  padding: 2px;
//  border: 1px solid blue;   
//  background-color: yellow;
}

.hero {

#hero1 , #elem1{
//  background-position: 0 0;
  //position:absolute;
  top: 250px;
//  left: 250px:
  width: 24px;
  width: 24px;
  z-index: 1000;
  float: left;}

#hero2 #elem2{
//  background-position: 0 -128px;
  width:24px;
  width:24px;
  z-index: 500;
  //position:absolute;
  top: 250px;
  float: left;}

.draggable {
  cursor: pointer;
}

#hr01 {
}
</style>
</head>

<body>

<br><br><br><br> 
<div id="imagesContainer" style=" width:100%; height:100px;  border-style: dotted; border-size:4px;">

<span class="a"><div class="hero" id="elem1"><img style="z-index:800; width:32px; height:32px; " src="1-Red-Circle-Transp.png" ></div>  <!--  -->
</span> 

<span class="a"><div class="hero draggable"  id="elem2"><img class="draggable"; style="z-index:500; width:20px; height:20px;" src="naturalAccidental-Grey-vm.png"></div>  <!--  -->
</span> 

</div>  <!--  id="imagesContainer"  -->

<hr id="hr01">

  <div style="clear:both"></div>

  <script>
var elemNumber = 0;
var element = "";
// =================================================

    document.addEventListener('contextmenu', fireContextMenu);

// This function will be called whenever contextmenu event occurs
function fireContextMenu(event) {
  event.preventDefault();
console.log("function fireContextMenu( )")
console.log("event.target.id = " + event.target.id)

//  if element.id = "elem1" {
element.id = document.getElementById("elem1").innerHTML
console.log("element.id = " + element.id)


//function cloneElem1(){
// Get the element
var elem = document.querySelector('#elem1');
//console.log(elem);

// Create a copy of it
var clone = elem.cloneNode(true);
clone.addEventListener("dragstart", (event) => { drag(event); });

// Update the ID and add a class
clone.id = 'elem1' + elemNumber;
clone.draggable = 'true';
clone.onclick = "helloConsole()"
clone.zIndex = elemNumber;
elemNumber = elemNumber + 1

// Inject it into the DOM
hr01.after(clone);
  //function cloneElem1()

}
// =================================================
  </script>

</body></html>

Thanks for your Help..
 
MeMate

MeMate

Joined
Mar 11, 2022
Messages
227
Reaction score
32
document.addEventListener( sais it all. It's a dpcument event.

Of course you could check the clicked Area by left and top (x and y axis) if mouse was on a particular image (in the good old actionscript days that's called hiTest), but that really do not make any sense if all you have to do is this:

Code: 
for(var i of document.querySelectorAll('.hero')){
i.addEventListener('contextmenu', function(ev) {
    ev.preventDefault();
    alert(this.id);
    return false;
}, false);

}
 
C

c1lonewolf

Joined
Jul 12, 2020
Messages
89
Reaction score
9
divisional (div) containers do not go inside spans. divs are block elements, spans are inline.
 
V

vmars316

Joined
May 21, 2012
Messages
44
Reaction score
0
Hmm...
It doesn't appear that this does not run :
Code: 
for(var i of document.querySelectorAll('.hero')){
i.addEventListener('contextmenu', function(event) {
    event.preventDefault();
    alert("this.id 01 = " + this.id);
    hold_this_id = this.id ;
    console.log("this.id 01 = " + hold_this_id);
    return false;
}, false);
}

Also , I get this error :
Code: 
TheCodingForums.com-function-fireContextMenu-2-IMAGES.html:98 Uncaught TypeError: Cannot read properties of null (reading 'cloneNode')
    at HTMLDocument.fireContextMenu (TheCodingForums.com-function-fireContextMenu-2-IMAGES.html:98:18)

Code: 
<!DOCTYPE html>
<!-- saved from url -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>TheCodingForums.com-function-fireContextMenu-2-IMAGES.html</title>

<style>
html, body {
  margin: 0;
  padding: 0;
}

span.a {
  display: inline-block;
//  width: 100px;
//  height: 100px;
  padding: 2px;
//  border: 1px solid blue;   
//  background-color: yellow;
}

// .hero {
// }

.hero , #hero1 , #elem1{
//  background-position: 0 0;
  //position:absolute;
  top: 250px;
//  left: 250px:
  width: 24px;
  width: 24px;
  z-index: 1000;
  float: left;}

.hero , #hero2 #elem2{
//  background-position: 0 -128px;
  width:24px;
  width:24px;
  z-index: 500;
  //position:absolute;
  top: 250px;
  float: left;}

.draggable {
  cursor: pointer;
}

#hr01 {
}
</style>
</head>
<body>
<br><br><br><br> 
<div id="imagesContainer" style=" width:100%; height:100px;  border-style: dotted; border-size:4px;">

<span class="a"><div class="hero" id="elem1"><img style="z-index:800; width:32px; height:32px; " src="1-Red-Circle-Transp.png" ></div>  <!--  -->
</span> 

<span class="a"><div class="hero draggable"  id="elem2"><img class="draggable"; style="z-index:500; width:20px; height:20px;" src="naturalAccidental-Grey-vm.png"></div>  <!--  -->
</span> 

</div>  <!--  id="imagesContainer"  -->

<hr id="hr01">

  <div style="clear:both"></div>

  <script>
var elemNumber = 0;
var element = "";
var elem = "" ;
var hold_this_id = "" ;
// =================================================

    document.addEventListener('contextmenu', fireContextMenu);
    
// This function will be called whenever contextmenu event occurs
function fireContextMenu(event) {
    event.preventDefault();

for(var i of document.querySelectorAll('.hero')){
i.addEventListener('contextmenu', function(event) {
    event.preventDefault();
    alert("this.id 01 = " + this.id);
    hold_this_id = this.id ;
    console.log("this.id 01 = " + hold_this_id);
    return false;
}, false);
}

// Get the element
var elem = document.querySelector(this.id);
//console.log(elem);


// Create a copy of it
var clone = elem.cloneNode(true);    // statement 98
clone.addEventListener("dragstart", (event) => { drag(event); });

// Update the ID and add a class
clone.id = 'elem1' + elemNumber;
clone.draggable = 'true';
clone.onclick = "helloConsole()"
clone.zIndex = elemNumber;
elemNumber = elemNumber + 1

// Inject it into the DOM
hr01.after(clone);
  //function cloneElem1()

}
// =================================================
  </script>

</body>
</html>
Thanks for your Help...
 
MeMate

MeMate

Joined
Mar 11, 2022
Messages
227
Reaction score
32
As you see here: https://jsfiddle.net/7eotnxb5/ it works.

The rest of your code is BS.

Just a short example. What the hell is that???
Code: 
var elem = document.querySelector(this.id);

Now i've seen you wraped the for loop into your fireContextMenu function??????? Why????? Of course you'll get errors. Fix that.
Step by step. Your code is a mess. Improve it. Ask for certain questions to fix it, but please nothing like "please fix my mess for me". Because i have no idea what ecaxtly you're trying to achive here.
 
V

vmars316

Joined
May 21, 2012
Messages
44
Reaction score
0
MeMate said:
Because i have no idea what ecaxtly you're trying to achive here.
Click to expand...
Thanks MeMate
I am trying to help these folks out:
Link1)
https://www.facebook.com/groups/617451321668055
But some users complained that using Drag Drop , they had to Drag toooo slooow , else the Cursor would loose the Target .
So I am looking for a better/faster alternative and maybe use images instead of copying/pasting .
Originally I began with this :
Link 2)
http://vmars.us/Guitar/Guitar-Scales-and-Boxes-Builder.html

Which is very primitive coding , lots of copy/pasting .
I used to program on IBM mainframes (COBOL,RPG,BAL) in the 70s & 80s ,
but these days I work on my laptop learning Html , Js and CSS & learning Guitar .
This is the Closest I have gotten so far :
https://vmars.us/Guitar/DnD-TRY-STUFF-1-CLONE-WORKING-RO.html

As you can tell from Link2 there will be '10-RightClick-Cloning-Images non-Draggable images' .
The CLONES will be Drag-Drop .
And 'contextmenu' seems to be the best way to distinguish between the Cloners and the Cloned .

Yes , I can see that Your Code works fine , I felt a bit overwhelmed by my 'Cloning code not working' .
I hope you can continue to Help me .
The thing I have trouble with most are Targeting DOM elements .

Thanks
 
MeMate

MeMate

Joined
Mar 11, 2022
Messages
227
Reaction score
32
Of course i help you (i play guitar by myself, so...)

Alright.

I hope i got you.

Your goal is a "notation Tool?" where users can drag and drop Notes on a online sheet. Right?
 
MeMate

MeMate

Joined
Mar 11, 2022
Messages
227
Reaction score
32
What i've seen so far:

This is supposed to be guitar frets, (Tabulator) right? So there is no (in between Strings). Drop should be restricted to Strings.
 
C

c1lonewolf

Joined
Jul 12, 2020
Messages
89
Reaction score
9
I went to your link, I think that's funny. I can click and drag the item, but the item doesn't show until I right click on my mouse, then it creates a new image everytime it's clicked. I can't even view the source. By the way, originally spans were wrapped around images so they could be dragged and dropped! move the id to the span and do away with the container!
 
V

vmars316

Joined
May 21, 2012
Messages
44
Reaction score
0
MeMate
I am getting these errors:

Code: 
this.id 01 = elem1
TheCodingForums.com-function-fireContextMenu-2-IMAGES.html:97 this.id 02 = undefined
TheCodingForums.com-function-fireContextMenu-2-IMAGES.html:98 this.id 03 = elem1
TheCodingForums.com-function-fireContextMenu-2-IMAGES.html:103 null
TheCodingForums.com-function-fireContextMenu-2-IMAGES.html:107 Uncaught TypeError: Cannot read properties of null (reading 'cloneNode')
    at HTMLDocument.fireContextMenu (TheCodingForums.com-function-fireContextMenu-2-IMAGES.html:107:18)

Apparently 'Not Allowed' to Preserve this.id for future reference .
But I need it to Calculate and Name Cloned Element .
So , How can I pass it along ?

Code: 
var elemNumber = 0;
var element = "";
var elem = null ;
var hold_this_id = null  ;
var timesIn = 1;
// =================================================

    document.addEventListener('contextmenu', fireContextMenu);
    
// This function will be called whenever contextmenu event occurs
function fireContextMenu(event) {
    event.preventDefault();
    if (timesIn == 1) {
       console.log("timesIn = " + timesIn + "   break out");
       timesIn = timesIn + 1 ;
       return ;
       }
        
for(var i of document.querySelectorAll('.hero')){
i.addEventListener('contextmenu', function(event) {
    event.preventDefault();
    console.log("this.id 01 = " + this.id);
    hold_this_id = this.id ;
    return false;
}, false);
}

    console.log("this.id 02 = " + this.id);
    console.log("this.id 03 = " + hold_this_id);   // statement


// Get the element
var elem = document.querySelector(this.id);
console.log(elem);                                          // statement 103


// Create a copy of it
var clone = elem.cloneNode(true);                   // statement 107
//clone.addEventListener("dragstart", (event) => { drag(event); });

// Update the ID and add a class
clone.id = 'elem1' + elemNumber;
clone.draggable = 'false';
clone.onclick = "helloConsole()"
clone.zIndex = elemNumber;
elemNumber = elemNumber + 1
console.log("clone.id = " + clone.id)

Thanks for your Help...
 
V

vmars316

Joined
May 21, 2012
Messages
44
Reaction score
0
c1lonewolf said:
I went to your link, I think that's funny. I can click and drag the item, but the item doesn't show until I right click on my mouse, then it creates a new image everytime it's clicked. I can't even view the source. By the way, originally spans were wrapped around images so they could be dragged and dropped! move the id to the span and do away with the container!
Click to expand...
Hi c1lonewolf
Pls , Which Link are you referring to ?
 
V

vmars316

Joined
May 21, 2012
Messages
44
Reaction score
0
Here is the current link:
https://vmars.us/Guitar/0106-DnD-TWO-IMAGES-What-If-01.html
I cleaned up my code a bit :
Cloned image works fine now .
I can drag Cloned image , and Drop it on <div id="wholeBodyContainer"
but when I Drop it , it snaps back to original position .
Pls , How can I fix this ?

Thanks for your Help...

Code: 
<!DOCTYPE html>
<!-- saved from url  -->
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
file:///C:/2023-Drag-Drop-AnyWhere/0106-DnD-TWO-IMAGES-What-If-01.html
<br>https://vmars.us/Guitar/0106-DnD-TWO-IMAGES-What-If-01.html
</title>

<style>
html, body {
  margin: 0;
  padding: 0;
}

span.a {
  display: inline-block;
  padding: 2px;
}

.hero { 

}

.hero , #hero1 , #elem1{
  top: 250px;
  width: 24px;
  width: 24px;
  z-index: 1000;
  float: left;}

/*
#hero2 #elem2{
//  background-position: 0 -128px;
  width:24px;
  width:24px;
  z-index: 500;
  //position:absolute;
  top: 250px;
  float: left;
}
*/

.hero {
  cursor: pointer;
}

#hr01 {
}

#imagesContainer {

}
</style>
</head>
<body>
<div id="wholeBodyContainer" style=" width:100%; height:400px;  border-style: solid; border-width:4px;" ondrop="drop(event)" ondragover="allowDrop(event)" >

<h3 style="text-align: center;">file:///C:/2023-Drag-Drop-AnyWhere/0106-DnD-TWO-IMAGES-What-If-01.html
<br>https://vmars.us/Guitar/0106-DnD-TWO-IMAGES-What-If-01.html
</h3>
<br><br>
<div id="imagesContainer" style=" width:100%; height:100px;  border-style: dotted; border-width:4px;" ondrop="drop(event)" ondragover="allowDrop(event)" >


<p >
<img draggable="true" ondragstart="drag(event)"  onclick="cloneOrNot(this.id)" class="hero" id="elem1" style="z-index:800;  width:32px; height:32px; " src="1-Red-Circle-Transp.png" alt="1-Red-Circle-Transp.png" >
</p>

<p >
<img draggable="true" ondragstart="drag(event)"  onclick="cloneOrNot(this.id)" class="hero"  id="elem9" style="z-index:500; width:20px; height:20px;" src="naturalAccidental-Grey-vm.png" alt="naturalAccidental-Grey-vm.png">
</p>

</div>  <!--  id="imagesContainer"  -->

<hr id="hr01">

  <div style="clear:both"></div>
</div>  <!--  id="wholeBodyContainer"   -->

  <script>
var elemNumber = 21;
var element = "";
var elem = "" ;
var elem_id = "" ;
var elem_z_index = 1;
var hold_this_id = "" ;
var timesIn = 1;
var offset = [] ;
// =================================================

//    document.addEventListener('contextmenu', fireContextMenu);
    
// This function will be called whenever contextmenu event occurs
function cloneOrNot(elem_id) {
//  event.preventDefault();
    if (timesIn == 1) {
       console.log("timesIn = " + timesIn + "   break out");
       timesIn = timesIn + 1 ;
       console.log("1 elem_id = " + elem_id)
       return ;
       }

    if (elem_id == "elem1" || elem_id == "elem9" )  {
       console.log("if (elem_id = " + elem_id);
       }else{
       return ;
    }

//    console.log("2 elem_id = " + elem_id)

// Get the element
//var elem = document.querySelector(elem_id);
var elem = document.getElementById(elem_id)
    console.log("elem = " + elem_id);     // 
//console.log(elem);

// Create a copy of it
var clone = elem.cloneNode(true);         //

// Update the ID and add a class
clone.id = elem_id + elemNumber ;
  console.log("clone.id = " + clone.id);     // 
clone.draggable = 'true';
  console.log("clone.draggable = " + clone.draggable);     // 
//clone.onclick = "helloConsole()" ;
clone.zIndex = elem_z_index ;
  console.log("elem_z_index = " + elem_z_index ) ;
elemNumber = elemNumber + 1 ;

// Inject it into the DOM
hr01.after(clone);
  //function cloneElem1()

}
// =================================================
  </script>

<script>
function dragStart(event) {
  console.log("function dragStart(event)");
  event.dataTransfer.setData("Text", event.target.id);
}

function allowDrop(event) {
  event.preventDefault();
  console.log("function allowDrop(event)");
}

function drag(event) {
  console.log("function drag(event)");
  event.dataTransfer.setData("text", event.target.id);
}

function drop(event) {
  event.preventDefault();
  console.log("function drop(event)");
  var data = event.dataTransfer.getData("text");
//    elem_id.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
//    elem_id.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
}
 
</script>

</body>
</html>
 
C

c1lonewolf

Joined
Jul 12, 2020
Messages
89
Reaction score
9
The easiest way to do things is to clear out all the excess clutter and work only with what is needed.
Code: 
<!DOCTYPE html>
<html lang="en">
<head>
<title>Drag-Drop-Clone</title>
</head>

<body>
<div id="wholeBodyContainer" ondrop="drop(event)" ondragover="allowDrop(event)" >

<div id="imagesContainer" ondrop="drop(event)" ondragover="allowDrop(event)" >

<p >
<img class="hero" id="elem1" src="1-Red-Circle-Transp.png" draggable="true" ondragstart="drag(event)" onclick="cloneOrNot(this.id)" >
</p>

</div>  <!--  id="imagesContainer"  -->

<hr id="hr01">

  <div style="clear:both"></div>
</div>  <!--  id="wholeBodyContainer"   -->

  <script>
var elemNumber = 21;
var element = "";
var elem = "" ;
var elem_id = "" ;
var elem_z_index = 1;
var hold_this_id = "" ;
var timesIn = 1;
var offset = [] ;
// =================================================

//    document.addEventListener('contextmenu', fireContextMenu);
    
// This function will be called whenever contextmenu event occurs
function cloneOrNot(elem_id) {
//  event.preventDefault();
    if (timesIn == 1) {
       console.log("timesIn = " + timesIn + "   break out");
       timesIn = timesIn + 1 ;
       console.log("1 elem_id = " + elem_id)
       return ;
       }

    if (elem_id == "elem1" || elem_id == "elem9" )  {
       console.log("if (elem_id = " + elem_id);
       }else{
       return ;
    }

//    console.log("2 elem_id = " + elem_id)

// Get the element
//var elem = document.querySelector(elem_id);
var elem = document.getElementById(elem_id)
    console.log("elem = " + elem_id);     // 
//console.log(elem);

// Create a copy of it
var clone = elem.cloneNode(true);         //

// Update the ID and add a class
clone.id = elem_id + elemNumber ;
  console.log("clone.id = " + clone.id);     // 
clone.draggable = 'true';
  console.log("clone.draggable = " + clone.draggable);     // 
//clone.onclick = "helloConsole()" ;
clone.zIndex = elem_z_index ;
  console.log("elem_z_index = " + elem_z_index ) ;
elemNumber = elemNumber + 1 ;

// Inject it into the DOM
hr01.after(clone);
  //function cloneElem1()

}

//===================================================//

function dragStart(event) {
  console.log("function dragStart(event)");
  event.dataTransfer.setData("Text", event.target.id);
}

function allowDrop(event) {
  event.preventDefault();
  console.log("function allowDrop(event)");
}

function drag(event) {
  console.log("function drag(event)");
  event.dataTransfer.setData("text", event.target.id);
}

function drop(event) {
  event.preventDefault();
  console.log("function drop(event)");
  var data = event.dataTransfer.getData("text");
//    elem_id.style.left = (event.clientX + parseInt(offset[0],10)) + 'px';
//    elem_id.style.top = (event.clientY + parseInt(offset[1],10)) + 'px';
}
 
</script>

</body>
</html>

Also, your using HTML5 and some of those attributes I don't recognize. Once all the excess is removed you only need to work the process of getting one object to clone, move and drop. Once you can do that with one object you can modify the code to handle multiples. Originally they used mousedown mousemove and mouseup for this nowadays there's no telling ... just a big mess

NOTE: In your other post the code cloned(copyied) the object and moved it, it just dropped it using the wrong mouse button.
 
V

vmars316

Joined
May 21, 2012
Messages
44
Reaction score
0
C

c1lonewolf

Joined
Jul 12, 2020
Messages
89
Reaction score
9
Take the code from this page and remove the containers. Place all functions on the actions of the imag object itself. This should allow you to drop it anywhere on the page.
 
V

vmars316

Joined
May 21, 2012
Messages
44
Reaction score
0
Thanks
Buy no that won't work
because the js doesnt track the mouse movement .
Code: 
<!DOCTYPE HTML>
<html>
<head>
<style>
#div1, #div2 {
  float: left;
  width: 100px;
  height: 35px;
  margin: 10px;
  padding: 10px;
  border: 1px solid black;
}
</style>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<h2>Drag and Drop</h2>
<p>Drag the image back and forth between the two div elements.</p>

  <img src="https://vmars.us/Guitar/1-Red-Circle-Transp.png" draggable="true" ondragstart="drag(event)" id="drag1" width="88" height="31">

</body>
</html>
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

When draggable=false & draggable=true dont work ? 1
How to get event.target.id ? 3
Need help , Having problem with Drag n Drop... 1
Need help , Having problem with Drag n Drop ? 9
? Trouble with: passing dragElement(e.target.id); 8
I am trying to make an audio player, how do I get the selected file to be playable? 5
Make 'Image X' spin 360deg on y-Axis until reset button clicked 1
How can I get my menu inside of a menu to function properly? 1

Members online

No members online now.
Total: 25 (members: 0, guests: 25)
Robots: 445

Forum statistics

Threads
473,769
Messages
2,569,580
Members
45,054
Latest member
TrimKetoBoost

Latest Threads

Top