HTML5 drag & drop 拖拽與拖放
阿新 • • 發佈：2018-12-21
執行 javascrip eve eight 觸發 元素 padding 軟件 測試
關鍵詞：
1. draggable：規定元素是否可拖動的，draggable=true可拖動
2. dataTransfer：拖拽對象用來傳遞的媒介，使用方式：event.dataTransfer
3. ondragstart：拖拽元素被拖拽時觸發的事件，作用於被拖拽元素
4. ondragenter：拖拽元素進入目標元素時觸發的事件，作用於目標元素
5. ondragover：拖拽元素在目標元素移動觸發的事件，作用於目標元素
6. ondrop：拖拽的元素在目標元素上同時鼠標放開觸發的事件，作用於目標元素上
7. ondragend：拖拽完成後觸發的事件，作用於被拖拽元素上
實例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>拖拽</title> <style type="text/css"> #rectangle {width:350px;height:70px;padding:10px;border:1px solid #000;} </style> </head> <body> <div id="rectangle"></div> <p id="word" draggable="true">這是一段可移動的段落，請把該段落拖入上面的矩形進行測試</p> <script type="text/javascript"> let rectangle = document.getElementById(‘rectangle‘), word = document.getElementById(‘word‘); word.ondragstart = (e) => { e.dataTransfer.setData("Text",e.target.id); }; rectangle.ondragenter= (e) => { word.style.color = ‘#e1453c‘; };
//ev.preventDefault() 方法：阻止默認的些事件方法等執行。在ondragover中一定要執行preventDefault()，否則ondrop事件不會被觸發。
另外，如果是從其他應用軟件或是文件中拖東西進來，尤其是圖片的時候，默認的動作是顯示這個圖片或是相關信息，並不是真的執行drop。
此時需要用用document的ondragover事件把它直接幹掉。
rectangle.ondragover = (e) => { e.preventDefault(); }; rectangle.ondrop = (e) => { let data=e.dataTransfer.getData("Text"); e.target.appendChild(document.getElementById(data)); e.preventDefault(); }; word.ondragend = (e) => { document.getElementById(‘word‘).style.color = ‘#3cf078‘; }; </script> </body> </html>
HTML5 drag & drop 拖拽與拖放