如何使用 Javascript 取消 HTML5 拖（放）操作？

Question

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

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 、 mouseup和isDragging标志来伪造拖动

一些代码看起来像：

 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