H5拖拽7个事件

1.简介
(1)蓝图

拖动源
放置目标
拖放并不是单纯的把目标从一个地方移动另一个地方,其实是促成成功交互的操作过程中的反馈。

光标指示当前的位置是否可防置目标
用户提示是移动、链接或者复制
鼠标经过的地方样式改变,提示此处可以放置。
为满足以上的要求,浏览器在拖拽的每个过程中发起一系列的事件。

数据传输:一组对象,这个对象用来公开存储,拖动数据存储是拖放操作的基础。可以将传输数据理解成拖放的中央控制部分,用于反馈的图片以及数据自身的检索全部都在数据传输中管理。类似网络传输谈判,此时根本无需让拖动源和放置目标知道彼此的存在。此时其重要作用的就是MIME类型!

(2)MIME 多功能因特网邮件扩展服务

text/plain
image/png
image/jpeg
text/x-age 传递自定义的信息类型
事件
事件捕获:从父辈–→中间–→子辈
事件冒泡:反向
event.stopPropagation //阻止事件沿事件捕获链向下传递 或者 通过冒泡阶段向上传递。
event.preventDefault //阻止事件的默认行为,比如链接跳转。
“------------------------------------------------------------------------------------------------------------”
2.H5拖拽的7个事件分别是
ondragstart 只能在这个事件的过程中支持dataTransfer通过setData来设置数据。这是为了安全考虑。编号1
ondrag 拖动过程中持续发生的事件。就是鼠标移动的过程中会反复的调用此事件。编号2
ondragenter 拖动跨入了页面中新元素的时候触发,适用于设置拖放的放置反馈。编号3
ondragleave 恢复放置反馈,与上一事件相对。编号4
ondragover 不同于drag事件,此事件是在当前鼠标停留的目标上调用。编号5
ondrop 释放鼠标调用,要放置包含处理放置动作的代码。编号6
ondragend 在拖动源中触发,适合清空拖动过程的状态。编号7

3.设置、传输和控制
设置可以拖动,很简单就一句话

<div id = "huang" draggable="true">
setData(formate, data) //设置数据

getData(formate) //获得数据

types 一数组形式返回所有当前注册的格式

items 返回所有想及其相关格式的列表

files 返回与放置相关的所有文件

clearData( )

//更改拖放反馈

setDragImage(element, x, y):图片出现在鼠标的旁边,则x,y就是相对鼠标的偏移了。

addElement(element)通知浏览器将参数作为拖动反馈图像来绘制。?

//设置开发人员设置和查询

effecftAllowed( )设置参数,允许用户进行何种操作,copy/link/Move/组合

dropEffect( )

4.下面再进行展示一段代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" initial-scale=1>
    <title>拖拽7个事件</title>
    <style>
        body{
            width: 100%;
            height: 50%;
            display: flex;
            justify-content: space-between;
        }
        #left{
            width: 150px;
            height: 300px;
            background-color: hotpink;
            user-select: none;
        }
        #right{
            width: 150px;
            height: 300px;
            background-color: skyblue;
            user-select: none;
        }
    </style>
</head>
<body>
<div id="left" draggable="true">目标元素</div>
<div id="right" draggable="true">拖拽元素</div>
<script>
    let n = 0;
    //拖拽元素 你当前拖动的元素
    const right = document.querySelector('#right');
    //拖拽一瞬间
    right.ondragstart = function () {
        this.style.backgroundColor = 'red';
    };
    //连续触发
    right.ondrag = function () {
        document.title = n++
    }
    right.ondragend = function () {
        this.style.backgroundColor = 'skyblue';
    }
    //目标元素 目的地,把拖动的元素,拖动到哪里
    const left = document.querySelector('#left');
    left.ondragenter = function () {
        this.style.backgroundColor = 'orange';
        //鼠标进入才行
        this.innerText = '请释放鼠标';
    }
    left.ondragleave = function () {
        this.style.backgroundColor = 'hotpink';
        this.innerText = '鼠标离开';
    };

    //在目标元素上连续触发
    left.ondragover = function (e) {
        document.title = n++;
        e.preventDefault();
        e.stopPropagation();
        return false;
    };
    //具体要做什么,非常重要
    //在目标元素上释放鼠标
    left.ondrop = function () {
        //具体做啥操作,在此操作
        console.log(123);
        document.body.removeChild(right);
        return false;
    }
</script>
</body>
</html>

5.火狐与谷歌的兼容性问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>火狐兼容</title>
    <style>
        body{
            width: 100%;
            height: 50%;
            display: flex;
            justify-content: space-between;
        }
        *{
            margin: 0;
            padding: 0;
        }
        body>*{
            width: 150px;
            height: 300px;
            user-select: none;
        }
        #left{
            text-align: center;
            background-color: hotpink;
            line-height: 300px;
        }
        ul li{
            text-align: center;
            height: 35px;
            line-height: 35px;
            color: blue;
            margin: 15px auto;
            border: 2px dashed #dddddd;
        }
    </style>
</head>
<body>
<div id="left">请拖拽内容到此区域</div>
<ul id="list">
    <li draggable="true">1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    const aLi = document.querySelectorAll('li');
    const list = document.getElementById('list');
    aLi.forEach((item,index)=>{
        //谷歌下
        item.setAttribute('draggable','true');
        item.ondragstart = function (e) {
            console.log(e.dataTransfer);
            const dt = e.dataTransfer;
            //火狐
            dt.setData('key',index);
        }
    })
    //拖拽进入
    left.ondragenter = function () {
        this.innerText = '请释放你的鼠标';
    };
    //阻止默认事件
    left.ondragover = function (e) {
        e.preventDefault();
        e.stopPropagation();
        return false;
    };
    //拖拽离开目标物体时
    left.ondragleave = function () {
        this.innerText = '请拖拽内容到此区域';

    };
    //拖拽结束时
    left.ondrop = function (e) {
        const dt = e.dataTransfer;
        console.log(dt.getData('key'));//获取索引
        console.log(list);
        list.removeChild(aLi[dt.getData('key')]);
    }
</script>
</body>
</html>

你可能感兴趣的:(H5拖拽7个事件)