Multiple Dragable DIV Elements ?

vmars316 · August 1, 2019

Hello & Thanks ,

Sorry so many questions at once , they are all part of one project .

Referring to the article:
'Draggable DIV Element' here:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_draggable

I would like to have multiple movable <div>s .
But having problems .
Here is the code so far:

<!DOCTYPE html>
<html>
<style>
#mydiv {
  position: absolute;
  z-index: 9;
  background-color: #f1f1f1;
  text-align: center;
  border: 1px solid #d3d3d3;
  cursor: move;
}

#mydivheader {
  padding: 10px;
  cursor: move;
  z-index: 10;
  background-color: #2196F3;
  color: #fff;
}
</style>
<body>

<h1>Draggable DIV Element</h1>

<p>Click and hold the mouse button down while moving the DIV element</p>

<div id="mydiv">
<!--  <div id="mydivheader">Click here to move div1</div>  -->
  <p>Move</p>
  <p>this</p>
  <p>DIV</p>
</div>
<!-- 
<div class="mydiv">
<!--  <div id="mydivheader">Click here to move div2</div> 
  <p>Move</p>
  <p>this</p>
  <p>DIV</p>
</div>
-->
<script>
//Make the DIV element draggagle:
dragElement(document.getElementById("mydiv"));

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (document.getElementById(elmnt.id)) {
    /* if present, the header is where you move the DIV from:*/
    document.getElementById(elmnt.id).onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
  }

  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();
    // 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:*/
    document.onmouseup = null;
    document.onmousemove = null;
  }
}
</script>

</body>
</html>

I tried many things:
For one , When I tried changing '#item & id="mydiv" ' to
'.item & class="mydiv" .
I don't understand why that doesn't work .
class= vs id= ?

Also , I tried adding a second <div class="mydiv"> .
But it never displayed .

When I do get multiple <div>s working ,
How can I detect which one was clicked .
There will be many <div> <>s .

Thanks for your help !

vmars316 · August 1, 2019

Plz , let me ask a more basic question:

For a function like this: (btw: this editor has no 'code icon ' option, so I'll use quotes .)

Quote

            function dragStart(ev) {

                ev.dataTransfer.setData("text", ev.target.id);

            }

That uses .id , #mydiv , I want to use .mydiv instead .

And I will have multiple <div class="mydiv"> elements .

So how can I translate ' ev.target.id) ' into ev.target.class) ?

How can I identify which .mydiv was actually clicked .

Is there a different syntax or format or properties that I can use ?

Or is there away to set up an ' id array ' so that when a click on a <div>

I know which was clicked ?

Thanks

Funce · August 1, 2019

14 hours ago, vmars316 said:

Referring to the article:
'Draggable DIV Element' here:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_draggable

I would like to have multiple movable <div>s .
But having problems .
Here is the code so far:

[Omitted for Brevity]

I tried many things:
For one , When I tried changing '#item & id="mydiv" ' to
'.item & class="mydiv" .
I don't understand why that doesn't work .
class= vs id= ?

Thanks for your help !

Hey there vmars, your issue here is that getElementByID only ever gets one element. getElementsByClassName gets a collection of elements, so some things needs to be adjusted.

You'll need to apply the DragElement function to all of the Elements in the collection. (For loop might work well)
Your headers will no longer work as they use the passed element's id. You'll need to apply a "header" custom class, one that will exist on all the headers. You can then access this header element for dragging purposes by using the below code.

function dragElement(elmnt) {
  var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
  if (elmnt.getElementsByClassName("header")[0]) {
    /* if present, the header is where you move the DIV from:*/
    elmnt.getElementsByClassName("header")[0].onmousedown = dragMouseDown;
  } else {
    /* otherwise, move the DIV from anywhere inside the DIV:*/
    elmnt.onmousedown = dragMouseDown;
}

Try this and then go from there.

2 hours ago, vmars316 said:

For a function like this: (btw: this editor has no 'code icon ' option, so I'll use quotes .)

Code block button is here if you've missed it.

2 hours ago, vmars316 said:

That uses .id , #mydiv , I want to use .mydiv instead .

And I will have multiple <div class="mydiv"> elements .

So how can I translate ' ev.target.id) ' into ev.target.class) ?

How can I identify which .mydiv was actually clicked .

Is there a different syntax or format or properties that I can use ?

Or is there away to set up an ' id array ' so that when a click on a <div>

I know which was clicked ?

Thanks

ev.target evaluates into the element that has been activated using the event (onmousedown, onmousemove etc). That will always evaluate to the .mydiv that was clicked.

So rather than document.getElementById, you use ev.target inside this function.

dsonesuk · August 2, 2019

Quote

For a function like this: (btw: this editor has no 'code icon ' option, so I'll use quotes .)

They don't show on smaller devices, you are then stuck with using [ code ]....[ /code ] (without spaces);

vmars316 · August 4, 2019

On 8/2/2019 at 9:40 AM, dsonesuk said:

They don't show on smaller devices, you are then stuck with using [ code ]....[ /code ] (without spaces);

Thanks

this prompted me to start an .html page for this sort of thing , called:

QA-for-html5-css-js.html

Hopefully I'll remember there is such a page

vmars316 · August 4, 2019

Great support :

Quote

Hey there vmars, your issue here is that getElementByID only ever gets one element. getElementsByClassName gets a collection of elements, so some things needs to be adjusted.

You'll need to apply the DragElement function to all of the Elements in the collection. (For loop might work well)
Your headers will no longer work as they use the passed element's id. You'll need to apply a "header" custom class, one that will exist on all the headers. You can then access this header element for dragging purposes by using the below code.

ev.target evaluates into the element that has been activated using the event (onmousedown, onmousemove etc). That will always evaluate to the .mydiv that was clicked.

So rather than document.getElementById, you use ev.target inside this function.

Thanks

vmars316 · August 4, 2019

dsonesuk

Here's what I mean , see image :

Sign In

Multiple Dragable DIV Elements ?

Recommended Posts

vmars316

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

Funce

Link to comment

Share on other sites

dsonesuk

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

vmars316

Link to comment

Share on other sites

Create an account or sign in to comment

Create an account

Sign in

Browse

Activity