Welcome!

By registering with us, you'll be able to discuss, share and private message with other members of our community.

SignUp Now!
  • Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • You can also use markdown to share your code. When using markdown your code will be automatically converted to BBCode. For help with markdown check out the markdown guide.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript Convert code from: DnD 1 DIV to DnD Multiple DIVs .

vmars316

Well-Known Coder
Thanks for your Help:
What I am trying to do is Modify this W3School's example code
so that I can DragDrop Multiple Divs
Rather than just DnD 1 Div .
W3Schools online HTML editor
My code has changed a bit from above code ,
now using DIVs instead Images .
Code:
<!DOCTYPE html>
<!-- saved from url=(0085)file:///C:/2023-Drag-Drop-AnyWhere/TRY-THIS/Which-DIV-was-CLICKED-getElementById.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
img {
    margin: 5px;
    padding: 5px 8px;
    outline: none;
    border: none;
    color: white;
    font-size: 1em;
}
div:hover {
//    background-color: #ffa000;
    cursor: pointer;
}
#result {
  border:1px solid;
  display:inline-block;
  margin:5px;
/*   padding:5px; */
}
</style>
</head>
<body>
<div id="elemContainer" style="position: absolute;  width: 1420px; height: 750px;  display:inline-block; ">
  <div class="item" id="elem1" draggable="true" style="border-radius: 50%; width:32px; height:32px; position: relative; float:left; left: 30%; top:0; background-color: #FF0004;">&nbsp;1</div>
 
 <div class="item" id="elem2" draggable="true" style="border-radius: 50%; width:32px; height:32px; position: relative; float:left; left: 31%;  top: 0; background-color: #FE8E05;">&nbsp;2</div>
 
 </div>  <!--   id="elemContainer"  -->
<div id="result">result = </div>
<script>
var holdTargetId = "" ;
var thruCount = 1;
const elemContainer = document.getElementsByTagName("div");
const result = document.getElementById("result");
const buttonPressed = e => {
  result.innerHTML = e.target.id;
  holdTargetId = e.target.id;
console.log("You clicked this div = " + holdTargetId ) ;
  dragElement(holdTargetId) ;
}
for (let div of elemContainer) {
  console.log( "thruCount = " + thruCount);
  div.addEventListener("click", buttonPressed);
  thruCount = thruCount + 1;
}
</script>
<script>
var elmnt ;
var timesIn = 0 ;
//document.addEventListener("mousedown", dragElement);
function dragElement(holdTargetId) {
console.log("dragElement(holdTargetId)") ;
//  if (timesIn < 1 ) {return}
//  timesIn = timesIn + 1 ;
  elmnt = holdTargetId ;
console.log("function dragElement(elmnt"  + holdTargetId) ;
//  var savedTargetId = event.target.id ;
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  console.log("console.log says  = " + holdTargetId);
   elmnt.onmousedown = dragMouseDown;
}
  function dragMouseDown(e) {
console.log("function dragMouseDown(e)") ;
    e = e || window.event;
    e.preventDefault();
   
    console.log("function dragMouseDown(e)") ;
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }
  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
console.log("function elementDrag(e)") ;
    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }
  function closeDragElement() {
    /* stop moving when mouse button is released:*/
console.log("function closeDragElement()")
    document.onmouseup = null;
    document.onmousemove = null;
  }
</script>
</body></html>
The 1st script figures out which DIV was Clicked-on .
The 2nd script then Drags and Drops the Clicked-on DIV .
I am trying to get from 1st script
to function dragElement(holdTargetId) which is in 2nd script .

It never gets to:
function dragMouseDown(e)
function elementDrag(e)
function closeDragElement()


Thanks for your Help...
 
Last edited:
Thanks for your Help:
What I am trying to do is Modify this W3School's example code
so that I can DragDrop Multiple Divs
Rather than just DnD 1 Div .
W3Schools online HTML editor
My code has changed a bit from above code ,
now using DIVs instead Images .
https://vmars.us/Guitar/Which-DIV-was-CLICKED-BY-PARENT.html
Code:
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<style>
img {
    margin: 5px;
    padding: 5px 8px;
    outline: none;
    border: none;
    color: white;
    font-size: 1em;
}

div:hover {
//    background-color: #ffa000;
    cursor: pointer;
}

#result {
  border:1px solid;
  display:inline-block;
  margin:5px;
/*   padding:5px; */
}
</style>
</head>
<body>

<div id="elemContainer" style="position: absolute;  width: 1420px; height: 750px;  display:inline-block; ">

  <div class="item" id="elem1" draggable="true" style="border-radius: 50%; width:32px; height:32px; position: relative; float:left; left: 30%; top:0; background-color: #FF0004;">&nbsp;1</div>
 
 <div class="item" id="elem2" draggable="true" style="border-radius: 50%; width:32px; height:32px; position: relative; float:left; left: 31%;  top: 0; background-color: #FE8E05;">&nbsp;2</div>
 
 </div>  <!--   id="elemContainer"  -->

<div id="result">result = </div>

<script>
var holdTargetId ;
//  dragElement(holdTargetId) ;

const divGroup = document.getElementById("elemContainer");
const result = document.getElementById("result");

const divGroupPressed = e => {
 
  const isDiv = e.target.nodeName === 'DIV';
 
  if(!isDiv) {
    return
  }
 
 holdTargetId = e.target.id ;
  console.log("holdTargetId = " + holdTargetId) ;
 
  dragElement(holdTargetId) ;
}
divGroup.addEventListener("click", divGroupPressed);

</script>

<script>
var elmnt ;
var timesIn = 0 ;

function dragElement(holdTargetId) {
console.log("function dragElement(elmnt = "  + holdTargetId) ;
  elmnt = holdTargetId ;

//  var savedTargetId = event.target.id ;
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;

   elmnt.onmousedown = dragMouseDown; 
}

  function dragMouseDown(e) {
console.log("function dragMouseDown(e)") ;
    e = e || window.event;
    e.preventDefault();
    
    // get the mouse cursor position at startup:
    pos3 = e.clientX;
    pos4 = e.clientY;
    document.onmouseup = closeDragElement;
    // call a function whenever the cursor moves:
    document.onmousemove = elementDrag;
  }

  function elementDrag(e) {
    e = e || window.event;
    e.preventDefault();
console.log("function elementDrag(e)") ;

    // calculate the new cursor position:
    pos1 = pos3 - e.clientX;
    pos2 = pos4 - e.clientY;
    pos3 = e.clientX;
    pos4 = e.clientY;
    // set the element's new position:
    elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
    elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
  }

  function closeDragElement() {
    /* stop moving when mouse button is released:*/
console.log("function closeDragElement()")
    document.onmouseup = null;
    document.onmousemove = null;
  }

</script>

</body></html>
 
I don't really understand any of that code...
But DnD of multiple div's is easy enough, it's no different from dragging a single element. Try this code :

HTML:
<!DOCTYPE HTML>
<html>
<head>
<script>
function allowDrop(ev)
{
    ev.preventDefault();
}
function drag(ev)
{
    ev.dataTransfer.setData("text", ev.target.id);
}
function drop(ev)
{
    ev.preventDefault();
    ev.target.appendChild(document.getElementById(ev.dataTransfer.getData("text")));
}
</script>
</head>

<body>
<div id="both" draggable="true" ondragstart="drag(event)">
    <div> A</div>
    <div> B</div>
</div>

<div ondrop="drop(event)" ondragover="allowDrop(event)" style="border:1px solid black; height:100px;width:100px"></div>

</body>
</html>
I don't know why it should be more complicated than this.
 
Anywhere on screen, all over the page ? That is pretty radical. Surely you don't want to drop everything over anything ? What is the point of that ?
Would you not just define a number of designated drop areas and (dynamically) define ondrop and ondragover events for all of them ?
 

New Threads

Latest posts

Buy us a coffee!

Back
Top Bottom