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


Joined
May 21, 2012
Messages
31
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..
 
Ad

Advertisements

Joined
Mar 11, 2022
Messages
225
Reaction score
29
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);

}
 
Joined
Jul 12, 2020
Messages
73
Reaction score
2
divisional (div) containers do not go inside spans. divs are block elements, spans are inline.
 
Joined
May 21, 2012
Messages
31
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...
 
Joined
Mar 11, 2022
Messages
225
Reaction score
29
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.
 
Joined
May 21, 2012
Messages
31
Reaction score
0
Because i have no idea what ecaxtly you're trying to achive here.
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
 
Ad

Advertisements

Joined
Mar 11, 2022
Messages
225
Reaction score
29
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?
 
Joined
Mar 11, 2022
Messages
225
Reaction score
29
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.
 
Joined
Jul 12, 2020
Messages
73
Reaction score
2
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!
 
Ad

Advertisements

Joined
May 21, 2012
Messages
31
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...
 
Joined
May 21, 2012
Messages
31
Reaction score
0
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!
Hi c1lonewolf
Pls , Which Link are you referring to ?
 
Joined
May 21, 2012
Messages
31
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>
 
Joined
Jul 12, 2020
Messages
73
Reaction score
2
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.
 
Ad

Advertisements

Joined
May 21, 2012
Messages
31
Reaction score
0
Joined
Jul 12, 2020
Messages
73
Reaction score
2
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.
 
Ad

Advertisements

Joined
May 21, 2012
Messages
31
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

Top