详解Html5原生拖拽操作


Posted in HTML / CSS onJanuary 12, 2018

最近的一次项目开发中用到了H5的拖拽功能,由于现有项目使用的是VUE全家桶,使用了vuedragable这个插件,但是整个过程是比较痛苦的。遂决定从H5拖拽的原理开始研究,然后再将其应用到数据驱动的框架中。在H5中要想实现拖放操作,至少需要经过两个步骤:1) 将想要拖放的对象元素的draggable属性设为true(img与a元素默认允许拖放);2) 编写与拖放相关的事件处理代码。为了测试简便,我这里首先使用jQuery库完成拖拽的基本功能。

1. 拖拽过程

1.1 拖动事件

当按住鼠标拖动draggable元素的时候会按照如下顺序依次触发

dragstart -> drag -> dragend

  1. dragstart :在按住鼠标开始拖动时候触发(触发一次)
  2. drag :在按住鼠标拖动的过程触发(持续触发)
  3. dragend :在释放鼠标后触发(无论是把元素放到了有效的放置目标,还是放置到了无效的放置目标上)

1.2 放置事件

当将draggable元素元素拖动到容器中将会按照如下顺序依次触发

dragenter -> dragover -> drop

dragenter:只要有元素被拖动到放置目标上,就会触发dragenter事件
dragover:dragenter紧随其后的就是dragover事件,而且在被拖动的元素还在放置目标的范围内移动时,就会持续触发该事件。
dragleave:元素被拖出了放置目标,会触发dragleave
drop:将拖动元素放置到目标元素上的时候会激发

1.3 完整事件流

从开始拖动元素到放置元素到目标区域,将会按照如下顺序依次触发

dragstart->drag->dragenter->dragover->dragleave->drop->dragend

2. 解决firefox对拖拽不支持的问题

如果我们直接给一个元素添加draggable属性,在chrome,opera中是可以直接进行拖拽(没有可以释放的操作(比如箭头变+号)),但是在firefox却没有反应

<ul class="canDrog">
        <li draggable="true" id="1">优</li>
        <li draggable="true" id="2">良</li>
        <li draggable="true" id="3">中</li>
        <li draggable="true" id="4">差</li>
    </ul>
    <script>
        //没有任何JS代码
    </script>

要解决这个问题必须为拖拽元素绑定dragstart事件处理函数,并且在该函数中调用event.dataTransfer.setData函数

<script>
     <ul class="canDrog">
        <li draggable="true" id="1">优</li>
        <li draggable="true" id="2">良</li>
        <li draggable="true" id="3">中</li>
        <li draggable="true" id="4">差</li>
    </ul>
    $('.canDrog > li').bind('dragstart',function(event){
        //firefox 必须访问用于拖拽通信的dataTransfer对象
        event.dataTransfer.setData("Text",'1');
    });
</script>

3. 解决chrome,opera拖拽元素至容器中时没有显示可释放标识问题

可释放标识使用不同的操作系统可能不同,在mac chrome中出现的是一个圆形标识里面嵌入一个白色的'+'。

解决方案是为容器绑定dragover事件

<ul class="canDrog">
        <li draggable="true" id="1">优</li>
        <li draggable="true" id="2">良</li>
        <li draggable="true" id="3">中</li>
        <li draggable="true" id="4">差</li>
    </ul>
    <table class="dataTbl">
            <thead>
                <tr>
                    <th style="width: 10%">节次/星期</th>
                    <th>周一</th>
                    <th>周二</th>
                    <th>周三</th>
                    <th>周四</th>
                    <th>周五</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>第一节</td>
                    <td draggable="true" ></td>
                    <td draggable="true" ></td>
                    <td draggable="true" ></td>
                    <td draggable="true" ></td>
                    <td draggable="true" ></td>
                </tr>
                <!--此处省略-->
            </tbody>
    </table>
<script>
    $('.canDrog > li').bind('dragstart',function(event){
        //firefox 必须访问用于拖拽通信的dataTransfer对象
        event.dataTransfer.setData("Text",'1');
    });
    //google chrome,opera需要添加
    $(".dataTbl").bind("dragover",'td',function(e){  
        e.originalEvent.preventDefault();  
    })  
</script>

4. 解决放置时firefox打开新选项卡问题

使用firefox的时候如果释放了被拖拽的元素,默认浏览器将会打开一个新的选项卡,如下

详解Html5原生拖拽操作

这是由于drop回调函数之后浏览器执行了默认行为,通常的解决方案在拖拽容器的drop钩子中添加阻止默认事件执行以及阻止冒泡的代码。

<script>
    //将元素释放到当前元素中
    $('.dataTbl').bind('drop','td',function(event){
        console.log('+++drop');
        event.preventDefault();
        event.stopPropagation();
    });
</script>

但是如果将draggable元素拖到其他地方,依然会导致打开新选项卡问题的出现,这时可以为所有容器添加如上代码。

详解Html5原生拖拽操作

5. 编写一个完整小例子

详解Html5原生拖拽操作

源码: https://github.com/pluslicy/drag

随后将对vuedraggable插件库进行学习,应用在vue框架中

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3.0 图形构成实例练习二
Mar 19 HTML / CSS
CSS3中的Media Queries学习笔记
May 23 HTML / CSS
HTML5 Canvas API中drawImage()方法的使用实例
Mar 25 HTML / CSS
html5 canvas实现跟随鼠标旋转的箭头
Mar 11 HTML / CSS
html5触摸事件判断滑动方向的实现
Jun 05 HTML / CSS
HTML5计时器小例子
Oct 15 HTML / CSS
html5 自定义播放器核心代码
Dec 20 HTML / CSS
html5菜单折纸效果
Apr 22 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 HTML / CSS
详解HTML5 Canvas绘制不规则图形时的非零环绕原则
Mar 21 HTML / CSS
html5 canvas绘制矩形和圆形的实例代码
Jun 16 HTML / CSS
Canvas引入跨域的图片导致toDataURL()报错的问题的解决
Sep 19 HTML / CSS
使用Html5、CSS实现文字阴影效果
Jan 17 #HTML / CSS
canvas烟花特效锦集
Jan 17 #HTML / CSS
使用html2canvas实现浏览器截图的示例代码
Jan 26 #HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 #HTML / CSS
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
Feb 01 #HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 #HTML / CSS
详解移动端HTML5音频与视频问题及解决方案
Aug 22 #HTML / CSS
You might like
使用CodeIgniter的类库做图片上传
2014/06/12 PHP
discuz目录文件资料汇总
2014/12/30 PHP
php中memcache 基本操作实例
2015/05/17 PHP
php实现遍历文件夹的方法汇总
2017/03/02 PHP
php面向对象程序设计入门教程
2019/06/22 PHP
解决Laravel5.5下的toArray问题
2019/10/15 PHP
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
整理Javascript数组学习笔记
2015/11/29 Javascript
js实现文字滚动效果
2016/03/03 Javascript
分享两段简单的JS代码防止SQL注入
2016/04/12 Javascript
JSON 数据格式详解
2017/09/13 Javascript
微信小程序-getUserInfo回调的实例详解
2017/10/27 Javascript
详解JS数值Number类型
2018/02/07 Javascript
Nodejs中怎么实现函数的串行执行
2019/03/02 NodeJs
[34:08]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS EG
2018/03/30 DOTA
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
Windows 64位下python3安装nltk模块
2018/09/19 Python
python for循环输入一个矩阵的实例
2018/11/14 Python
对python中词典的values值的修改或新增KEY详解
2019/01/20 Python
django模板结构优化的方法
2019/02/28 Python
Python脚本修改阿里云的访问控制列表的方法
2019/03/08 Python
Python简单实现区域生长方式
2020/01/16 Python
使用pytorch搭建AlexNet操作(微调预训练模型及手动搭建)
2020/01/18 Python
Python使用urllib模块对URL网址中的中文编码与解码实例详解
2020/02/18 Python
实现Python3数组旋转的3种算法实例
2020/09/16 Python
python里反向传播算法详解
2020/11/22 Python
selenium自动化测试入门实战
2020/12/21 Python
党的群众路线查摆剖析材料
2014/10/10 职场文书
机关作风建设自查报告及整改措施
2014/10/21 职场文书
个人事迹材料范文
2014/12/29 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
盗窃案辩护词
2015/05/21 职场文书
spring cloud gateway中如何读取请求参数
2021/07/15 Java/Android
Anaconda配置各版本Pytorch的实现
2021/08/07 Python
Python实现将多张图片合成MP4视频并加入背景音乐
2022/04/28 Python