Drag/Drop/Bounce

# How to index multiple \ #item s ? **URL:** \ **Category:** Uncategorized\ **Created:** [July 31, 2019, 9:58pm UTC](https://forum.kirupa.com/t/how-to-index-multiple-div-item-s/640113 "2019-07-31T21:58:02Z")\ **Posts on this page:** 7\ **Page:** 1

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\ **Post date:** [July 31, 2019, 9:58pm UTC](https://forum.kirupa.com/t/how-to-index-multiple-div-item-s/640113/1 "2019-07-31T21:58:02Z")

Thanks for your wonderful code: ‘Create a Draggable Element in JavaScript’ > **[Create a Draggable Element in JavaScript](https://www.kirupa.com/html5/drag.htm)** > > Learn how to easily drag an element around using either the mouse or touch. 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: ``` > > > > > content="width=device-width, > initial-scale=1.0, > user-scalable=no" /> > Drag/Drop/Bounce > > > > > >

> >

Another div-->

> >

> > > > > ``` ---

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [August 1, 2019, 9:24pm UTC](https://forum.kirupa.com/t/how-to-index-multiple-div-item-s/640113/2 "2019-08-01T21:24:25Z")

Can you restate what you are trying to do? I’m having difficulty following 🙂 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`? ---

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\ **Post date:** [August 1, 2019, 9:47pm UTC](https://forum.kirupa.com/t/how-to-index-multiple-div-item-s/640113/3 "2019-08-01T21:47:51Z")

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 `div`s 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 ! ---

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [August 1, 2019, 10:06pm UTC](https://forum.kirupa.com/t/how-to-index-multiple-div-item-s/640113/4 "2019-08-01T22:06:42Z")

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](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: ```

``` 🙂 ---

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\ **Post date:** [August 1, 2019, 11:02pm UTC](https://forum.kirupa.com/t/how-to-index-multiple-div-item-s/640113/5 "2019-08-01T23:02:03Z")

Yes , I do document.createElement here: [http://vmars.us/ShowMe/myStory.html](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: > ``` >

Another div-->

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

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\ **Post date:** [August 2, 2019, 2:25am UTC](https://forum.kirupa.com/t/how-to-index-multiple-div-item-s/640113/6 "2019-08-02T02:25:11Z")

> [@vmars316](#): > > > Another div--\> > > \> \> > > \> \> 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](https://www.kirupa.com/html5/examples/drag_multiple.htm) That should give you a good idea of what you need to do extra to have it work for your scenario. Thanks, Kirupa ---

**Author:** ![vmars316](https://avatars.discourse-cdn.com/v4/letter/v/bcef8e/32.png) [@vmars316](https://forum.kirupa.com/u/vmars316)\ **Post date:** [August 2, 2019, 4:56pm UTC](https://forum.kirupa.com/t/how-to-index-multiple-div-item-s/640113/7 "2019-08-02T16:56:05Z")

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