Drag and drop Javascript HTML5

Question

I am trying to make a drag and drop feature using javascript and HTML5, no jQuery. And I just cannot see what is wrong. Been looking at this for a long time and can't see where i failed. Can someone 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

with this you should be able to drag and drop a picture from 1 div to another. — Kristian Daugaard
– Kristian Daugaard, Commented Feb 15, 2013 at 19:40

Austin Mullins · Accepted Answer · 2013-02-15 20:07:14Z

3

It's always the little things that catch us in the end. Inside your definition for the "dragover" event listener, you need to provide an argument list () to e.PreventDefault:

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

That way, the browser will stop the default event response (which is to dis-allow dropping) and let your drop operation complete. Here's my silly jsFiddle demo illustrating success. The blue square is the #dragapple.

edited Feb 15, 2013 at 20:07

answered Feb 15, 2013 at 20:00

Austin Mullins

7,4653 gold badges35 silver badges48 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ThinkingStiff Over a year ago

Finally! I'm been wracking my brain on this. Thanks for ending my misery. I knew the drop event wasn't firing but was at a loss as to why.

ThinkingStiff Over a year ago

@KristianDaugaard It's the () parens at the end of preventDefault().

Austin Mullins Over a year ago

Not in the code you included. It just says e.preventDefault with no ().

Kristian Daugaard Over a year ago

oh THANK YOU!! all i needed was (); in my prevent default function! Finally!

Austin Mullins Over a year ago

LOL, it's technically not a syntax error. e.preventDefault returns the function itself, but then does nothing. It's a logic error.

RJ Cuthbertson · Accepted Answer · 2013-02-15 19:32:36Z

3

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

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

answered Feb 15, 2013 at 19:32

RJ Cuthbertson

1,5381 gold badge20 silver badges38 bronze badges

5 Comments

Kristian Daugaard Over a year ago

Sorry that was a typo in the question. That is "getData" in the actual code and it doesn't work still :)

Kristian Daugaard Over a year ago

The image is draggable, it does not have the attribute, but that should not be needed.

Toping Over a year ago

img doesnt require draggable="true", its default

RJ Cuthbertson Over a year ago

Well, what about appending the element to the target instead of setting it as the innerHtml? var data = e.dataTransfer.getData('Text'); e.target.appendChild(data); Like w3schools.com/html/html5_draganddrop.asp

Kristian Daugaard Over a year ago

i guess i could do that, it is just very frustrating. I have been following a video tutorial for this script, and it does simply not work for me, and i have checked and matched the code 4 times.

B T · Accepted Answer · 2016-07-17 00:42:46Z

0

The html5 drag and drop api has a lot of bizarre edge cases. I just wrote a very general low-level api that makes drag-and-drop easy. Here's how you'd 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);

Check it out here: https://github.com/fresheneesz/drip-drop

answered Jul 17, 2016 at 0:42

B T

61.6k36 gold badges200 silver badges212 bronze badges

Comments

Toping · Accepted Answer · 2013-02-15 19:42:05Z

-1

You need to make ondragover and ondrop events to the element that receives the dragged, and the dragged element need to be draggable="true".

ex:

<div ondragover="allowDrop(event);" ondrop="drop(event);">

function allowDrop(x) { x.preventDefault(); }

function drop(x) {  x.preventDefault(); var data=x.dataTransfer.getData("text"); ... }

answered Feb 15, 2013 at 19:42

Toping

7555 silver badges16 bronze badges

4 Comments

Kristian Daugaard Over a year ago

a dragover is not needed for the drop effect. Javascripts drop effect and dragover effect are two different functions. dragover is mostly only for styling in my case and i haven't styled it yet. And about the draggable true, that is not the problem, since it is default.

Toping Over a year ago

@KristianDaugaard have you even tried? in my app the preventDefault is required to release the object.

Kristian Daugaard Over a year ago

I just tried removing my preventDefault()'s and to no help. I think i might have to go with the inline drop attrubute, although i was trying to avoid it.

Toping Over a year ago

@KristianDaugaard have you tried to change it from img to a simple text to see if it works?

Collectives™ on Stack Overflow

Drag and drop Javascript HTML5

4 Answers 4

5 Comments

5 Comments

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

5 Comments

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related