Hello
In HTML :
Code:Copy to clipboard
<div>
<img class="item" id="elem2" draggable="false" src="flatAccidental-Grey-28x28.png" style="z-index:500;
width:24px; height:24px; top:4px;" >
</div>
In javascript :
Code:Copy to clipboard
//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);
You can see it run here :
https://vmars.us/Guitar/Drag-Drop-Multiple-Elements-CLONE-WORKING.html
RightClick on Images to make a clone .
Here is the code :
Code:Copy to clipboard
<!DOCTYPE html>
<!-- saved from url=(0101)file:///C:/2023-Drag-Drop-AnyWhere/Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-NOT-Working.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<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-NOW-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;
}
#inlineContainer {
display: inline-block;
}
.flex-container {
display: flex;
flex-wrap: nowrap;
border-style: none;
background-color: DodgerBlue;
}
#cloneContainer {
display: inline-block;
white-space: pre;
// display: flex;
// flex-wrap: nowrap;
width: 1200px
height: 50px;
// border: dotted;
}
.item {
touch-action: none;
user-select: none;
position: relative;
}
.item img {
pointer-events: auto;
}
.item , .one , #elem1 {
width: 32px;
height: 32px;
// top: 0px;
// left: 0px;
// stroke-opacity:0;
z-index:800;
}
.item , .two , #elem2 {
width: 28px;
height: 28px;
// top: 30%;
// left: 10%;
z-index:500;
}
.item , .three , #elem3 {
width: 28px;
height: 28px;
// top: -40%;
// left: -10%;
z-index:500;
}
.item , .four , #elem4 {
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="file:///C:/2023-Drag-Drop-AnyWhere/Drag-Drop-Multiple-Elements-CLONE-WORKING.html" target="_blank">
file:///C:/2023-Drag-Drop-AnyWhere/Drag-Drop-Multiple-Elements-CLONE-WORKING.html</a>
<br>
<a href="https://vmars.us/Guitar/Drag-Drop-Multiple-Elements-CLONE-WORKING.html" target="_blank">
Drag-Drop-Multiple-Elements-CLONE-WORKING.html</a>
<br> What about: cursor: pointer;
</h3>
<div id="outerContainer">
<div id="container">
<br><br>
<div class="flex-container" id="inlneContainer" style="">
<div>
<img class="item" id="elem1" draggable="false" src="1-Red-Circle-Transp-32x32.png" style="z-index:800;
width:34px; height:34px; top:4px;" >
</div>
<div>
<img class="item" id="elem2" draggable="false" src="flatAccidental-Grey-28x28.png" style="z-index:500;
width:24px; height:24px; top:4px;" >
</div>
<div>
<img class="item" id="elem3" draggable="false" src="naturalAccidental-Grey-28x28.png" style="z-index:500;
width:24px; height:24px; top:4px;" >
</div>
<div>
<img class="item" id="elem4" draggable="false" src="sharpAccidental-Grey-28x28.png" style="z-index:500;
width:24px; height:24px; top:4px;" >
</div>
</div> <!-- id="inlineContainer" -->
</div> <!-- id="container" -->
</div> <!-- id="outerContainer" -->
<div id="cloneContainer" >
<hr id="hr01">
</div> <!-- id="coneContainer";> -->
<!-- <hr id="hr02"> -->
<script>
var elemNumber = 1;
// =================================================
document.addEventListener('contextmenu', fireContextMenu);
// This function will be called whenever contextmenu event occurs
function fireContextMenu(event) {
event.preventDefault();
// Create a copy of it
var clone = event.target.cloneNode(true); // 159
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{
return ;
}
//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);
}
// =================================================
</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>
Thanks for your Help…