How to index multiple <div> #item s ?

1

Thanks for your wonderful code:
‘Create a Draggable Element in JavaScript’

But I am stuck on :
‘how to add multiple #item s to the page?’ .
Some sort of indexing I guess .
Can someone show me how to do this ?

Thank you very much !

No ‘insert code icon’ , so I’ll just put code here:

> <!DOCTYPE html>
> <html>
> 
> <head>
>   <meta name="viewport" 
>         content="width=device-width, 
>         initial-scale=1.0, 
>         user-scalable=no" />
>   <title>Drag/Drop/Bounce</title>
>   <style>
>     #container {
>       width: 100%;
>       height: 400px;
>       background-color: #f0f0f0;
>       display: flex;
>       align-items: center;
>       justify-content: center;
>       overflow: hidden;
>       border-radius: 7px;
>       touch-action: none;
>     }
>     .item {
>       width: 100px;
>       height: 100px;
>       background-color: rgb(245, 230, 99);
>       border: 10px solid rgba(136, 136, 136, .5);
>       border-radius: 50%;
>       touch-action: none;
>       user-select: none;
>     }
>     .item:active {
>       background-color: rgba(168, 218, 220, 1.00);
>     }
>     .item:hover {
>       cursor: pointer;
>       border-width: 20px;
>     }
>   </style>
> </head>
> 
> <body>
> 
>   <div id="outerContainer">
>     <div id="container">
>     
>       <div class="item">
> 
>       </div>
>       
> <div>&nbsp;&nbsp;Another div--&gt;&nbsp;</div>
> 
>       <div class="item">
> 
>       </div>
> 
> </div>
>   </div>
> 
>   <script>
>     var dragItem = document.querySelector(".item");
>     var container = document.querySelector("#container");
> 
>     var active = false;
>     var currentX;
>     var currentY;
>     var initialX;
>     var initialY;
>     var xOffset = 0;
>     var yOffset = 0;
> 
>     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.type === "touchstart") {
>         initialX = e.touches[0].clientX - xOffset;
>         initialY = e.touches[0].clientY - yOffset;
>       } else {
>         initialX = e.clientX - xOffset;
>         initialY = e.clientY - yOffset;
>       }
> 
>       if (e.target === dragItem) {
>         active = true;
>       }
>     }
> 
>     function dragEnd(e) {
>       initialX = currentX;
>       initialY = currentY;
> 
>       active = false;
>     }
> 
>     function drag(e) {
>       if (active) {
>       
>         e.preventDefault();
>       
>         if (e.type === "touchmove") {
>           currentX = e.touches[0].clientX - initialX;
>           currentY = e.touches[0].clientY - initialY;
>         } else {
>           currentX = e.clientX - initialX;
>           currentY = e.clientY - initialY;
>         }
> 
>         xOffset = currentX;
>         yOffset = currentY;
> 
>         setTranslate(currentX, currentY, dragItem);
>       }
>     }
> 
>     function setTranslate(xPos, yPos, el) {
>       el.style.transform = "translate3d(" + xPos + "px, " + yPos + "px, 0)";
>     }
>   </script>
> </body>
> 
> </html>
2

Can you restate what you are trying to do? I’m having difficulty following :slight_smile:

Is your question on how to add a div to the page? Or is it around how to ensure the code for dragging recognizes the new div?

3

Thanks for your response:
" Is your question on how to add a div to the page? "
Yes, (for now) I have added a div to the page (code above).
(in the future) I hope to be able to add divs dynamically .

" Or is it around how to ensure the code for dragging recognizes the new div ? "
Yes, I need to know which div was clicked , so I can move it around .

Thanks for your help !

4

Ah! The way to create an element is by using createElement() and parenting it to the element you want it to live under (typically with appendChild). This article walks you through the ins and outs of all this: https://www.kirupa.com/html5/creating_dom_elements_and_other_stuff.htm

Once you have done that, the dragging script will automatically detect which element you are currently dragging. Just make sure that the div you are adding has the class value of item on it:

<div class="item">

</div>

:slight_smile:

5

Yes , I do document.createElement here:
http://vmars.us/ShowMe/myStory.html
Thanks to your book .
But what I am concerned with most immediately is
Why doesn’t the code above work ?
I added this item:

<div>&nbsp;&nbsp;Another div--&gt;&nbsp;</div>
<div class="item">
</div>

The :active and :hover work
But I cant move the added item .
Plz, how can I move the 2nd div ?
Thanks

6

Oh! So sorry. I got some of these threads mixed up. The code in the current version in the tutorial is designed for only one item. I did create an example of making this work with multiple elements, and you can see the example (and linked discussion) here: Drag Multiple Elements

That should give you a good idea of what you need to do extra to have it work for your scenario.

Thanks,
Kirupa

7

Ahh…
Thank you very much !
I think I am good to go .
vm