# When draggable=“false” & draggable=“true” don’t work?

**URL:** <https://forum.kirupa.com/t/when-draggable-false-draggable-true-don-t-work/656324>\
**Category:** programming\
**Created:** [January 14, 2023, 10:13pm UTC](https://forum.kirupa.com/t/when-draggable-false-draggable-true-don-t-work/656324 "2023-01-14T22:13:09Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\
**Post date:** [January 14, 2023, 10:13pm UTC](https://forum.kirupa.com/t/when-draggable-false-draggable-true-don-t-work/656324/1 "2023-01-14T22:13:09Z")

</div>

Hello  
**When draggable=“false” & draggable=“true” don’t work ?  
But no ERRORS:**

1. On line #98 (in code below) I specify this "\<img draggable=“false” .  
But it is still ‘draggable’
2. On line #148 I specify "clone.draggable = ‘true’; " .  
But it isn’t ‘draggable’ .  
After running the code and then I download the page , it Shows that the Cloned img is indeed written as “draggable=“true”” .  
So how can I fix things ?  
Thanks for your Help…  
[https://vmars.us/Guitar/Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-NO-DIVs.html](https://vmars.us/Guitar/Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-NO-DIVs.html)

```auto
<!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-LISTEN-on-DIV.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 {
      width: 32px;
      height: 32px;
// top: 0px;
// left: 0px;
// stroke-opacity:0; 
	  z-index:800;
    }

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

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

.item , #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>   

<a href="https://vmars.us/Guitar/Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-NO-DIVs.html" target="_blank">
https://vmars.us/Guitar/Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-NO-DIVs.html</a>
<br>

</h3>

<div id="outerContainer">
<div id="imageContainer">

<img draggable="false" class="item" id="one" src="https://vmars.us/Guitar/1-Red-Circle-Transp-32x32.png" > // 98

<img draggable="false" class="item" id="two" src="https://vmars.us/Guitar/flatAccidental-Grey-28x28.png"> 

<img draggable="false" class="item" id="three" src="https://vmars.us/Guitar/naturalAccidental-Grey-28x28.png"> 

<img draggable="false" class="item" id="four" src="https://vmars.us/Guitar/sharpAccidental-Grey-28x28.png"> 

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

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

<div>
<hr id="hr01">
&nbsp;
<hr id="hr02">
</div>
<script>
var elemNumber = 1;
var clodeId ;
// =================================================

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

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

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{
  console.log("NOPE , " + clone.id + " is NOT Clone-able !") ;
  return ;
}
*/

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

// Inject it into the DOM
hr01.after(clone);
}
// =================================================

  </script>

<script>
    var container = document.querySelector("#imageContainer");
    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>
```

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [January 17, 2023, 11:29pm UTC](https://forum.kirupa.com/t/when-draggable-false-draggable-true-don-t-work/656324/2 "2023-01-17T23:29:30Z")

</div>

Your code for having something be draggable isn’t impacted by the `draggable` attribute or the `draggable` property 🙂

It is fully contained by your `dragStart` code. This is also why your cloned elements aren’t dragging once you add them to the DOM. Your dragging code only works on elements inside the **container** element. If you clone a new element to another location, the drag code never picks it up.

Here is a modified version of your code, and notice the areas where I added a “KIRUPA:” comment:

```auto
<!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-LISTEN-on-DIV.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 {
      width: 32px;
      height: 32px;
      top: 0px;
      left: 0px;
      stroke-opacity:0; 
      z-index: 800;
    }

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

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

    .item,
    #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>

    <a href="https://vmars.us/Guitar/Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-NO-DIVs.html" target="_blank">
      https://vmars.us/Guitar/Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-NO-DIVs.html</a>
    <br>

  </h3>

  <div id="outerContainer">
    <div id="imageContainer">

      <img class="item" id="one" src="https://vmars.us/Guitar/1-Red-Circle-Transp-32x32.png"> // 98

      <img class="item" id="two" src="https://vmars.us/Guitar/flatAccidental-Grey-28x28.png">

      <img class="item" id="three" src="https://vmars.us/Guitar/naturalAccidental-Grey-28x28.png">

      <img class="item" id="four" src="https://vmars.us/Guitar/sharpAccidental-Grey-28x28.png">

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

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

  <div>
    <hr id="hr01">
    &nbsp;
    <hr id="hr02">
  </div>
  <script>
    var elemNumber = 1;
    var clodeId;
    // =================================================

    document.addEventListener('contextmenu', fireContextMenu);

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

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

      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{
        console.log("NOPE , " + clone.id + " is NOT Clone-able !") ;
        return ;
      }
      */

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

      // KIRUPA: This is to ensure whatever transform was initially applied doesn't carry over to the cloned element
      clone.style.transform = "";

      // Inject it into the DOM
      // KIRUPA: Notice that I am adding it as a child of "container", for your drag code only listens
      // to drag operations on the container element. The "draggable" attribute doesn't do much for you here.
      container.appendChild(clone);
    }
// =================================================

  </script>

  <script>
    var container = document.querySelector("#imageContainer");
    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>

```

Also one minor detail. Commenting in CSS is done by adding `/* foo */` opening and closing tags. The `// foo` tags don’t work there as expected. It’s a strange design choice in the language 😱

Let me know if this helps.

Cheers,  
Kirupa
