當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

077_html5拖放

發布時間：2025/4/17 编程问答 38 豆豆

生活随笔收集整理的這篇文章主要介紹了 077_html5拖放小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1. 拖放(drag和drop)是html5標準的組成部分。

2. 拖放

2.1. 拖放是一種常見的特性, 即抓取對象以后拖到另一個位置。

2.2. 在html5中, 拖放是標準的一部分, 任何元素都能夠拖放。

3. 設置元素為可拖放

3.1. 首先, 為了使元素可拖動, 把draggable屬性設置為true。draggable屬性可以在任何元素上設置, 也就是說幾乎所有的元素都可以進行拖動操作。

3.2. 設置一個圖片可拖動:

3.3. 設置一個文本可拖動:

<span draggable="true" />可拖動文本</span>

4. 拖動什么 - ondragstart和setData()

4.1. 當元素被拖動時, 會發生ondragstart事件, 我們為ondragstart屬性指定一個myDragStart(event)函數, 它規定了被拖動的數據。dataTransfer.setData()方法設置被拖數據的數據類型和值:

function myDragStart(dragEven){dragEven.dataTransfer.setData("text/plain", dragEven.target.id); }<img id="drag1" src="drag.gif" draggable="true" ondragstart="myDragStart(event)" />

4.2. 在這個例子中, 設置被拖動的數據類型是"text/plain", 值是可拖動元素的id("drag1")。

5. 放到何處 - ondragover

5.1. ondragover事件規定在何處放置被拖動的數據。

5.2. 默認地, 無法將數據/元素放置到其他元素中。如果需要設置允許放置, 我們必須阻止對元素的默認處理方式。這要通過調用ondragover事件的event.preventDefault()方法:

function myDragOver(dragEven){dragEven.preventDefault(); } <div id="div1" ondragover="myDragOver(event)"></div>

6. 進行放置 - ondrop

6.1. 當放置被拖數據時, 會發生drop事件。

function myDrop(dragEven){dragEven.preventDefault();var id = dragEven.dataTransfer.getData("text");dragEven.target.appendChild(document.getElementById(id)); }<div id="div1" ondrop="myDrop(event)" ondragover="myDragOver(event)"></div>

7. html5拖放例子

7.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>拖拽實例</title><style type="text/css">#div1 {width: 198px; height: 66px; padding: 10px; border: 1px solid #aaaaaa;}</style><script type="text/javascript">function myDragStart(dragEven){dragEven.dataTransfer.setData("text/plain", dragEven.target.id);}function myDragOver(dragEven){dragEven.preventDefault();}function myDrop(dragEven){dragEven.preventDefault();var id = dragEven.dataTransfer.getData("text");if(id === "") return;dragEven.target.appendChild(document.getElementById(id));}</script></head><body><p>請把W3School的圖片拖放到矩形中:</p><div id="div1" ondrop="myDrop(event)" ondragover="myDragOver(event)"></div><br /><img id="drag1" src="drag.gif" draggable="true" ondragstart="myDragStart(event)" /></body> </html>

7.2. 效果圖

8. DragEvent事件對象

8.1. DragEvent是一個表示drag和drop交互的DOM event接口。用戶通過將指針設備(如: 鼠標)放在目標的表面開始拖動, 然后拖動指針到一個新的位置(其他DOM元素)。應用程序自動的解析拖放交互。

8.2. DragEvent接口從MouseEvent和Event那兒繼承屬性。

8.3. DragEvent并不是一個單一的事件, 它包含了多個事件, 這些事件分別是: dragstart、drag、dragenter、dragover、dragleave、drop和dragend。

8.4. DragEvent.dataTransfer是一個只讀屬性, 在拖放交互期間傳輸的數據。

9. ondragstart事件

9.1. ondragstart事件在用戶開始拖動時觸發。這個事件的目標元素是被拖的那個元素, 在這些事件中, dragstart事件最先觸發。該事件可冒泡, 可取消默認行為。

9.2. 為了讓元素可拖動, 需要使用html5 draggable屬性。

9.3. 鏈接和圖片默認是可拖動的, 不需要draggable屬性。

9.4. 在拖放的過程中會觸發以下事件:

9.4.1. 在拖動目標上觸發事件(源元素):

ondragstart: 用戶開始拖動元素時觸發。
ondrag: 元素正在拖動時觸發。
ondragend: 用戶完成元素拖動后觸發。

9.4.2. 釋放目標時觸發的事件:

ondragenter: 當被鼠標拖動的對象進入其容器范圍內時觸發此事件。
ondragover: 當某被拖動的對象在另一對象容器范圍內拖動時觸發此事件。
ondragleave: 當被鼠標拖動的對象離開其容器范圍內時觸發此事件。
ondrop: 在一個拖動過程中, 釋放鼠標鍵時觸發此事件。

9.5. 語法

9.5.1. html中:

9.5.2. JavaScript中:

object.ondragstart=function(){myScript};

10. ondrag事件

10.1. ondrag事件在元素拖拽的過程中反復觸發, 每一百毫秒觸發一次。這事件的目標元素是被拖的那個元素, 該事件可冒泡, 可取消默認行為。

10.2. 語法

10.2.1. html中:

10.2.2. JavaScript中:

object.ondrag=function(){myScript};

11. ondragenter事件

11.1. ondragenter事件在被拖的元素進入一個合法的可drop目標時觸發。這個事件的目標元素是這個可drop目標。該事件可冒泡, 可取消默認行為。

11.2. 語法

11.2.1. html中:

11.2.2. JavaScript中:

object.ondragenter=function(){myScript};

12. ondragover事件

12.1. ondragover當被拖的元素在可drop目標范圍內移動時反復觸發這個事件, 一百毫秒觸發一次。這個事件的目標元素是這個可drop目標。該事件可冒泡, 可取消默認行為。

12.2. 默認情況下, 數據/元素不能放置到其他元素中。如果要實現改功能, 我們需要防止元素的默認處理方法。我們可以通過調用event.preventDefault()方法來實現ondragover事件。

12.3. 語法

12.3.1. html中:

12.3.2. JavaScript中:

object.ondragover=function(){myScript};

13. ondragleave事件

13.1. ondragleave這個事件在被拖得元素離開合法的可drop目標時觸發。這個事件的目標元素是這個可drop目標。該事件可冒泡, 不能取消默認行為。

13.2. 語法

13.2.1. html中:

13.2.2. JavaScript中:

object.ondragleave=function(){myScript};

14. ondrop事件

14.1. ondrop當在可drop目標上松開拖動元素的指針設備時觸發這個事件, 該事件的目標元素是這個可drop目標。drop事件在dragend事件觸發之前觸發。這個事件可冒泡, 可取消默認行為。

14.2. 語法

14.2.1. html中:

14.2.2. JavaScript中:

object.ondrop=function(){myScript};

15. ondragend事件

15.1. ondragend當拖拽結束時觸發這個事件, 這個事件的目標元素是被拖的元素。在這些事件中dragend最后觸發。該事件可冒泡, 不能取消默認行為。

15.2. 語法

15.2.1. html中:

15.2.2. JavaScript中:

object.ondragend=function(){myScript};

16. DataTransfer對象

16.1. DragEvent事件的dataTransfer屬性是一個DataTransfer對象, 在這個對象中保存了拖拽操作過程中的數據, 它可能保存一個或者多個數據項。

17. DataTransfer.types

17.1. DataTransfer.types是只讀屬性。它返回一個我們在dragstart事件中設置的拖動數據格式的數組。格式順序與拖動操作中包含的數據順序相同。 ?

17.2. 這些格式是指定數據類型或格式的Unicode字符串, 通常由MIME類型給出。

17.3. DataTransfer.types返回值是拖動操作中使用的數據格式數組。每種格式都是字符串類型。如果拖動操作不包含數據, 則此數組列表將為空。如果拖動操作中包含任何文件, 則其中一個類型將是Files。

17.4. <img>和<a>標簽拖動操作有沒有包含數據, 都返回['text/plain', 'text/uri-list', 'text/html']。

17.5. 拖動文件操作有沒有包含數據, 都返回['Files']。

17.6. 例子

17.6.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>DataTransfer.types</title><style type="text/css">#div1 {width: 198px; height: 66px; padding: 10px; border: 1px solid #aaaaaa;}</style><script type="text/javascript">function myDragStart(dragEven){dragEven.dataTransfer.setData("text/plain", dragEven.target.id);}function myDragOver(dragEven){dragEven.preventDefault();}function myDrop(dragEven){dragEven.preventDefault();var types = dragEven.dataTransfer.types;console.log(types);}</script></head><body><p>請把W3School的圖片、超鏈接、文本或者外部文件拖放到矩形中:</p><div id="div1" ondrop="myDrop(event)" ondragover="myDragOver(event)"></div><br /><img id="img1" src="drag.gif" draggable="true" ondragstart="myDragStart(event)" /><a href="#" id="a1" draggable="true" ondragstart="myDragStart(event)">可拖拽超鏈接</a><span id="span1" draggable="true" ondragstart="myDragStart(event)">可拖拽文本</span></body> </html>

17.6.2. 效果圖

17.6.3. 拖動操作有沒有包含數據, ?效果圖

18. DataTransfer.setData()

18.1. DataTransfer.setData()方法用來設置拖放操作的drag data到指定的數據和類型。

18.2. 如果給定類型的數據不存在, 則將其添加到拖動數據存儲的末尾, 使得types列表中的最后一個項目將是新類型。

18.3. 如果給定類型的數據已經存在, 現有數據將被替換為相同的位置。也就是說, 替換相同類型的數據時types列表的順序不會更改。?

18.4. 語法

void dataTransfer.setData(format, data);

18.5. 參數format表示要添加到drag object的拖動數據的類型。

18.6. 參數data表示要添加到drag object的數據。

19. DataTransfer.getData()

19.1. DataTransfer.getData()方法獲取指定類型的拖放數據。如果拖放行為沒有操作任何數據, 會返回一個空字符串。

19.2. 語法

String dataTransfer.getData(format);

19.3. 參數format表示要添加到drag object的拖動數據的類型。

19.4. 返回值是一個給定類型的String格式的數據。如果沒有操作數據或者沒有指定操作數據的類型, 都會返回一個空字符串。

20. DataTransfer.clearData()

20.1. DataTransfer.clearData()方法刪除給定類型的拖動操作的drag data。如果給定類型的數據不存在, 則此方法不執行任何操作。

20.2. 如果調用此方法沒有參數, 則將刪除所有類型的數據。

20.3. 此方法不會從拖動操作中刪除文件, 因此如果有任何文件包含在對象的DataTransfer.types列表中, 仍然可能有一個類型為"Files"的條目在拖動。

20.4. 語法

DataTransfer.clearData([format]);

21. DataTransfer.files

21.1. DataTransfer.files屬性在拖動操作中表示文件列表。如果操作不包含文件, 則此列表為空。此功能可用于將文件從用戶桌面拖動到瀏覽器。

21.2. 語法

dataTransfer.files;

22. DataTransfer.items

22.1. DataTransfer的items屬性只讀, 是拖動操作中數據傳輸項的列表。該列表包含了操作中每一項目的對應項, 如果操作沒有項目, 則列表為空。

22.2. 語法

var itemList = dataTransfer.items;

22.3. 返回一個DataTransferItemList對象, 包含了表示拖動操作中被拖動項的DataTransferItem對象, 每一個拖動項對應一個列表項。如果拖動操作中沒有數據, 則列表為空。

23. DataTransferItem對象

23.1. DataTransferItem描述了一個拖拽項。在一個拖拽操作中, 每一個drag event都有一個dataTransfer屬性, 它包含一個存有拖拽數據的list, 其中每一項都是一個DataTransferItem。

23.2. DataTransferItem.kind是一個只讀屬性, 表示拖拽項的種類string或是file。

23.3. DataTransferItem.type是一個只讀屬性, 表示拖拽項的類型, 一般是一個MIME類型。

23.4. DataTransferItem.getAsFile()

23.4.1. 如果DataTransferItem是一個文件, 那DataTransferItem.getAsFile()方法將返回拖拽項數據的File對象。如果拖拽項的數據不是一個文件, 則返回null。

23.4.2. 語法

var File = DataTransferItem.getAsFile();

23.5. DataTransferItem.getAsString()

23.5.1. DataTransferItem.getAsString()當DataTransferItem對象的kind屬性是一個普通Unicode字符串時, 該方法會用DataTransferItem對象的kind屬性作為入參來執行傳入的回調函數。

23.5.2. 語法

dataTransferItem.getAsString(callback);

24. 例子

24.1. 代碼

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title>DataTransfer.files和DataTransfer.items</title><style type="text/css">#div1 {width: 198px; height: 66px; padding: 10px; border: 1px solid #aaaaaa;}</style><script type="text/javascript">function myDragStart(dragEven){dragEven.dataTransfer.setData("text/plain", dragEven.target.id);}function myDragOver(dragEven){dragEven.preventDefault();}function myDrop(dragEven){dragEven.preventDefault();var files = dragEven.dataTransfer.files;for (let i = 0; i < files.length; i++) {var f = files[i];console.log('name: ' + f.name + ' size: ' + f.size + ', type: ' + f.type);}var items = dragEven.dataTransfer.items;for (let i = 0; i < items.length; i++) {if((items[i].kind == 'string') && (items[i].type.match('^text/plain'))){items[i].getAsString(function (id){console.log('id: ' + id);});} else if(items[i].kind == 'file'){var f = items[i].getAsFile();console.log('name: ' + f.name + ' size: ' + f.size + ', type: ' + f.type);}}}</script></head><body><p>請把W3School的圖片、超鏈接、文本或者外部文件拖放到矩形中:</p><div id="div1" ondrop="myDrop(event)" ondragover="myDragOver(event)"></div><br /><img id="img1" src="drag.gif" draggable="true" ondragstart="myDragStart(event)" /><a href="#" id="a1" draggable="true" ondragstart="myDragStart(event)">可拖拽超鏈接</a><span id="span1" draggable="true" ondragstart="myDragStart(event)">可拖拽文本</span></body> </html>

24.2. 效果圖

總結

以上是生活随笔為你收集整理的077_html5拖放的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

拖放