HTML元素設定可拖拽

預設，HTML元素絕大多數是不可拖放的，當然也有例外。

將元素設定為可拖放狀態非常簡單，裡面有一些特殊情況，下面做一下詳細介紹。

一.draggable屬性：

絕大多數元素預設都是不可拖放的，大家可以自行測試一下。

可以將其draggable屬性值設定為true，即可將其設定為可拖放狀態。

二.預設可拖放元素：

HTML中有一些元素預設就是可拖放的。

分別如下：

（1）.連結<a>元素。

（2）.<img>圖片元素。

（3）.被選中的文字。

三.不同瀏覽器的特殊情況：

這些特殊情況，在標準中未有明確規定，可能隨著版本的更新會發生變化。

（1）.拖動本文至文字框：

在當前谷歌瀏覽器中，可以直接將選中的文字拖拽至文字框。

但是在火狐瀏覽器中不能完成此操作，其他瀏覽器並未做測試。

（2）.開始火狐瀏覽器拖動：

我們說，將元素的draggable屬性值設定為true即可將元素設定為可拖動狀態。

但火狐瀏覽器有些特殊，上述設定並沒有完全開啟拖放狀態，還需要進行如下操作。

程式碼片段如下：

[JavaScript] 純文字檢視 複製程式碼
op.ondragstart = (ev) => {
  ev.dataTransfer.setData("Text","ev.target.id");
}

火狐瀏覽器的情況簡單說明如下：

（1）.即便將draggable屬性值設定為true，在火狐中也未必可以拖動。

（2）.還需要在dragstart事件處理函式中，通過dataTransfer.setData()儲存資料，儲存空字串也可。