HTML5 drag & drop 拖拽與拖放

tracy-ling發表於2018-12-21
HTML

關鍵詞：

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>

 

相關文章