【drag】HTML5 drag API

最新推荐文章于 2024-05-10 11:08:56 发布

The_Teng(前端)

最新推荐文章于 2024-05-10 11:08:56 发布

阅读量372

点赞数 1

分类专栏：基础知识专栏文章标签： html5 前端 html

本文链接：https://blog.csdn.net/Lin_Yu_/article/details/127943686

版权

基础知识专栏专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、将想要拖放的对象元素的draggable属性设置为true。另外，img元素和a元素必须指定href，默认允许拖放。

2、编写与拖放有关的事件处理代码。关于拖放存在如下表所示的几个事件：

事件	产生事件的元素	描述
dragstart	被拖放的元素	开始拖放操作
drag	被拖放的元素	施放过程中
dragenter	拖放过程中鼠标经过的元素	被拖放的元素开始进入本元素的范围内
dragover	拖放过程中鼠标经过的元素	被拖放的元素正在本元素内移动
dragleave	拖放过程中鼠标经过的元素	被拖放的元素离开本元素的范围
drop	拖放的目标元素	有其他元素被拖放到了本元素中
dragend	拖放的对象元素	拖放操作结束

3、dataTransfer对象

拖拽事件周期中会初始化一个DataTransfer对象，用于保存拖拽数据和交互信息。

clearData方法可以用来清除dataTransfer对象内数据。

setData方法在拖放开始时间向dataTransfer对象中存入数据，用types属性来指定数据。

getData方法在拖动结束时读取dataTransfer对象中的数据。

setDragImage方法制定拖拽元素跟随鼠标移动的图片，x、y分别是相对于鼠标的坐标。

4、流程

设置元素可以被拖动：draggable=‘true’

ondragstart里setData

ondragover里阻止默认事件 //prebentDefaule()

ondrop里，阻止默认事件，并getData，append到元素里

5、代码实现图片拖拽

<!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>Document</title>
    <style>
        .div1{
            border: 1px solid red;
            width: 500px;
            height: 300px;
        }
        .div2{
            border: 1px solid blue;
            width: 500px;
            height: 300px;
        }
    </style>
</head>
<body>
    <!-- 3、ondragover里阻止默认事件 -->
    <div class="div1" ondragover="dgover(event)" ondrop="_drop(event)"></div>
    <div class="div2">
        <!-- 1、设置当前元素可以被拖动 -->
        <!-- 2、设置ondragstart（设置在被拖放的元素中） -->
        <img id="img1" src="./images/shu.png" draggable="true" ondragstart="dgstart(event)"/>
    </div>

<script>
    function dgstart(event){
        //获取dataTransfer对象（将拖动的元素进行数据化便于传输）
        event.dataTransfer.setData('Text',event.target.id)
    }
    function dgover(event){
        //阻止浏览器对当前行为的默认事件执行
        event.preventDefault();
    }
    function _drop(event){
        //阻止默认事件
        event.preventDefault();
        const data = event.dataTransfer.getData('Text')
        //append到元素里 event.target指向当前div
        event.target.appendChild(document.getElementById(data))
    }
</script>
</body>
</html>