用于 HTML5 拖放的 DropEffect 语义

Posted

技术标签:

【中文标题】用于 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,我对我的所有发现做了一个冗长的解释。

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

【讨论】:

以上是关于用于 HTML5 拖放的 DropEffect 语义的主要内容,如果未能解决你的问题,请参考以下文章

在 HTML5 中拖放的 Javascript

在 HTML5 中拖放的 Javascript

HTML5拖放的dragover vs dragenter事件

拖放不起作用:未定义的“dropEffect”

HTML 5 拖放相对于 jQuery UI 拖放的优势

HTML5之拖拽和拖放