前端拾零02—H5原生拖放总结

前端拾零02—H5原生拖放总结

Write By CS逍遥剑仙
我的主页: www.csxiaoyao.com
GitHub: github.com/csxiaoyaojianxian
Email: [email protected]
QQ: 1724338257

前端拾零收录日常开发中一些很常见很基础的前端操作，省去每次google甚至答案错误的烦恼

github源码地址

1. 拖放总览

前端拖放，无非通过两种方式：1、js鼠标事件监听，动态改变坐标位置；2、H5原生api。随着H5的普及，推荐使用相对简单的H5原生api实现拖放功能。

H5拖放分为两部分：拖放元素和目标元素，分别有不同的属性和监听事件

2. 拖放元素

2.1 拖放元素属性

draggable: 设置元素可被拖放

2.2 拖放元素监听事件

ondragstart: 拖放开始时触发事件，作用于拖放元素
ondrag: 拖放期间连续触发事件，作用于拖放元素
ondragend: 拖放完成时触发事件，作用于拖放元素

2.3 demo

<img id="dragData" width="100" title="拖放对象" src="http://www.csxiaoyao.com/src/img/logo.png" draggable="true" ondragstart="dragstart(event)" ondrag="drag(event)" ondragend="dragend(event)"/>

js事件实现

function dragstart(event) {
    var dt = event.dataTransfer;
    // dt.effectAllowed = 'none'; // 不允许拖拽
    // 拖放的数据类型和值
    dt.setData("csxiaoyaoData", event.target.id);
    console.log("ondragstart 拖动开始");
}
function drag(event) {
    console.log("ondrag持续拖动");
}
function dragend(event) {
    console.log("ondragend 拖放停止");
}

3. 目标元素

3.1 目标元素监听事件

ondragenter: 拖放元素进入目标元素时触发事件，作用于目标元素
ondragover: 拖放元素在目标元素上移动时触发事件，作用于目标元素
ondrop: 拖放元素在目标元素上放置时触发事件，作用于目标元素
ondragleave: 拖放元素离开目标元素时触发事件，作用于目标元素

3.2 demo

<div id="div1" ondragenter="dragenter(event)" ondragover="dragover(event)" ondrop="drop(event)" ondragleave="dragleave(event)">
    <p>div1</p>
</div>
<div id="div2" ondragenter="dragenter(event)" ondragover="dragover(event)" ondrop="drop(event)" ondragleave="dragleave(event)">
    <p>div2</p>
</div>

js事件实现

function dragenter(event) {
    event.preventDefault();
    console.log("ondragenter 进入目标区");
}
function dragover(event) {
    event.preventDefault();
    console.log("ondragover 正在目标中移动");
}
function drop(event) {
    event.preventDefault();
    // 阻止冒泡，解决foxfire下弹出新窗口
    event.stopPropagation();
    // 保存在dataTransfer对象中的数据只能在drop事件处理程序中读取
    var dt = event.dataTransfer;
    var data = dt.getData("csxiaoyaoData");
    event.target.appendChild(document.getElementById(data).cloneNode());
    console.log("ondrop 拖放成功");
}
function dragleave(event) {
    console.log("ondragleave 离开目标区");
}

4. Event.preventDefault()

Event.preventDefault(): 阻止默认事件方法执行，ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件覆盖

5. Event.dataTransfer

Event.dataTransfer: 拖放对象数据传递媒介，保存在dataTransfer对象中的数据只能在drop事件处理程序中读取

Event.dataTransfer.dropEffect: 指定拖放视觉效果，只有搭配effectAllowed属性才会生效，在dragenter中设置
(1) none: 不能拖放（除文本框外所有元素的默认值）
(2) move: 移动拖放元素
(3) copy: 复制拖放元素
(4) link: 放置目标自动打开拖动元素（拖放元素必须是有URL的链接）

Event.dataTransfer.effectAllowed: 指定目标元素允许的视觉效果，必须在dragstart事件处理程序中设置
(1) uninitialized: 不指定
(2) none: 不允许所有行为
(3) copy: 只允许值为”copy”的dropEffect
(4) link: 只允许值为”link”的dropEffect
(5) move: 只允许值为”move”的dropEffect
(6) copyLink: 只允许值为”copy”和”link”的dropEffect
(7) copyMove: 只允许值为”copy”和”move”的dropEffect
(8) linkMove: 只允许值为”link”和”move”的dropEffect
(9) all: 允许任意dropEffect