HTML5 Javascript Drag and Drop

Question

I am trying to make a drag and drop function using javascript and HTML5, without jQuery. And I just don’t see what is wrong. I looked at it for a long time and could not see where I failed. Can anyone find it?

function doFirst(){ mypic = document.getElementById('dragapple'); mypic.addEventListener("dragstart", startDrag, false); leftbox = document.getElementById('leftbox'); leftbox.addEventListener("dragenter", function(e){e.preventDefault}, false); leftbox.addEventListener("dragover", function(e){e.preventDefault}, false); leftbox.addEventListener("drop", dropped, false); } function startDrag(e){ var code = '<img id="dragapple" src="stealeripsum.png">'; e.dataTransfer.setData('Text', code); } function dropped(e){ e.preventDefault(); leftbox.innerHTML = e.dataTransfer.getData('Text'); } window.addEventListener("load", doFirst, false); 

thanks

Answer 1

These are always the little things that will catch us in the end. Inside the definition for the dragover event listener, you need to provide an argument list () for e.PreventDefault:

 leftbox.addEventListener("dragenter", function(e){e.preventDefault();}, false); leftbox.addEventListener("dragover", function(e){e.preventDefault();}, false); 

Thus, the browser will stop responding to the default event (which should disable the drop) and allow the reset operation to complete. Here's my silly jsFiddle demo illustrating success. The blue square is #dragapple .

Answer 2

.gegData('Text') or .getData('Text') ?

 function dropped(e){ e.preventDefault(); leftbox.innerHTML = e.dataTransfer.getData('Text'); } 

Answer 3

There are many fancy edge cases in the html5 drag-drop api. I just wrote a very general low-level api that simplifies drag-and-drop. Here's how you do it in your example:

 function doFirst(){ var mypic = document.getElementById('dragapple') dripDrop.drag(mypic, { image: true, start: function(setData) { setData('Text', '<img id="dragapple" src="stealeripsum.png">') } }) var leftbox = document.getElementById('leftbox') dripDrop.drag(leftbox, { drop: function(data) { leftbox.innerHTML = data.Text } }) } window.addEventListener("load", doFirst, false); 

Take a look here: https://github.com/fresheneesz/drip-drop

Answer 4

You need to do ondragover and ondrop events for the element that gets dragged, and the dragged element needs to be dragged = "true".

Example:

 <div ondragover="allowDrop(event);" ondrop="drop(event);"> function allowDrop(x) { x.preventDefault(); } function drop(x) { x.preventDefault(); var data=x.dataTransfer.getData("text"); ... }