Move divs with mouseclick between div container

Question

I would like to drag and drop divs within a container-div. Only up and down the list, using the mouse. How can I create this?

Searching the internet and stackoverflow didn't give me a good answer, since I would like to have it in vanilla Javascript and everything is nowadays in jQuery. :S

This is wat I have:

<div class="chapcontainer" data-chaporder="1000">
   <div class="chapter">Big fire</div>
     <div class="subchapter" data-chapid="1">Forest burning</div>
     <div class="subchapter" data-chapid="2">Balu hoses</div>
     <div class="subchapter" data-chapid="3">Forest animals die</div>
     <div class="subchapter" data-chapid="4">Lovely fire</div>
   </div>
</div>

The chapter-div is the container. Within this div I want to be able to move the subchapter-div with a click of the mousebutton up and down the list of subchapter-divs.

For example I move the subchapter-div with data-chapid 4 to the top, then it should be moved to the top and the data-chapid changed to 1. Is something like this possible in vanilla javascript?

I've read about AppendChild, but I don't know how I can trigger this with the mouse.

is this what you want? https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API — Estradiaz, May 17 '19 at 21:01
Possible duplicate of [How to move an element into another element?](https://stackoverflow.com/questions/1279957/how-to-move-an-element-into-another-element) — Estradiaz, May 17 '19 at 21:03
Why not use jquery? JQuery UI already has a drag and drop thing that sounds like it does exactly what you're looking for. — frodo2975, May 17 '19 at 21:12
@Estradiaz That is interesting stuff to read :) Hopefully I'l be able to use it to drag and drop the div-elements. — Anderverhaal, May 18 '19 at 20:27
@frodo2975 Probably a stupid reason, but I want to learn vanilla Javascript before I go to JQuery or other stuff :) — Anderverhaal, May 18 '19 at 20:28
Depends what you're going for. If you just want to learn, then sure, go for it. I personally advocate jquery because it's cross browser compatible and you can do things in one line that take 4-5 lines in vanilla js. — frodo2975, May 20 '19 at 19:38

score 0 · Accepted Answer · answered May 17 '19 at 21:03

0

You could do it with jQuery:

$(".subchapter[data-chapid='1']").on("click", function() {
    $(this).css('margin-left', '20px') // add margin/padding/etc here
})

Fiddle

answered May 17 '19 at 21:03

Bodrov

840
1
15
29

Thx for the fiddle. For the moment I'm trying to get it to work with vanilla javascript. But I'll keep this in mind! – Anderverhaal May 18 '19 at 20:29

score 0 · Answer 2 · answered May 20 '19 at 20:03

Doing drag and drop yourself is complicated, but here are some of the basic steps. One advantage of rolling your own is you can do more advanced things than your standard jquery ui drag and drop can, like smooth scrolling the container, auto-opening nested tree items if the user hovers over them, or doing animations while moving items.

Steps:

Listen for mousedown events on your items in your container. When the user presses down on an item, store the mouse's offset relative to the top of container (this includes the scroll of the container). Also store the mouse's offset relative to the item being dragged.
Clone the element that's being dragged and absolute position it under the mouse, using the relative offset you stored in step 1.
Make the original element invisible.
Listen for mousemove events on your container. Reposition the dragged item appropriately.
As the mouse moves, you'll need to update the mouse's new offset from the top (including scroll) and figure out which item you're over. You can do this by getting the height of each item in your list. So if your mouse is 710 pixels from the top, and each item is 100 pixels high, you're over index 8. You can use this info to change the style of the item you're over to show that it's a drop target. One thing to watch out for is if you do any styling changes that change the heights of items, you'll need to recalculate your heights.
On mouseup, you already know which item you're over, so now you need to update your data array to move the dragged item, probably using array.splice. Delete the absolutely positioned dragged element, and rerender your list to reflect your changes. I'm assuming you're using some sort of templating library to render your stuff, or at least a render function that clears what's there and replaces it with the current state.

Move divs with mouseclick between div container

2 Answers2