前端拾零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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏java一日一条

面试中单例模式有几种写法

纠结单例模式有几种写法有用吗?有点用,面试中经常选择其中一种或几种写法作为话头,考查设计模式和coding style的同时,还很容易扩展到其他问题。这里讲解几...

12170
来自专栏java一日一条

华为、腾讯、阿里、网易员工下班时间大曝光,为什么赢不了他们

这年头,不加班都不好意思说自己是上班族的。但有一种行业的疯狂加班程度,已经逐渐成为加班领域的一颗新星——互联网行业从事者!

14530
来自专栏ios 技术积累

TableViewCell和百度地图手势冲突

如果要实现这个功能,出现的问题就是缩放地图不灵敏,上下拖动TableView就会跟着动 解决办法

31120
来自专栏java一日一条

华为加班到底有多恐怖?

“我先说一下我的吧。昨天晚上好不容易11点之前搞完上线回到家,刚开门媳妇就叫到:你TMD给我站到阳台去!”

1.3K20
来自专栏AhDung

慎用Assembly.LoadFile()和Assembly.LoadFrom()

经测这俩方法会锁住文件,导致程序运行期间无法对load过的程序集文件进行更名/删除/覆盖等等操作,考虑用Assembly.Load()文件字节组替代:

40540
来自专栏java一日一条

我的编码习惯 - 参数校验和国际化规范

今天我们说说参数校验和国际化,这些代码没有什么技术含量,却大量充斥在业务代码上,很可能业务代码只有几行,参数校验代码却有十几行,非常影响代码阅读,所以很有必要把...

12510
来自专栏java一日一条

编程,从来都不晚:来自日本的82岁APP开发者

82岁的若宮正子第一次工作时,还是使用算盘来进行计算——而如今,她是世界上年纪最大的iPhone应用开发者之一,也是使得智能手机走入老年人生活的先驱者。

15120
来自专栏ios 技术积累

UIProgressView 当前进度显示圆角

也就是把 UIProgressView的trackTintColor设置为透明。假如进度条没有填满是效果是这样的

83420
来自专栏李蔚蓬的专栏

自定义控件基础 之 3.4 ViewGroup的测量 & 3.5 ViewGroup的绘制

之前分析中说了,ViewGroup会去管理其子View,其中一个管理项目就是负责子View的显示大小。当ViewGroup的大小为wrap_content时,V...

11620
来自专栏java一日一条

盲式出轨,上流社会边缘人士,2018朋友圈流行词,哪个词说中了你?

11730

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励