How to cancel an HTML5 drag (and drop) operation using Javascript?

drag-and-drop, html, javascript

Solution

You can cancel it by calling `event.preventDefault()` in the event handler. For example this should work:

<p id="p1" draggable="true" ondragstart="dragstart_handler(event);">This element is draggable.</p>

<script>
var enableDragDrop = true;
function dragstart_handler(ev) {
    if (!enableDragDrop) {
        ev.preventDefault();
    }
    console.log("dragStart");
}
</script>

Problem

I want to cancel an HTML5 drag operation based on some condition. I have tried to search this but found nothing useful. It seems that there is no way to cancel an HTML5 drag and drop using JavaScript. `return`ing `false` in the `dragstart` doesn't seem to do anything. Any ideas?

Original source