用于 HTML5 拖放的 DropEffect 语义

Posted 2023-05-08

【中文标题】用于 HTML5 拖放的 DropEffect 语义

【英文标题】：DropEffect semantic for HTML5 drag and drop

【发布时间】：2014-05-03 02:12:56

【问题描述】：

根据 html5 规范，放置目标上的 dropEffect 属性允许放置目标选择所需的放置效果。拖放框架应将此与拖动源设置的 effectAllowed 属性相结合，以显示匹配的视觉反馈（通常是特定的光标，具体取决于操作）。

但是，我无法跨浏览器一致地使用此功能。它似乎像预期的那样适用于 Chrome 和 Opera，但不适用于 IE 和 FF（尽管每个浏览器的开发人员文档都明确记录了它）。

我在 JSFiddle 上整理了一个示例：http://jsfiddle.net/cleue/zT87T/

function onDragStart(element, event) 
    var dataTransfer = event.dataTransfer,
        effect = element.innerText || element.textContent;
    dataTransfer.effectAllowed = effect;
    dataTransfer.setData("Text", effect);
    dataTransfer.setDragImage(element, 0, 0);


function onDragEnter(element, event) 
    var dataTransfer = event.dataTransfer,
        effect = element.innerText || element.textContent;
    dataTransfer.dropEffect = effect;
    event.preventDefault();


function onDragOver(element, event) 
    var dataTransfer = event.dataTransfer,
        effect = element.innerText || element.textContent;
    dataTransfer.dropEffect = effect;
    event.preventDefault();

此示例是否不正确或我对此功能的目的的理解或这些浏览器错误？

【参考方案1】：

我遇到了完全相同的问题并得出了与您相同的结论，它只是不起作用。除了更改鼠标光标之外，还有在源元素上计算发生了什么的工作 - 从spec 你可以收听 dragend 和例如如果放置效果是移动的，则删除该元素，如果它是复制的，则将其保留。这也不能始终如一地工作。我问了这个问题here，我对我的所有发现做了一个冗长的解释。

顺便说一句 - 我看到它说拖放有被删除的风险，因为缺乏实现，这很遗憾。