如何使用 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