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

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

 

Write By CS逍遥剑仙
我的主页: www.csxiaoyao.com
GitHub: github.com/csxiaoyaojianxian
Email: sunjianfeng@csxiaoyao.com
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

www.csxiaoyao.com

【By CS逍遥剑仙】 未经允许不得转载:禅林阆苑 » 前端拾零02—H5原生拖放总结 【原创】

赞 (0) 打赏

评论 0

如果觉得有用就请我喝一杯咖啡吧

支付宝扫一扫打赏

微信扫一扫打赏