When draggable=false & draggable=true dont work ?

Joined
May 21, 2012
Messages
44
Reaction score
0
Hello

  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
  3. 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-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>
 
Joined
Jan 30, 2023
Messages
107
Reaction score
13
The issue seems to be with the draggable property of the img elements not being set correctly. According to the HTML5 specification, the value of the draggable attribute should be either "true" or "false", but in the code the value is being set as a string with curly quotes (“false” and “true”). To fix it, replace the curly quotes with regular double quotes, e.g. draggable="false".

Line #98:

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

Line #148:

PHP:
clone.draggable = true;
 

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

No members online now.

Forum statistics

Threads
473,790
Messages
2,569,637
Members
45,346
Latest member
EstebanCoa

Latest Threads

Top