<!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-NOT-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;
}
.item {
touch-action: none;
user-select: none;
position: relative;
}
.item img {
pointer-events: auto;
}
.item , .one , #one {
width: 32px;
height: 32px;
// top: 0px;
// left: 0px;
// stroke-opacity:0;
z-index:800;
}
.item , .two , #two {
width: 28px;
height: 28px;
// top: 30%;
// left: 10%;
z-index:500;
}
.item , .three , #three {
width: 28px;
height: 28px;
// top: -40%;
// left: -10%;
z-index:500;
}
.item , .four , #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>https://vmars.us/Guitar/Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-NOT-Working.html
</h3>
<div id="outerContainer">
<div id="container">
<div class="item one" id="one" >
<img draggable="true" src="https://vmars.us/Guitar/1-Red-Circle-Transp-32x32.png" >
</div>
<div class="item two" id="two" >
<img draggable="true" src="https://vmars.us/Guitar/flatAccidental-Grey-28x28.png">
</div>
<div class="item three" id="three" >
<img draggable="true" src="https://vmars.us/Guitar/naturalAccidental-Grey-28x28.png">
</div>
<div class="item four" id="four" >
<img draggable="true" src="https://vmars.us/Guitar/sharpAccidental-Grey-28x28.png">
</div>
</div> <!-- id="container" -->
</div> <!-- id="outerContainer" -->
<hr id="hr01">
<script>
var elemNumber = 0;
var element = "";
var elem = "" ;
var hold_this_id = "" ;
// =================================================
document.addEventListener('contextmenu', fireContextMenu);
// This function will be called whenever contextmenu event occurs
function fireContextMenu(event) {
event.preventDefault();
hold_this_id = event.target.id; // Get ID of Clicked Element
/*
for(var i of document.querySelectorAll('img')){
i.addEventListener('contextmenu', function(event) {
return false;
}, false);
}
*/
// Get the element
var elem = hold_this_id ;
console.log("02 hold_this_id = " + hold_this_id);
//console.log(elem);
// Create a copy of it
var clone = elem.cloneNode(true); // 138
clone.addEventListener("dragstart", (event) => { drag(event); });
// 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);
//function cloneElem1()
}
// =================================================
</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>
