这两个属性之间的关系似乎是一些混乱的根源 . 基于阅读the MDN site和MSDN，我以为我已经弄明白了，但现在我不确定......
我想当拖动一个元素时，你可以指定允许它发生的事情（即它可以移动，复制，链接到 - effectAllowed常量之一） . 这是effectAllowed属性 .
不同的drop目标会做不同的事情，所以当你使用另一个元素时，它可以控制drop上发生的“效果”，这就是“dropEffect”属性 . 所以我设置了一个简单的例子来测试这个理论 .
$("[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();
});
我有一个用户可以拖动的框 - 允许的效果是“copyMove” . 我有一个框设置dropEffect复制，一旦设置dropEffect移动 . 我期望的是，当用户拖过“复制框”时，光标将改变以指示将发生复制，因为当我拖动“移动框”时，光标变化以指示移动...
只有Chrome的行为符合我的预期 . 这是因为其他浏览器是错误的还是因为我不了解规范 . 好吗？
UPDATE 来自摆弄这个的更多信息 .
在Firefox和Chrome中，如果你有一个dragsource，表明effectAllowed是“copy”，而dropzone就是dropEffect是“move”，那么即使你取消了这个事件，你也不能放弃掉落区域 . 我认为dropEffect对于阅读ondrop以查看要做什么很有用，但是在Chrome上不可用，dropEffect不会出现在drop处理程序上，例如尝试读取dataTransfer.dropEffect会说dropEffect是“none”，即使你在dragover上设置它也是如此 . 如上所述设置dropEffect确实会影响光标的显示方式 .
在Firefox上，dropEffect在dragover上设置后会在dropzone上通过，但它不会影响鼠标光标的显示 . 在Firefox窗口上按ctrl键确实会影响鼠标的显示，但不会影响dropEffect属性 .
规范显示源可以监听dragend事件以查看发生的情况 . 它应该查看此事件中的dropEffect . Chrome，Mozilla和Safari正如您所希望的那样工作，dragend效果出现在dragend事件中 . 在IE中，如果允许的效果是一个简单的值，例如“复制”然后任何成功的下降都会导致此值显示为drand上的dropEffect . 如果effectAllowed是一个像copyMove这样的复合值，并且你试图通过设置dropEffect选择“移动”dragover，那么你运气不好，那将在dragend上的源码中作为dropEffect =“none”来实现 . 如果该效果是一个简单的值，那么你会遇到一个游标和一个dropEffect，这就是在dragstart上设置的effectAllowed . 有趣的是，当你从IE11至少拖入一个本机应用程序（我之前假设）时，它似乎确实会出现dropEffect .
其他说明
在Mac上的Safari上 - 无法以编程方式设置effectAllowed，因此任何设置的dropEffect都是有效的 . 当您按下cmd键时，effectAllowed变为“move”，当您按下alt键时，effectAllowed变为“copy” . 此后它可以正常工作，如果dropEffect不是这些effectAlloweds中的一个，则浏览器不允许删除 .
More Info 我've been spending some spare time working on an HTML5 drag and drop library i wrote a bunch more about this and other issues in the docs for it, if you'有兴趣请看看the project
2 回答
我知道这不是最好的答案，但你可以使用像JQUERY UI这样的UI框架，它已经内置了拖放功能和一系列功能 . 可能比重建功能更好 .
我检查了你的小提琴，我在chrome和IE 10中有相同的响应，即光标在拖动时显示复制符号，但它不复制/移动矩形 . 你可以从http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop获得帮助