Question

这两个属性之间的关系似乎是一些混乱的根源。在阅读the MDN site和MSDN的基础上我认为我已经弄明白了，但现在我不确定......

我认为当拖动一个元素时，你可以指定允许它发生的事情（即它可以被移动，复制，链接到 - effectAllowed常量之一）。这是effectAllowed属性。

不同的掉落目标做不同的事情，所以当你开辟另一个元素时，它可以控制哪个＆＃34;效果＆＃34;发生在下降，这是＆＃34; dropEffect＆＃34;属性。所以我设置了一个简单的例子来测试这个理论。

$("[draggable='true']").on("dragstart", function(e) {
    var dt =  e.originalEvent.dataTransfer;
    dt.effectAllowed = "copyMove";
    dt.setData("text/plain", "Foo");
});

$("#dropZoneCopy").on("dragover", function(e) {
    var dt =  e.originalEvent.dataTransfer;
    dt.dropEffect = "copy";
    e.preventDefault();
});

$("#dropZoneMove").on("dragover", function(e) {
    var dt =  e.originalEvent.dataTransfer;
    dt.dropEffect = "move";
    e.preventDefault();
});

我有一个用户可以拖动的框 - 允许的效果是＆＃34; copyMove＆＃34;。我有一个框设置dropEffect复制，一旦设置dropEffect移动。我期望的是当用户拖过＆＃34;复制框时＃34;当我拖过＆＃34;移动框＆＃34;光标将改变以指示将发生复制。光标变为表示移动...

只有Chrome的行为符合我的预期。这是因为其他浏览器是错误的，还是因为我不了解规范。好吗？

更新更多信息来自摆弄这个。

在Firefox和Chrome中，如果你有一个dragsource，表明effectAllowed是＆＃34; copy＆＃34;还有一个dropzone，它表示dropEffect是＆＃34; move＆＃34;那么即使您取消活动，也不能放弃掉落区域。我认为dropEffect对于阅读ondrop以查看要做什么很有用，但它在Chrome上不可用，dropEffect不会出现在drop handler上，例如：试图读取dataTransfer.dropEffect会说dropEffect是＆＃34; none＆＃34;即使你把它放在dragover上。如上所述设置dropEffect确实会影响光标的显示方式。

在Firefox上，dropEffect在dragover上设置后会在dropzone上通过，但不会影响鼠标光标的显示。在Firefox窗口上按ctrl键确实会影响鼠标的显示，但不会影响dropEffect属性。

规范显示源可以监听dragend事件以查看发生的情况。它应该查看此事件中的dropEffect。 Chrome，Mozilla和Safari正如您所希望的那样工作，dragend效果出现在dragend事件中。在IE中，如果允许的效果是一个简单的值，例如＆＃34;拷贝＆＃34;然后任何成功的下降都会导致此值显示为drand上的dropEffect。如果effectAllowed是一个像copyMove这样的复合值，你试图选择＆＃34; move＆＃34;在dragover上设置dropEffect，你运气不好，这将通过dropEffect =＆＃34; none＆＃34;来源于dragend。你被困在一个光标和一个dropEffect，如果该效果是一个简单的值，那就是在dragstart上设置的effectAllowed。有趣的是，当你从IE11至少拖入一个原生应用程序时，它似乎确实会出现dropEffect（我之前假设）。

其他说明

在Mac上的Safari上 - 无法以编程方式设置effectAllowed，因此任何设置的dropEffect都有效。当您按下cmd键时，effectAllowed变为＆＃34;移动＆＃34;当你按下alt键时，effectAllowed变为＆＃34;复制＆＃34;。此后它可以正常工作，如果dropEffect不是这些effectAlloweds中的一个，则浏览器不允许删除。

更多信息 我已经花了一些时间在HTML5拖放库上工作，我在文档中写了更多关于这个和其他问题的文章，如果你有兴趣请看看 the project

Answer 1

我检查了你的小提琴，我在chrome和IE 10中有相同的响应，即光标在拖动时显示复制符号，但它不复制/移动矩形。您可以从http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop

获取帮助

Answer 2

我知道这不是最好的答案，但你可以使用像JQUERY UI这样的UI框架，它已经内置了一系列功能的拖放功能。可能会重建该功能。

HTML5拖放效果允许和dropEffect

2 个答案: