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. returning false in the dragstart doesn't seem to do anything. Any ideas?

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. returning false in the dragstart doesn't seem to do anything. Any ideas?

• javascript
• html
• drag-and-drop

3 Answers 3

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>

I think you need to do something tricky to make it work, for I do not know how to stop a drag from js, but you can fake a drag with mousedown,mousedown,mouseup and a isDragging flag

some code look like:

var isDragging = false
var fakeDraggingElement
var currentDragging

$('#item').mousedown(function(e){
  e.preventDefault()
  isDragging = true
  currentDragging = this
  
  //change your cursor and make it loos like dragging
  $('#parent').css({cursor: 'move'})
  //fake dragging element
  fakeDraggingElement = $(this).clone().css({
    opacity:0.5,
    position:'absolute',
    top:e.pageY+offsetY, //parent offset
    left:e.pageX+offsetX,//parent offset
  }).appendTo(parent)
}).mousemove(function(e){
  if(!isDragging){
    return
  }
  fakeDraggingElement.css({
    top:e.pageY+offsetY, //parent offset
    left:e.pageX+offsetX,//parent offset
  })
}).mousedown(function(e){
  if(!isDragging){
    return
  }
  cancleDrag()
  //your old drop
  ondrop(currentDragging,e.target)
})

function cancleDrag(){
  isDragging = false
  $(currentDragging).remove()
  currentDragging = undefined
}

EDIT: got it. Its a bit roundabout, but works. Take advantage of the fact that the drag event is a cancellable mouse event, and cancelling it stops all further drag actions. Create a drag event on your condition and call preventDefault(). The following cancels it after 3 seconds:

setTimeout(function(){document.getElementById("drag").ondrag = function(e){
    e.preventDefault();
    this.ondrag = null;
    return false;
};},3000);

Note first that I clear all ondrag events after it is cancelled, which you may need to adjust if you need other ondrag events, and second that this truly cancels all parts of the drag, so you don't get an ondragend event after, as shown in this jsfiddle: http://jsfiddle/MaxPRafferty/aCkbR/

Source: HTML5 Spec: http://www.w3/html/wg/drafts/html/master/editing.html#dndevents