HTML5拖拽 Drag Drop API

明确对象

源对象（被拖拽对象）
目标对象（拖拽目的地对象）

使用方法

HTML元素默认不被拖拽，需要手动设置，才能开启拖拽功能

<div draggable="true">设置开启拖拽</div>

API （注意区分好源对象和目标对象的JS事件）

源对象（被拖拽对象）API

dragstart：在开始拖放时触发，此事件常用来设置拖动图像，可以自定义拖拽元素的跟随图片；也常用来保存当前元素内的数据。下面是设置拖动图像的Demo。

<!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>
        div{
            width: 200px;
            height: 200px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div draggable="true"></div>
</body>
<script>
    const div=document.querySelector('div');
    div.ondragstart=e=>{
        const img=new Image();
        // 自己修改图片路径
        img.src='./pic/pic.png';
        // 自己调整想要的偏移范围
        e.dataTransfer.setDragImage(img, 20, 50);
    }
</script>
</html>

drag：在正在拖放时触发，此事件较少用。
dragend：在整个拖放操作结束时触发，此事件较少用。

目标对象（拖拽目的地对象）

dragenter：在源对象进入目标对象时触发。
dragover：在源对象在目标对象内移动时触发。当dragover触发时，drop会失效，因为浏览器默认不接受拖拽行为，因此需要阻止ondragover的默认事件。
dragleave：在源对象移出目标元素时触发。
drop：在目标元素完全接受被拖放元素时触发，dataTransfer对象中存储的数据只能在此方法中读取。

事件对象：dataTransfer用来保存和转移数据

dataTransfer对象常用方法：getData()，setData()，clearData()，操作dataTransfer中携带的数据

getData() 只有一个参数，表示要取的数据名称
setData() 有两个参数，第一个参数是数据名称，第二个参数是数据本身
getData和setData通过相同的数据名称来取对应的数据，如通过setData('a',data)将data保存到dataTransfer中，可用getData('a')获取数据data。当源对象中有数据需要在拖拽到目标对象后使用，可以用这两个方法。如：拖拽A到B，并将A的文本添加到B上，此时可以使用dataTransfer存储数据。
clearData() 没有参数，一般在drop事件完成所有逻辑后清理掉dataTransfer对象中存储的数据

dataTransfer对象常用属性：files，包含数据传输中可用的所有本地文件的列表，如果拖动操作不涉及拖动文件，则此属性为空列表。

案例

拖动图片到指定区域，读取该文件（常用于上传头像前端预览，设置背景图等功能）

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>拖动一张图片到浏览器中</title>
    <style>
        *{
            margin: 0;
            padding: 0;    
        }

        div{
            display: flex;
            position: relative;
            width: 400px;
            height: 200px;
            align-items: center;
            justify-content: center;
            border: 2px solid pink;
            box-sizing: border-box;
            overflow: hidden;
        }

        div img{
            width: 100%;
            position: absolute;
            top:0;
            left:0;
        }
    </style>
</head>
<body>
    <div>请拖动照片到此框内</div>
</body>
<script>
    // 因为将图片拖拽至浏览器,浏览器会默认用新窗口打开,我们先阻止此事件发生
    document.ondrop= e => e.preventDefault();
    const div = document.querySelector('div');
    div.ondragover = e => e.preventDefault();
    div.ondrop=e=>{
        // dataTransfer中储存着拖拽进来的文件数据
        const img = e.dataTransfer.files[0];
        // 使用FileReader读取文件
        const fileReader = new FileReader();
        fileReader.readAsDataURL(img);
        // onload事件执行完就可以将该图片填充到粉色框
        fileReader.onload=()=>{
            const img = new Image();
            img.src = fileReader.result;
            div.innerHTML='';
            div.appendChild(img);
        }
    }
</script>
</html>

HTML5 Drag Drop API

HTML5拖拽 Drag Drop API

明确对象

使用方法

案例