Troubles with: clone.draggable = 'true'; & draggable="false"

1

Hello
In HTML :

Code:Copy to clipboard

<div>
<img class="item"  id="elem2" draggable="false" src="flatAccidental-Grey-28x28.png" style="z-index:500;
width:24px; height:24px; top:4px;" >
</div>

In javascript :

Code:Copy to clipboard

//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);

You can see it run here :
https://vmars.us/Guitar/Drag-Drop-Multiple-Elements-CLONE-WORKING.html
RightClick on Images to make a clone .
Here is the code :

Code:Copy to clipboard

<!DOCTYPE html>
<!-- saved from url=(0101)file:///C:/2023-Drag-Drop-AnyWhere/Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-NOT-Working.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<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-NOW-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;
    }
   
    #inlineContainer {
      display: inline-block;
    }
   
.flex-container {
  display: flex;
  flex-wrap: nowrap;
  border-style: none;
  background-color: DodgerBlue;
}

#cloneContainer {
  display: inline-block;
  white-space: pre;
//  display: flex;
//  flex-wrap: nowrap;
  width: 1200px
  height: 50px;
//  border: dotted;
}

    .item {
      touch-action: none;
      user-select: none;
      position: relative;
    }
   

    .item img {
      pointer-events: auto;
    }

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

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

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

.item ,    .four  , #elem4 {
      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>
<a href="file:///C:/2023-Drag-Drop-AnyWhere/Drag-Drop-Multiple-Elements-CLONE-WORKING.html" target="_blank">
file:///C:/2023-Drag-Drop-AnyWhere/Drag-Drop-Multiple-Elements-CLONE-WORKING.html</a>
<br>
<a href="https://vmars.us/Guitar/Drag-Drop-Multiple-Elements-CLONE-WORKING.html" target="_blank">
Drag-Drop-Multiple-Elements-CLONE-WORKING.html</a>
<br> What about: cursor: pointer;
</h3>
<div id="outerContainer">
<div id="container">
<br><br>
<div class="flex-container" id="inlneContainer" style="">
&nbsp;
<div>
<img class="item" id="elem1" draggable="false"  src="1-Red-Circle-Transp-32x32.png" style="z-index:800;
width:34px; height:34px; top:4px;"  >
</div>

<div>
<img class="item"  id="elem2" draggable="false" src="flatAccidental-Grey-28x28.png" style="z-index:500;
width:24px; height:24px; top:4px;" >
</div>

<div>
<img class="item" id="elem3" draggable="false" src="naturalAccidental-Grey-28x28.png" style="z-index:500;
width:24px; height:24px; top:4px;" >
</div>

<div>
<img class="item" id="elem4" draggable="false" src="sharpAccidental-Grey-28x28.png" style="z-index:500;
width:24px; height:24px; top:4px;" >
</div>
&nbsp;&nbsp;

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

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

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

<div id="cloneContainer" >
<hr id="hr01">

</div>  <!--  id="coneContainer";>  -->

<!--  <hr id="hr02">  -->


<script>
var elemNumber = 1;
// =================================================

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


// Create a copy of it
var clone = event.target.cloneNode(true);    // 159

clone.addEventListener("dragstart", (event) => { drag(event); });



if (clone.id == "elem1" || clone.id == "elem2" || clone.id == "elem3" || clone.id == "elem4" || clone.id == "elem5"
 || clone.id == "elem6" || clone.id == "elem7" || clone.id == "elem8" || clone.id == "elem9" || clone.id == "elem10")
 { console.log("Yep ,  " + clone.id + "  is Clone-able !") ;
 }else{
  return ;
}

//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);
}
// =================================================

  </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>

Thanks for your Helpā€¦

2

Sorry - what are you trying to do? I looked at your example, and right-clicking on the elements there created a copy :slight_smile:

3

I am trying to Drag the Cloned-Images .
And trying to ā€˜NOT Dragā€™ the NOT-Cloned images .
<img class=ā€œitemā€ id=ā€œelem2ā€ draggable=ā€œfalseā€ src=ā€œflatAccidental-Grey-28x28.pngā€ style=ā€œz-index:500;
width:24px; height:24px; top:4px;ā€