javascript - 如何使用 Javascript 取消 HTML5 拖放操作？

Question

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

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

Answer 2

我认为您需要做一些棘手的事情才能使其正常工作，因为我不知道如何阻止来自 js 的拖动，但是您可以使用, 和mousedown标志mousedown来伪造拖动mouseupisDragging

一些代码看起来像：

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
}

Answer 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