javascript - 为什么 dragstart 中的 event.preventDefault() 会中断进一步拖动事件的执行？

Question

我正在尝试拖动图像，为了停止浏览器的默认图像拖动，我正在使用 event.preventDefault()。但出于某种原因，它会中断进一步的事件，如 dragenter、dragover、dragend 等的执行。为什么会这样以及如何在不中断正常拖动事件的情况下停止浏览器的默认功能。

<img src="/img/image1" id="img1"/>

jQuery

var obj=$('#ironman');  
obj.on('dragstart', function (e) {
      //e.preventDefault();
      console.log("dragstart");
  });

  obj.on('dragenter', function (e) {
      console.log("dragenter");
  });

  obj.on('dragover', function () {
      console.log("dragover");
  });
  obj.on('dragleave', function () {
      console.log("dragleave");
  });

  obj.on('dragend', function () {
      console.log("dragend");
  });

JSfiddle

Answer 1

这是一项艰巨的任务，因为您要停止元素上的原生拖链事件。不确定为什么要这样做，但是实现 native 拖动的一种方法是取消它并处理鼠标事件

var obj=$('#ironman');  
obj.on('mousedown', function (e) {
  console.log("mousedown");
  // bind to the mousemove event
  obj.on('mousemove', function (e) {
      console.log("mousemove");
  });
});

obj.on('mouseup', function (e) {
  console.log("mouseup");
  // unbind the mousemove event
  obj.unbind('mousemove');
});
obj.on('dragstart', function (e) {
  e.preventDefault();  // cancel the native drag event chain
  console.log("dragstart");
});