HTML5拖拽和释放

目录

拖放

拖放是一种常见的特性，及抓取对象后拖到另一个位置。

在HTML5中，拖放是标准的一部分，任何元素都能拖放。

设置元素可拖放

首先，将draggable属性设置为true

    <img src="" alt="" draggable="true">

拖动 ondragstart 和 setData()

然后，规定元素被拖动时发生的事件

dataTransfer.setData() 方法设置被拖动的数值类型和值：

function drag(ev) {
            ev.dataTransfer.setData("Text", ev.target.id);
        }

 Text 是一个 DOMString 表示要添加到 drag object 的拖动数据的类型

放到何处  ondragover

 ondargover:该事件表示拖放结束

通过调用 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()

ondrop:该事件表示拖放过程

function drop(ev) {
            // 允许其他元素拖放到此处
            ev.preventDefault();
            // 获取要拖放的元素id
            var id = ev.dataTransfer.getData("Text");
            // 将一个标签添加到另一个标签中, 可以使用appendChild();
            ev.target.appendChild(document.getElementById(id));
        }

代码解释:

• 调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
• 通过 dataTransfer.getData("Text") 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。
• 被拖数据是被拖元素的 id (drag)
• 把被拖元素追加到放置元素（目标元素）中

css部分

  #result {
            width: 192px;
            height: 108px;
            border: 1px solid black;
        }

        img {
            width: 192px;
            height: 108px;
        }

HTML部分

 <p>请将图片拖入到框中</p>
    <!-- ondragstart:该事件表示拖放开始
    ondargover:该事件表示拖放结束
    ondrop:该事件表示拖放过程 -->
    <div id="result" ondragover="allowDrag(event)" ondrop="drop(event)"></div>
    <!-- draggable:值为true表示元素可拖动，默认为flase，表示不可拖动 -->
    <img src="./img/1.png" alt="" draggable="true" ondragstart="drag(event)" id="drag">

 js部分

<script type="text/javascript">
        // 用于拖放的函数
        // 拖动已开始
        function drag(ev) {
            ev.dataTransfer.setData("Text", ev.target.id);
        }
        // 拖动过程
        function drop(ev) {
            // 允许其他元素拖放到此处
            ev.preventDefault();
            // 获取要拖放的元素id
            var id = ev.dataTransfer.getData("Text");
            // 将一个标签添加到另一个标签中, 可以使用appendChild();
            ev.target.appendChild(document.getElementById(id));
        }
        // 拖动结束
        function allowDrag(ev) {
            ev.preventDefault();
        }
    </script>