Question

根据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();
}

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

Answer 1

我有完全相同的问题并得出与你自己相同的结论，它只是不起作用。除了更改鼠标光标之外，还需要在源元素处理所发生的事情 - 从spec您可以听到dragend，例如如果放置效果移动则移除元素，如果是复制则将其保留。这也不能始终如一地发挥作用。我问了here这个问题，我对我的所有发现做了很长的解释。

顺便说一下 - 我看到它表示由于缺乏实施而导致拖放被移除的风险很可惜。

用于HTML5拖放的DropEffect语义

1 个答案: