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

这是一个艰难的过程，因为您要停止元素上的原生拖链事件。不知道为什么要这样做，但实现本机拖动的一种方法是取消它并处理鼠标事件

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");
});