用于 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 语义的主要内容,如果未能解决你的问题,请参考以下文章