HTML5拖放API的简单应用

实现思路：

1.设置元素可拖放状态

2.为被拖拽元素传递数据

3.定义可放置元素的目标区域

4.接收被拖拽元素的传递数据

实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>HTML5拖放API的简单应用</title>
    <style type="text/css">
    p {
        width: 100px;
        height: 100px;
        background-color: yellow;
    }

    div#container {
        border: 1px solid;
        width: 200px;
        height: 200px;
    }
    </style>
</head>

<body>
    <h3>HTML5拖放API的简单应用</h3>
    <hr>
    <p id="test" draggable="true" ondragstart="drag(event)">
        这是一个可以被拖放的段落元素
    </p>
    <div id="container" ondragover="allowDrop(event)" ondrop="drop(event)">
        这是一个可以用于放置被拖放元素的区域
    </div>
    <script type="text/javascript">
    //ondragstart事件回调函数
    function drag(ev) {
        //设置传递的内容为被拖拽元素的id名称，数据类型为纯文本类型
        ev.dataTransfer.setData("text/plain", ev.target.id);
    }
    //ondragover事件回调函数
    function allowDrop(ev) {
        //解禁当前元素为可放置被拖拽元素的区域
        ev.preventDefault();
    }
    //ondrop事件回调函数
    function drop(ev) {
        //解禁当前元素为可放置被拖拽元素的区域
        ev.preventDefault();
        //获取当前被放置元素的id名称
        var id = ev.dataTransfer.getData("text");
        //根据id名称获取元素对象
        var p = document.getElementById(id);
        //获取文件夹区域并添加该元素对象
        ev.target.appendChild(p);
    }
    </script>
</body>

</html>

拖拽前页面效果：

HTML5拖放API的简单应用

拖拽后页面效果：

HTML5拖放API的简单应用

实现元素的拖放效果。