Javascript 如何在dragover/dragenter HTML 5拖放过程中更改图标

如何在dragover或dragenter期间更改DnD（拖放）图标？有可能吗

如果拖放源位于html页面内，我可以在dragstart期间更改图标（例如，在另一个div中拖动一个div）。这是我的代码，我正在使用angular，我已经设置了一个

但是，如果源文件是一个文件，例如一个url，那么更改图标是不起作用的，下面是代码。我试图在dragover或dragenter期间更改图标

element.bind('dragenter', function(event) {
  console.log('dragenter');
  event.dataTransfer.effectAllowed = 'move';

  var img = document.createElement("img");
  img.src = "https://image.flaticon.com/teams/slug/google.jpg";
  event.dataTransfer.setDragImage(img, 0, 0);
});

element.bind('dragover', function(event) {

  if (event.preventDefault) {
    event.preventDefault();
  }

  if (event.stopPropagation) {
    event.stopPropagation();
  }

  console.log('dragover');

  element.addClass('dragged');

  var img = document.createElement("img");
  img.src = "https://image.flaticon.com/teams/slug/google.jpg";
  event.dataTransfer.setDragImage(img, 0, 0);

  return false;
});

---

根据规范，您不能在拖动启动以外的事件上使用setDragImage。请看这里：

setDragImage（element，x，y）方法必须运行以下步骤：

如果DataTransfer对象不再与拖动数据关联 存储，返回。什么也没发生

如果拖动数据存储的模式不是读/写模式，则返回。 什么也没发生

如果元素是img元素，则将拖动数据存储位图设置为 元素的图像（在其固有大小）；否则，设置阻力 将位图数据存储到由给定元素生成的图像（ 目前未指定执行此操作的确切机制）

将拖动数据存储热点坐标设置为给定的x，y 协调

在这里，您可以看到dragstart上的拖动数据存储仅处于读/写模式：

dragstart事件的读/写模式。可以将新数据添加到 拖动数据存储

---

这些模式是出于安全原因而存在的，在拖放的不同阶段可以执行一些操作

@Petermore我想没有，这是每种设计。总有解决办法。：）我想在这种情况下，唯一的解决办法是从头开始实施D&D。这太糟糕了：/a另一种选择是

setDragImage（new Image（），9999，0）

，然后实现一个自定义覆盖，用鼠标跟踪。我这样做是为了你。它并不是完全从头开始实现D&D，因为它仍然具有使用dragstart/enter/over/等进行跨窗口/选项卡D&D的优点。而mousedown/mousemove样式的解决方案只能在当前窗口/选项卡中工作。感谢您提供的信息。很高兴知道这一点

element.bind('dragenter', function(event) {
  console.log('dragenter');
  event.dataTransfer.effectAllowed = 'move';

  var img = document.createElement("img");
  img.src = "https://image.flaticon.com/teams/slug/google.jpg";
  event.dataTransfer.setDragImage(img, 0, 0);
});

element.bind('dragover', function(event) {

  if (event.preventDefault) {
    event.preventDefault();
  }

  if (event.stopPropagation) {
    event.stopPropagation();
  }

  console.log('dragover');

  element.addClass('dragged');

  var img = document.createElement("img");
  img.src = "https://image.flaticon.com/teams/slug/google.jpg";
  event.dataTransfer.setDragImage(img, 0, 0);

  return false;
});