Simple JavaScript drag and drop witout the help of a library

Question

Hi,

I am simply looking for a way of using drag and drop without jquery or any other library. If a dragged object is dropped on another element the later element should start an event (in FF - better would be browser independent).

I know that drag and drop for JavaScript was discussed sometimes before but the previous postings didn't help me.

Although I found some examples it is not clear to me if there is a "drop" or "dragdrop" events exist but these things don't work:

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

How could this be done?

Many thanks in advance.

Answer 1

Hmm. It's probably not that simple that you'd want to do it yourself, but I would look at Peter Michaux's FORK Javascript drag and drop library -- unlike JQuery or all those big libraries, FORK's modules are decoupled from each other, and are simple enough that you could probably look at Peter's source code and figure out the bits you need. (edit: I'd just use FORK.Drag as it's really small: 7.6KB total minified)

Answer 2

I am simply looking for a way of using drag and drop without jquery or any other library.

I'm sorry, but there are no such thing as simply drag and drop without any library. You can write it all yourself, but that will be a lot of JS to make it work in all browsers.

Answer 3

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

If you insist though this is what you'll need to do:

1. Bind a onmousedown event to the div you want to drag (div.onmousedown).
2. Change the div's position style to absolute (div.style.position = 'absolute')
3. Begin capturing mouse movement (document.onmousemove).
4. On mouse move update the div's position (div.style.top|left = '[location]px')
5. On the div's onmouseup event (or the document's) unbind all the handlers and do any other cleanup (null out position changes, etc).

Some problems a library will probably solve:

1. While dragging you will select text on the page (looks ugly).
2. Binding to events is different between browsers.
3. You have to calculate the size of the element being dragged if you want to show placeholders and to make it not "pop" when you begin dragging the control (since changing to absolute positioning will remove the element from flow).
4. You will probably want your dragged element to move fluidly so you will have to store some mouse offset when selecting the element or automatically center the element to the mouse.
5. If you want to drag an item in a list you'll have to write a ton more custom code for that list to accept the dragged item.
6. You'll have to take into consideration dragging when the window is scrolled and possibly dragging inside other elements that are positioned strangely.

Answer 4

While I agree that library is the way to go, the answer you want is onmousedown, onmousemove, onmouseup. You have to handle those three events.

In onmousedown you'd find the target (event.target or similar in different browsers) and set draggedObject = event.target. You'd also start handling the onmousemove event.

Whenever the onmousemove event fired, you'd move the dragged element based on the difference in position since last time the onmousemove event fired.

In the onmouseup event, you'd clear your draggedObject variable and stop handling onmousemove.

It's not very crossbrowser, but it's the core of what you'd need to do for dragging and dropping.