HTML5拖放效果Allowed和dropEffect

Question

這兩個屬性之間的關系似乎是一些混亂的根源。 基於閱讀 了 MDN 網站和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();
});

我有一個用戶可以拖動的框 - 允許的效果是“copyMove”。 我有一個將dropEffect設置為復制的框，一旦將dropEffect設置為移動。 我期望的是，當用戶拖過“復制框”時，光標會改變以指示將發生復制，當我拖過“移動框”時，光標會改變以指示移動......

只有 Chrome 的行為符合我的預期。 這是因為其他瀏覽器錯誤還是因為我不了解規范。 適當地 ？

更新一些來自擺弄這個的更多信息。

在 Firefox 和 Chrome 中，如果您有一個表示 effectAllowed 為“復制”的拖動源和一個表示 dropEffect 為“移動”的放置區，那么即使您取消事件，您也無法放置在放置區上。 我認為 dropEffect 對閱讀 ondrop 以查看要做什么很有用，但它在 Chrome 上不可用，dropEffect 不會出現在 drop 處理程序上，例如嘗試讀取 dataTransfer.dropEffect 會說 dropEffect 是“無”，即使您將其設置為 Dragover。 如上所述設置 dropEffect 確實會影響光標的顯示方式。

在Firefox中，dropEffect來確實在懸浮窗來通過上的dragover被設置后，但不影響鼠標光標的顯示。 在 Firefox 窗口上按 ctrl 鍵會影響鼠標的顯示，但不會影響 dropEffect 屬性。

規范顯示源可以偵聽 dragend 事件以查看發生了什么。 它應該查看此事件中的 dropEffect。 Chrome、Mozilla 和 Safari 在這里可以正常工作，拖放效果出現在 dragend 事件中。 在 IE 中，如果允許的效果是一個簡單的值，例如“復制”，那么任何成功的放置都會導致該值在 dragend 上顯示為 dropEffect。 如果 effectAllowed 是像 copyMove 這樣的復合值，並且您嘗試通過設置 dropEffect 在拖動時選擇“移動”，那么您很不走運，這將在拖動端的源中以 dropEffect =“none”的形式出現。 你被一個光標和一個 dropEffect 卡住了，如果這個效果是一個簡單的值，那就是在 dragstart 上設置的 effectAllowed。 有趣的是，至少當您從 IE11 拖入本機應用程序時，它似乎確實會出現 dropEffect（我之前假設過）。

其他注意事項

在 Mac 上的 Safari 上 - effectAllowed 不能以編程方式設置，因此任何設置的 dropEffect 都是有效的。 當您按下 cmd 鍵時 effectAllowed 變為“移動”，當您按下 alt 鍵時 effectAllowed 變為“復制”。 此后，如果 dropEffect 不是這些 effectAlloweds 之一，則它會按您希望的方式工作，則瀏覽器不允許放置。

更多信息我一直在花一些空閑時間研究 HTML5 拖放庫，我在文檔中寫了很多關於這個和其他問題的信息，如果你有興趣，請看一下這個項目

Answer 1

我檢查了你的小提琴，我在 chrome 和 IE 10 中有相同的響應，即拖動時光標顯示復制符號，但它不復制/移動矩形。 您可以從http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_draganddrop獲取幫助

Answer 2

看看https://web.dev/drag-and-drop/

function handleDrop(e) {
  e.stopPropagation(); // Stops some browsers from redirecting.
  e.preventDefault();

  var files = e.dataTransfer.files;
  for (var i = 0, f; f = files[i]; i++) {
    // Read the File objects in this FileList.
  }
}

Answer 3

我知道這並不是最好的答案，但您可以使用像 JQUERY UI 這樣的 UI 框架，它已經內置了一系列功能的拖放功能。 可能勝過重建功能。