Easy drag and drop JavaScript without the help of a library

Question

I'm just looking for a way to use drag and drop without jquery or any other library. If the dragged object is deleted on another element, the later element should start the event (in FF, it would be better to be browser independent).

I know that drag and drop for JavaScript was sometimes discussed earlier, but previous posts didn't help me.

Although I found a few examples, it is not clear to me whether the drop or dragdrop events exist, but these things do not work:

<p ondrop='alert("It worked");'>Text</p> <p ondragdrop='alert("It worked");'>Text</p> 

How can I do that?

Thank you very much in advance.

Answer 1

I agree with the other answers. The library will save you a lot of time and headache. This comes from someone who recently created a drag-and-drop control from scratch.

If you insist, although this is what you need to do:

• Bind the onmousedown event to the div you want to drag (div.onmousedown).
• Change the style of the div position to absolute (div.style.position = 'absolute')
• Start capturing mouse movement (document.onmousemove).
• While moving the mouse, update the div position (div.style.top | left = '[location] px')
• In the onmouseup div event (or document), untie all handlers and do any other cleanup (zero position changes, etc.).

Some problems the library is likely to solve:

• When dragging, you select the text on the page (looks ugly).
• Event binding is different between browsers.
• You need to calculate the size of the draggable item if you want to show placeholders and not make it “pop” when you start dragging the control (since changing to absolute positioning will remove the item from the stream).
• You will probably need your moving element to move, so you will need to keep the mouse offset when you select the element or automatically center the mouse element.
• If you want to drag an item into a list, you will need to write a ton of more custom code for this list to accept the item being dragged.
• You will need to consider drag and drop when the window scrolls and maybe drags inside other elements that are located strangely.

Answer 2

Hm. It’s probably not so easy that you want to do it yourself, but I would look at the Peter Michaux FORK Javascript drag and drop library - unlike JQuery or all of these large libraries, the FORK modules are separate from each other and simple enough that you probably , you can look at the source code of Peter and find out which bits you need. (editing: I would just use FORK.Drag as it is really small: 7.6KB total minimum)

Answer 3

I'm just looking for a way to use drag and drop without jquery or any other library.

Sorry, but there is no such thing as simply dragging and dropping without any library. You can write it all yourself, but it will be a lot of JS to make it work in all browsers.

Answer 4

Although I agree that the library is the way to go, the answer you want is onmousedown, onmousemove, onmouseup. You must handle these three events.

In onmousedown you will find the target (event.target or similar in different browsers) and set draggedObject = event.target. You will also start to handle the onmousemove event.

Whenever the onmousemove event fires, you move the dragged item based on the difference in position, since the last time the onmousemove event fires.

In the onmouseup event, you clear the draggedObject variable and stop processing onmousemove.

This is not a very cross-browser, but it is the core of what you need to do to drag and drop.