Question

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

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.