这两个属性之间的关系似乎引起了一些困惑。基于阅读the MDN site和MSDN，我以为我已经知道了，但是现在我不确定...
我发现拖动一个元素时，可以指定允许发生的事情(即可以将其移动，复制，链接到effectAllowed常量之一)。这是effectAllowed属性。
不同的放置目标执行不同的操作，因此，当您将另一个元素拖到另一个元素上时，它可以控制放置在放置上的是哪个“效果”，这就是“dropEffect”属性。因此，我建立了一个简单的例子来检验这一理论。
JSFiddle
$("[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();
});
dropEffect设置为要复制的框，然后一次将dropEffect设置为要移动。我期望的是，当用户将鼠标移到“复制框”上时，光标将更改以指示将要进行复制，而当我将鼠标移到“移动框”上时，光标将更改以指示移动。只有Chrome的行为符合我的预期。是因为其他浏览器错误，还是因为我不了解规范。适当地 ？
更新
摆弄一些更多的信息。
在Firefox和Chrome中，如果您有一个指示sourceAllowed为“copy”的dropsource和一个表示dropEffect为“move”的dropzone，则即使您取消了该事件，也无法放到放置区。我认为dropEffect有助于阅读ondrop来查看操作，但在Chrome上不可用，dropEffect不会出现在放置处理程序上，例如尝试读取dataTransfer.dropEffect时会说dropEffect为“none”，即使您将其设置为拖动。如上所述设置dropEffect确实会影响光标的显示方式。
在Firefox上，将dropEffect设置为鼠标悬停后，它确实会在dropzone上通过，但不会影响鼠标光标的显示。在Firefox窗口上，按ctrl键确实会影响鼠标的显示，但不会影响dropEffect属性。
规范显示，源可以侦听dragend事件以查看发生了什么。它应该查看此事件中的dropEffect。 Chrome，Mozilla和Safari可以按您希望的那样工作，拖放效果会出现在dragend事件中。在IE中，如果允许的效果是一个简单值，例如“复制”，那么任何成功的丢弃操作都会导致此值显示为dragend上的dropEffect。如果effectAllowed是诸如copyMove之类的复合值，并且您尝试通过设置dropEffect在拖动时选择“move”，那么您就不走运了，这将在dropend的源处通过dropEffect =“none”来实现。您只能停留在一个光标和一个dropEffect上，如果该效果是一个简单值，那就是在dragstart上设置的effectAllowed。有趣的是，当您至少从IE11拖放到 native 应用程序时，似乎确实会出现dropEffect(我假设是以前的版本)。
其他注意事项
在Mac上的Safari上-无法以编程方式设置effectAllowed，因此设置的任何dropEffect均有效。当您按cmd键时，effectAllowed变为“移动”，而当您按Alt键时，effectAllowed变为“复制”。此后，如果dropEffect不是这些effect中的一种，它将按您希望的那样工作。
更多信息
我一直在花一些时间在HTML5拖放库上，为此我在文档中写了很多有关此问题和其他问题的文章，如果您有兴趣，请看一下
the project
最佳答案
我检查了您的 fiddle ，在chrome和IE 10中也有相同的响应，即光标在拖动时显示了复制符号，但没有复制/移动矩形。您可以从http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop获得帮助