Hello
When draggable=“false” & draggable=“true” don’t work ?
But no ERRORS:
- 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
<!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>
