Jump to content
vmars316

Multiple Dragable DIV Elements ?

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 !
 

Share this post


Link to post
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 

 

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
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);

  • Like 1

Share this post


Link to post
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 :)

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...