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

如何在 Dragover 或 Dragenter 过程中更改 DnD（拖放）图标？有可能吗？

如果拖放源位于 html 页面内部（例如将一个 div 拖到另一个 div 中），我可以在拖拽启动期间更改图标。这是我的代码，我正在使用角度，我已经设置了plunker http://plnkr.co/edit/nRxBiqzPq58dR1jto2ZR?p=preview.

app.directive('drag', function() {
  return {
    link: function(scope, element, attr) {
      element.attr('draggable', true);
      element.css('cursor', 'move');

      element.bind('dragstart', function(event) {
        console.log('dragstart');
        console.log(event.dataTransfer);
        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('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;
});

根据规范，您不能使用设置拖动图像在除拖动开始之外的事件上。看这里：https://html.spec.whatwg.org/multipage/dnd.html#dom-datatransfer-setdragimage https://html.spec.whatwg.org/multipage/dnd.html#dom-datatransfer-setdragimage

setDragImage(element, x, y) 方法必须运行以下步骤：

1. 如果 DataTransfer 对象不再与拖动数据关联 储存，退货。什么都没发生。

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

3. 如果元素是img元素，则将拖动数据存储位图设置为 元素的图像（以其固有尺寸）；否则，设置拖动 数据存储位图到从给定元素生成的图像（ 目前尚未指定执行此操作的确切机制）。

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

在这里，您可以看到拖动数据存储仅在拖动启动时处于读/写模式：https://html.spec.whatwg.org/multipage/dnd.html#concept-dnd-rw https://html.spec.whatwg.org/multipage/dnd.html#concept-dnd-rw

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

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