Question

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

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

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

但是如果源是例如文件或网址，则无法更改图标，这里是代码。我试图在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;
});

Answer 1

根据规范，您不能对拖动开始以外的事件使用 setDragImage 。见这里：https://html.spec.whatwg.org/multipage/dnd.html#dom-datatransfer-setdragimage

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



如果DataTransfer对象不再与拖动数据相关联   商店，退货。没有任何事情发生。



如果拖动数据存储模式不是读/写模式，则返回。   没有任何事情发生。



如果element是img元素，则将拖动数据存储位图设置为   元素的图像（以其固有的大小）;否则，设置拖动   数据存储位图到从给定元素生成的图像（   这样做的确切机制目前尚未确定。）



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

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

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

这些模式是出于安全原因，你可以在拖放的不同阶段做些事情。

如何在dragover / dragenter期间更改图标HTML 5拖放

1 个答案: