HTML 5 drag and drop How to figure out whether an

Question

HTML5 drag and drop, trying to work out whether to allow a drop on an element.

So according to this :

http://dev.w3.org/html5/spec-preview/dnd.html#dndevents

You cannot read the DataTransfer dataStore on dragover. Since dragover is the event you are supposed to cancel to indicate that you accept a drop - and given that during dragOver you cannot tell what is being dragged, how is this supposed to work ? I am missing something obvious here ?

It seems to be that you must cancel dragover/dragenter if there is any chance what is being dragged could be dropped on your element, but you can only find out what was getting dragged on the drop.

Answer 1

So - we figured out a way to do this.

You can read the dataTransfer.types property which returns a list of the types added via setData. So if you use a custom string as one of those types, you can check that to verify the existence of drag data that you added.

e.g.

event.dataTransfer.setData("SpecialNameOfDragSource", data);

Then in dragover you can see if this type exists :

function ondragover(ev) {
    if (ev.dataTransfer.types && ev.dataTransfer.types.indexOf("SpecialNameOfDragSource") > -1) {
         // cancel the event
    }
 }