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

Posted

技术标签:

【中文标题】如何在 dragover/dragenter HTML 5 拖放期间更改图标【英文标题】:How to change icon during dragover/dragenter HTML 5 Drag and Drop 【发布时间】:2018-06-21 02:47:50 【问题描述】:

如何在 dragover 或 dragenter 期间更改 DnD 的(拖放)图标?有可能吗?

如果拖放源位于 html 页面内(例如将 div 拖到另一个 div 中),我可以在 dragstart 期间更改图标。这是我的代码,我正在使用 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);
      );
    
  ;
);

但是如果源是文件或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;
);

【问题讨论】:

【参考方案1】:

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

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

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

    如果拖拽数据存储的模式不是读/写模式,返回。 什么都没有发生。

    如果元素是img元素,则设置拖拽数据存储位图为 元素的图像(以其固有大小);否则,设置拖动 数据存储位图到从给定元素生成的图像( 目前没有具体说明这样做的机制)。

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

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

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

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

【讨论】:

@PeterMoore 我认为没有,这是每个设计。 总有一种解决方法。 :) 我想在这种情况下,唯一的解决方法是从头开始实施 D&D。 那太糟糕了:/ 另一种选择是setDragImage(new Image(), 9999, 0),然后实现一个用鼠标跟踪的自定义覆盖。我为JS File Explorer 做了类似的事情。它并没有完全从头开始实施 D&D,因为它仍然具有跨窗口/选项卡 D&D 和拖动启动/输入/过度/等的好处。而 mousedown/mousemove 风格的解决方案只能在当前窗口/选项卡中工作。 感谢您的信息。很高兴知道这一点

以上是关于如何在 dragover/dragenter HTML 5 拖放期间更改图标的主要内容,如果未能解决你的问题,请参考以下文章

如何在 C++ 程序中通过拓扑考虑在多核 HT 上实现亲和性?

Matlab中如何修改x轴为汉字或字母?Matlab中如何将x轴设定为字母或者其他?

请问如何开启HT???我开启后进不了系统!

HT for Web 中Painter的介绍及用法

HT for Web 中Painter的介绍及用法

如何遍历并删除Dictionary集合内容