Write By CS 逍遥剑仙
我的主页: http://www.csxiaoyao.com/
- GitHub: https://github.com/csxiaoyaojianxian
- Email: sunjianfeng@csxiaoyao.com
前端拾零收录日常开发中一些很常见很基础的前端操作, 省去每次 google 甚至答案错误的烦恼
github 源码地址 http://htmlpreview.github.io/?https://github.com/csxiaoyaojianxian/JavaScriptStudy/blob/master/19-前端拾零/02-h5_drag.html
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
来源: https://www.qcloud.com/developer/article/1189043