如何使用 Javascript 取消 HTML5 拖放操作？答案

【问题标题】：How to cancel an HTML5 drag (and drop) operation using Javascript?如何使用 Javascript 取消 HTML5 拖放操作？
【发布时间】：2013-08-01 15:48:43
【问题描述】：

我想根据某些条件取消 HTML5 拖动操作。我试图搜索这个但没有发现任何有用的东西。似乎没有办法使用 JavaScript 取消 HTML5 拖放。 dragstart 中的returning false 似乎没有做任何事情。有什么想法吗？

【问题讨论】：

标签： javascript html drag-and-drop

【解决方案1】：

您可以通过在事件处理程序中调用event.preventDefault() 来取消它。例如这应该有效：

<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>

【讨论】：

【解决方案2】：

我认为你需要做一些棘手的事情才能让它工作，因为我不知道如何阻止来自 js 的拖动，但你可以使用 mousedown,mousedown,mouseup 和 @ 来伪造拖动987654324@标志

一些代码看起来像：

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
}

【讨论】：

【解决方案3】：

编辑：知道了。它有点迂回，但有效。利用拖动事件是可取消的鼠标事件这一事实，取消它会停止所有进一步的拖动操作。根据您的情况创建一个拖动事件并致电preventDefault()。以下将在 3 秒后取消它：

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

首先请注意，我在取消后清除了所有ondrag事件，如果您需要其他ondrag事件，您可能需要进行调整，其次这确实取消了所有部分的拖动，所以您不会之后得到一个ondragend 事件，如这个jsfiddle所示： http://jsfiddle.net/MaxPRafferty/aCkbR/

来源：HTML5 规范：http://www.w3.org/html/wg/drafts/html/master/editing.html#dndevents

【讨论】：

似乎不起作用。在 Chrome 中，我可以在 3 秒后拖动。在 FF 中，它根本不会拖动（首先）。