Hello
- On line #98 (in code below) I specify this "<img draggable=“false” .
But it is still ‘draggable’ - 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 -
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"> <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>