這兩個屬性之間的關係似乎是一些混淆的根源。基於讀取the MDN site和MSDN我以爲我已經想通了，但現在我不知道....HTML5拖放效果允許和拖放效果
我想，當一個元素被拖動，你可以指定什麼是允許發生它（即它可以被移動，複製，鏈接到effectAllowed常量之一）。這是effectAllowed屬性。
不同的放置目標可以做不同的事情，因此當你放棄另一個元素時，它可以控制放置哪個「效果」，這是「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中，如果您有指示效果的dragsourceAllowed爲「複製」並且dropzone爲dropEffect爲「移動」，則即使您取消該事件，也不能放置在放置區域中。我認爲dropEffect對於在線閱讀以查看要做什麼是有用的，但它在Chrome上不可用，dropEffect不會出現在放置處理程序中，例如，試圖讀取dataTransfer.dropEffect會說，即使您將其設置爲dragover，dropEffect也爲「無」。如上所述設置dropEffect的確會影響光標的顯示方式。
在Firefox上，dropEffect在設置爲dragover後會在dropzone上通過，但它確實影響了鼠標光標的顯示而不是。在Firefox窗口上，按Ctrl鍵不會影響鼠標的顯示，但不會影響dropEffect屬性。
規範顯示源可以偵聽dragend事件以查看發生了什麼。它應該看看這個事件中的dropEffect。 Chrome，Mozilla和Safari按照您希望的方式工作，在dragend事件中會出現拖放效果。在IE中，如果允許的效果是一個簡單的值，例如「複製」，則任何成功的刪除結果都會顯示爲dragend上的dropEffect。如果effectAllowed是一個像copyMove這樣的複合值，並且您試圖通過設置dropEffect來選擇dragover上的「move」，那麼您運氣不好，那將在dragend的源代碼上以dropEffect =「none」的形式出現。你被一個光標卡住了& one dropEffect，如果該效果是一個簡單的值，那就是在dragstart上設置的效果。有趣的是，當你至少從IE11拖入本地應用程序時（似乎在前面），dropEffect似乎確實會出現。
其他說明在Mac上
在Safari瀏覽器 - effectAllowed不能編程設置，因此時設置任何dropEffect來是有效的。當您按下cmd鍵時，effectAllowed變爲「移動」，當您按下alt鍵時，effectAllowed變爲「複製」。此後，按照您的預期工作，如果dropEffect不是這些效果中的任何一種，則允許瀏覽器不允許放置。
更多信息 我已經花了一些空閒時間工作的一個HTML5拖放庫我寫了一堆更多關於這個問題和其他問題的文檔吧，如果你有興趣請看看在 the project
您對該規範的理解很好，瀏覽器支持不足。請參閱此處的答案以獲得一些替代方法：http://stackoverflow.com/q/24000954/2126792 – pschueller