DropEffect semantic for HTML5 drag and drop

Question

According to the HTML5 specs the dropEffect property on a drop target allows the drop target to select the desired drop effect. The drag and drop framework should combine this with the effectAllowed property set by the drag source to display the matching visual feedback (typically a specific cursor depending on the operation).

I was however not able to use this feature consistently across browsers. It seems to work for Chrome and Opera as expected but doe not for IE and FF (although the developer documentation for each browsers explicitly documents it).

I have put together a sample on JSFiddle: http://jsfiddle.net/cleue/zT87T/

function onDragStart(element, event) {
    var dataTransfer = event.dataTransfer,
        effect = element.innerText || element.textContent;
    dataTransfer.effectAllowed = effect;
    dataTransfer.setData("Text", effect);
    dataTransfer.setDragImage(element, 0, 0);
}

function onDragEnter(element, event) {
    var dataTransfer = event.dataTransfer,
        effect = element.innerText || element.textContent;
    dataTransfer.dropEffect = effect;
    event.preventDefault();
}

function onDragOver(element, event) {
    var dataTransfer = event.dataTransfer,
        effect = element.innerText || element.textContent;
    dataTransfer.dropEffect = effect;
    event.preventDefault();
}

Is this sample incorrect or my understanding of the purpose of this feature or are these browser bugs?

score 0 · Answer 1 · edited May 23 '17 at 12:27

i had exactly the same problem and came to the same conclusion as yourself, it just doesn't work. In addition to changing the mouse cursor there is the job of working out at the source element what took place - from the spec you can listen to dragend and e.g. remove the element if the drop effect was move and leave it if it were copy. That doesn't work consistently either. I asked the question here, i put a longish explanation with all my findings.

btw - i see it says that drag and drop is at risk from being removed due to a lack of implementation which is a pity.

DropEffect semantic for HTML5 drag and drop

1 Answers1