HTML5 拖放

Created: October-16, 2018

HTML5 本身支援拖放功能。

拖放元素

HTML5 拖放功能允許使用者將元素拖放到另一個位置。放置位置可以是不同的應用程式。在拖動元素時，元素的半透明表示遵循滑鼠指標。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML5 Drag & Drop</title>
<script type="text/javascript">
    function dragStart(e){
        // Sets the operation allowed for a drag source
        e.dataTransfer.effectAllowed = "move";
    
        // Sets the value and type of the dragged data
        e.dataTransfer.setData("Text", e.target.getAttribute("id"));
    }
    function dragOver(e){
        // Prevent the browser default handling of the data
        e.preventDefault();
        e.stopPropagation();
    }
    function drop(e){
        // Cancel this event for everyone else
        e.stopPropagation();
        e.preventDefault();
    
        // Retrieve the dragged data by type
        var data = e.dataTransfer.getData("Text");
    
        // Append image to the drop box
        e.target.appendChild(document.getElementById(data));
    }
</script>
<style type="text/css">
    #dropBox{
        width: 300px;
        height: 300px;
        border: 5px dashed gray;
        background: lightyellow;
        text-align: center;
        margin: 20px 0;
        color: orange;
    }
    #dropBox img{
        margin: 25px;
    }
</style>
</head>
<body>
    <h2>Drag & Drop Demo</h2>
    <p>Drag and drop the image into the drop box:</p>
    <div id="dropBox" ondragover="dragOver(event);" ondrop="drop(event);">
        <!--Dropped image will be inserted here-->
    </div>
    <img src="../images/kites.jpg" id="dragA" draggable="true" ondragstart="dragStart(event);" width="250" height="250" alt="Flying Kites">
</body>
</html>

提示： 你可以通過將 draggable 屬性設定為 true 來使元素可拖動，例如 draggable="true" 。但是，在大多數瀏覽器中，預設情況下，文字選擇，影象和具有 href 屬性的錨元素都是可拖動的。

拖放事件

在拖放操作的各個階段中會觸發許多事件。但是在拖動操作期間不會觸發滑鼠事件，例如 mousemove。下表提供了所有拖放事件的簡要概述。

事件	描述
`ondragstart`	使用者開始拖動元素時觸發
`ondragenter`	首次將可拖動元素移動到 drop listener 時觸發
`ondragover`	當使用者在 drop listener 上拖動元素時觸發
`ondreagleave`	當使用者從 drop listener 中拖出一個元素時觸發
`ondrag`	當使用者在任何地方拖動元素時觸發; 不斷激發，但如下滑鼠游標的 X 和 Y 座標
`ondrop`	當使用者成功將元素放入 drop listener 時觸發
`ondragend`	拖動操作完成時觸發，無論是否成功。從桌面將檔案拖到瀏覽器時不會觸發此事件。

注意： 所有主流現代瀏覽器（如 Firefox，Chrome，Opera，Safari 和 Internet Explorer 9+）均支援 HTML5 的拖放功能。