HTML5 drag & drop 拖拽與拖放

時間 2019-11-18

標籤 html5 html drag drop 拖放欄目 HTML5 简体版

原文原文鏈接

關鍵詞：javascript

1. draggable：規定元素是否可拖動的，draggable=true可拖動css

2. dataTransfer：拖拽對象用來傳遞的媒介，使用方式：event.dataTransferhtml

3. ondragstart：拖拽元素被拖拽時觸發的事件，做用於被拖拽元素java

4. ondragenter：拖拽元素進入目標元素時觸發的事件，做用於目標元素app

5. ondragover：拖拽元素在目標元素移動觸發的事件，做用於目標元素測試

6. ondrop：拖拽的元素在目標元素上同時鼠標放開觸發的事件，做用於目標元素上spa

7. ondragend：拖拽完成後觸發的事件，做用於被拖拽元素上code

實例：htm

<!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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。