Jump to content

Multiple Dragable DIV Elements ?


vmars316

Recommended Posts

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 !
 

Link to comment
Share on other sites

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 

 

Link to comment
Share on other sites

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 .)

XcQfW3F.png

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.

  • Like 1
Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...