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 的拖放功能。