How to get event.target.id ?

Joined
May 21, 2012
Messages
44
Reaction score
0
Hello
I am having trouble getting "event.target.id" .
https://vmars.us/Guitar/Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-NOT-Working.html
Here is the script :
Code:
<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();
hold_this_id = event.target.id;  // Get ID of Clicked Element

/*
for(var i of document.querySelectorAll('img')){
i.addEventListener('contextmenu', function(event) {
    return false;
}, false);
}
*/

// Get the element
var elem = hold_this_id ;
    console.log("02 hold_this_id = " + hold_this_id);
//console.log(elem);


// Create a copy of it
var clone = elem.cloneNode(true);    // statement 134
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>

What am I doing wrong ?

Thanks for your Help...
 
Joined
May 21, 2012
Messages
44
Reaction score
0
This is the console.log Error message :

Code:
Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-NOT-Working.html:
138 Uncaught TypeError: elem.cloneNode is not a function
    at HTMLDocument.fireContextMenu (Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-NOT-Working.html:138:18)

var clone = elem.cloneNode(true); // 138

But I think Error occurs because this code is failing:

Code:
hold_this_id = event.target.id;  // Get ID of Clicked Element

Pls , can someone show me what I am doing wrong .

Thanks
 
Joined
May 21, 2012
Messages
44
Reaction score
0
Thanks
I fixed the id , but still not working:
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" />
<title>
file:///C:/2023-Drag-Drop-AnyWhere/Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-NOT-Working.html
</title>
<style>
    body {
      margin: 20px;
    }
    
    #outerContainer {
    }
    
    #container {
      width: 1420px;
      height: 430px;
      background-color: #EEE;
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border-radius: 7px;
      touch-action: none;
    }

    .item {
      touch-action: none;
      user-select: none;
      position: relative;
    }
    
    .item img {
      pointer-events: auto;
    }

.item , .one , #one {
      width: 32px;
      height: 32px;
//      top: 0px;
//      left: 0px;
//      stroke-opacity:0;
      z-index:800;
    }

.item ,    .two  , #two {
      width: 28px;
      height: 28px;
//      top: 30%;
//      left: 10%;
      z-index:500;
    }

.item ,    .three  , #three {
      width: 28px;
      height: 28px;
//      top: -40%;
//      left: -10%;
      z-index:500;
    }

.item ,    .four  , #four {
      width: 28px;
      height: 28px;
//      top: -10%;
//      left: 5%;
      z-index:500;
    }

    .item:active {
      opacity: .75;
    }

    .item:hover {
      cursor: pointer;
    }
    
/*    h1 {
      margin-bottom: 10px;
    }
*/
  </style>
</head>
<body>
<h3>https://vmars.us/Guitar/Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-NOT-Working.html
</h3>
<div id="outerContainer">
<div id="container">

<div class="item one" id="one" >
<img draggable="true" src="https://vmars.us/Guitar/1-Red-Circle-Transp-32x32.png" > 
</div>
<div class="item two" id="two"  >
<img draggable="true" src="https://vmars.us/Guitar/flatAccidental-Grey-28x28.png">
</div>
<div class="item three"  id="three"  >
<img draggable="true" src="https://vmars.us/Guitar/naturalAccidental-Grey-28x28.png">
</div>
<div class="item four"  id="four" >
<img  draggable="true" src="https://vmars.us/Guitar/sharpAccidental-Grey-28x28.png">
</div>
</div>  <!--  id="container"  -->

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

<hr id="hr01">

<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();
hold_this_id = event.target.id;  // Get ID of Clicked Element

/* 
for(var i of document.querySelectorAll('img')){
i.addEventListener('contextmenu', function(event) {
    return false;
}, false);
}
*/

// Get the element
var elem = hold_this_id ;
    console.log("02 hold_this_id = " + hold_this_id);
//console.log(elem);


// Create a copy of it
var clone = elem.cloneNode(true);    // 138
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>

<script>
    var container = document.querySelector("#container");
    var activeItem = null;

    var active = false;

    container.addEventListener("touchstart", dragStart, false);
    container.addEventListener("touchend", dragEnd, false);
    container.addEventListener("touchmove", drag, false);

    container.addEventListener("mousedown", dragStart, false);
    container.addEventListener("mouseup", dragEnd, false);
    container.addEventListener("mousemove", drag, false);

    function dragStart(e) {

      if (e.target !== e.currentTarget) {
        active = true;

        // this is the item we are interacting with
        activeItem = e.target;
console.log("activeItem = " + activeItem);

        if (activeItem !== null) {
          if (!activeItem.xOffset) {
            activeItem.xOffset = 0;
          }

          if (!activeItem.yOffset) {
            activeItem.yOffset = 0;
          }

          if (e.type === "touchstart") {
            activeItem.initialX = e.touches[0].clientX - activeItem.xOffset;
            activeItem.initialY = e.touches[0].clientY - activeItem.yOffset;
          } else {
            console.log("doing something!");
            activeItem.initialX = e.clientX - activeItem.xOffset;
            activeItem.initialY = e.clientY - activeItem.yOffset;
          }
        }
      }
    }

    function dragEnd(e) {
      if (activeItem !== null) {
        activeItem.initialX = activeItem.currentX;
        activeItem.initialY = activeItem.currentY;
      }

      active = false;
      activeItem = null;
    }

    function drag(e) {
          e.preventDefault();
      if (active) {
        if (e.type === "touchmove") {

          activeItem.currentX = e.touches[0].clientX - activeItem.initialX;
          activeItem.currentY = e.touches[0].clientY - activeItem.initialY;
        } else {
          activeItem.currentX = e.clientX - activeItem.initialX;
          activeItem.currentY = e.clientY - activeItem.initialY;
        }

        activeItem.xOffset = activeItem.currentX;
        activeItem.yOffset = activeItem.currentY;

        setTranslate(activeItem.currentX, activeItem.currentY, activeItem);
      }
    }

    function setTranslate(xPos, yPos, el) {
      el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
    }
  </script>
 
</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

Members online

Forum statistics

Threads
473,787
Messages
2,569,627
Members
45,328
Latest member
66Teonna9

Latest Threads

Top