077_html5拖放
1. 拖放(drag和drop)是html5標準的組成部分。
2. 拖放
2.1. 拖放是一種常見的特性, 即抓取對象以后拖到另一個位置。
2.2. 在html5中, 拖放是標準的一部分, 任何元素都能夠拖放。
3. 設置元素為可拖放
3.1. 首先, 為了使元素可拖動, 把draggable屬性設置為true。draggable屬性可以在任何元素上設置, 也就是說幾乎所有的元素都可以進行拖動操作。
3.2. 設置一個圖片可拖動:
<img draggable="true" />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中:
<element ondragstart="myScript">9.5.2. JavaScript中:
object.ondragstart=function(){myScript};10. ondrag事件
10.1. ondrag事件在元素拖拽的過程中反復觸發, 每一百毫秒觸發一次。這事件的目標元素是被拖的那個元素, 該事件可冒泡, 可取消默認行為。
10.2. 語法
10.2.1. html中:
<element ondrag="myScript">10.2.2. JavaScript中:
object.ondrag=function(){myScript};11. ondragenter事件
11.1. ondragenter事件在被拖的元素進入一個合法的可drop目標時觸發。這個事件的目標元素是這個可drop目標。該事件可冒泡, 可取消默認行為。
11.2. 語法
11.2.1. html中:
<element ondragenter="myScript">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中:
<element ondragover="myScript">12.3.2. JavaScript中:
object.ondragover=function(){myScript};13. ondragleave事件
13.1. ondragleave這個事件在被拖得元素離開合法的可drop目標時觸發。這個事件的目標元素是這個可drop目標。該事件可冒泡, 不能取消默認行為。
13.2. 語法
13.2.1. html中:
<element ondragleave="myScript">13.2.2. JavaScript中:
object.ondragleave=function(){myScript};14. ondrop事件
14.1. ondrop當在可drop目標上松開拖動元素的指針設備時觸發這個事件, 該事件的目標元素是這個可drop目標。drop事件在dragend事件觸發之前觸發。這個事件可冒泡, 可取消默認行為。
14.2. 語法
14.2.1. html中:
<element ondrop="myScript">14.2.2. JavaScript中:
object.ondrop=function(){myScript};15. ondragend事件
15.1. ondragend當拖拽結束時觸發這個事件, 這個事件的目標元素是被拖的元素。在這些事件中dragend最后觸發。該事件可冒泡, 不能取消默認行為。
15.2. 語法
15.2.1. html中:
<element ondragend="myScript">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拖放的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 074_html5音频
- 下一篇： 078_html5Canvas