HTML5 拖放（Drag和Drop）-学习笔记

CYSDLN

已于 2022-10-30 22:21:23 修改

阅读量1.5k

点赞数 2

分类专栏：学习笔记文章标签： html5 学习 html

于 2022-07-21 16:33:45 首次发布

本文链接：https://blog.csdn.net/CYSNLD/article/details/125915029

版权

学习笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

什么是HTML5拖动？

拖放(Drag 和 drop)是 HTML5 标准的组成部分。

要接受元素的放下，目标元素必须监听至少3个事件：

首先是dragenter事件，用来决定是否接受“拖动的元素”被放下，如果接受放下，那么该事件就被取消，进入下一个事件

然后开始dragover事件，用来确定给用户什么样的反馈，即位于该元素之上时呈现什么样的效果，如果该事件被取消，反馈一般是一个鼠标指针，也可以使用dropEffect属性定义，如果事件没有被取消，那么就是默认的行为，默认的行为一般就是什么也不做。

最后是drop事件，也就是实际将执行的放下动作，这个事件也需要被取消，这样dropEffect属性的设置就可以被使用。

HTML5鼠标拖动原理

首先确定div块被鼠标点击，即是鼠标按下使用onmousedown()函数。

其次当鼠标被按下之后要开始进行移动使用onmousemove（）函数。

然后在被移动之后要松开鼠标，然后div块被固定使用onmouseup()函数。

拖放什么-ondragstart和setData()

ondragstart属性调用了一个函数，drag(event)，规定被拖动的数据dataTransefer.setData()方法设置被拖数据的数据类型和值。

放到何处-ondragover

ondragover事件规定在何处放置被拖动的数据。

进行放置-ondrop

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

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

拖动(代码)

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML5动画拖放</title>
    <style>
        #result,
        #two {
            width: 300px;
            height: 300px;
            border: 1px solid red;
            float: left;
        }
    </style>
</head>

<body>
    <p>请拖动图片</p>
    <div id="result" ondragover="allowDrap(event)" ondrop="drop(event)"></div>
    <div id="two" ondragover="allowDrap(event)" ondrop="drop(event)"></div>
    <img id="dragl" src="./img/1.png" alt="" draggable="true" ondragstart="drag(event)" width="300" height="300">
</body>
<script>
    // 拖动开始
    function drag(ev) {
        ev.dataTransfer.setData("Text", ev.target.id);
    }
    //拖动过程
    function drop(ev) {
        ev.preventDefault();
        var id = ev.dataTransfer.getData("Text");
        ev.target.appendChild(document.getElementById(id));
    }


    //拖动结束
    function allowDrap(ev) {
        ev.preventDefault();
    }
</script>

</html>

效果图(如果出现拖动图片时，自动打开新页面请更换浏览器)