Hello ,
Thank You for your article on Drag-Drop Multiple Elements .
I would like to find it again , Pls , where is it ?
The question I have re: the article
is “how can I modify it to work with .png images” ?
I am trying to do that now ,
turns out I can only Drag-Drop it once , per page load , then is won’t budge again , until I re-Load the Page .
Your Example is Exactly what I have been trying to do for weeks ,
but I need the Transparency of .PNGs .
I have one way , but it is very SLOW and finicky ,
Yours is Plenty Fast .
I can Post the code if needed .
Thanks for your Help…
Here you go: Drag Multiple Elements
The thread that discusses can be seen here: Create a Draggable Element in JavaScript - #3 by kirupa
The easiest way to do this is to put your images inside the div element that we are currently dragging around. You will need to adjust the styles on the div to not be a circle as is currently shown in the examples, though 
Thank You , I’ll give it a shot .
Hello again ,
Your code works GREAT for images .
https://www.kirupa.com/html5/examples/drag_multiple.htm
But I’m having troubles with my ‘contextmenu’ code .
Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-LISTEN-on-DIV.html:136 Uncaught TypeError: clickedItem.cloneNode is not a function
at HTMLDocument.fireContextMenu (Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-LISTEN-on-DIV.html:136:27)
Can Try it here:
https://vmars.us/Guitar/Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-LISTEN-on-DIV.html
My 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>file:///C:/2023-Drag-Drop-AnyWhere/Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-LISTEN-on-DIV.html
</h3>
<div id="outerContainer">
<div id="imageContainer">
<img draggable="true" class="item" id="one" src="https://vmars.us/Guitar/1-Red-Circle-Transp-32x32.png" >
<img draggable="true" class="item" id="two" src=
"https://vmars.us/Guitar/flatAccidental-Grey-28x28.png">
<div >
<img draggable="true" class="item" id="three" src="https://vmars.us/Guitar/naturalAccidental-Grey-28x28.png">
<img draggable="true" class="item" id="four" src="https://vmars.us/Guitar/sharpAccidental-Grey-28x28.png">
</div> <!-- id="imageContainer" -->
</div> <!-- id="outerContainer" -->
<hr id="hr01">
<script>
var elemNumber = 0;
var element = "";
var elem = "" ;
var hold_this_id = "" ;
var imageContainerDiv = document.querySelector("#imageContainer") ;
// =================================================
document.addEventListener('contextmenu', fireContextMenu);
// This function will be called whenever contextmenu event occurs
function fireContextMenu(event) {
event.preventDefault();
if (event.target !== event.currentTarget) {
var clickedItem = event.target.id;
alert("event.target.id = " + clickedItem) ;
}
event.stopPropagation
// Get the element
var elem = clickedItem ;
console.log("02 clickedItem = " + clickedItem);
//console.log(elem);
// Create a copy of it
const clone = clickedItem.cloneNode(true); // line 136
document.getElementById("clickedItem").appendChild(clickedItem)
clone.addEventListener("dragstart", (event) => { drag(event); });
// Update the ID and add a class
clone.id = 'clickedItem' + 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("#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>
Tanks for your Help…
Turns out I needed to use this
var clone = event.target.cloneNode(true);
instead of this
// 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); // statement 134
Below is the evidence that the clone actually worked .
What I have to figure next is why the Clones can’t be Dragged & Dropped ; Any Ideas ? Thanks…
<!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;
}
.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>
<img class="item one" id="one" draggable="true" src="./Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-NOT-Working_files/1-Red-Circle-Transp-32x32.png" style="transform: translate3d(-291px, -84px, 0px);">
</div>
<div>
<img class="item two" id="two" draggable="true" src="./Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-NOT-Working_files/flatAccidental-Grey-28x28.png">
</div>
<div>
<img class="item three" id="three" draggable="true" src="./Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-NOT-Working_files/naturalAccidental-Grey-28x28.png" style="transform: translate3d(1px, 0px, 0px);">
</div>
<div>
<img class="item four" id="four" draggable="true" src="./Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-NOT-Working_files/sharpAccidental-Grey-28x28.png">
</div>
</div> <!-- id="container" -->
</div> <!-- id="outerContainer" -->
<hr id="hr01">
<img class="item four" id="elem13" draggable="true" src="./Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-NOT-Working_files/sharpAccidental-Grey-28x28.png">
<img class="item three" id="elem12" draggable="true" src="./Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-NOT-Working_files/naturalAccidental-Grey-28x28.png" style="transform: translate3d(1px, 0px, 0px);">
<img class="item two" id="elem11" draggable="true" src="./Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-NOT-Working_files/flatAccidental-Grey-28x28.png">
<img class="item one" id="elem10" draggable="true" src="./Drag-Drop-Working-Multiple-28x28-Elements-K-CLONE-NOT-Working_files/1-Red-Circle-Transp-32x32.png">
<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; // 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 = event.target.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>
