dragstart drag dragend dragenter dragover dragleave drop
前端框架层出不穷,网页上的效果越来越绚丽,制作绚丽的效果的成本越来越低,其中有种拖拽的效果是十分常见并且实用的。
其实手机上的使用已经非常频繁,举个例子,用手指选中一张图片,然后将图片拖到回收站,这就是一个完整的拖拽过程。细分一下,大致可以分为如下几个步骤:
首先,选中目标;然后拖动目标;最后在指定区域释放目标。
在javascript中有专门为这个过程设置的事件, 如果这种方式能够得到普及的话(兼容性问题不大,IE都兼容),就可以替换到老旧的修改元素位置的方式实现拖动的方式。这样做显而易见的好处就是,老方法一般需要将元素设置为绝对定位(absolute)然后将鼠标的偏移同步到被拖放元素;其次,老方法需要使用javascript高密度的修改DOM,效率低。
拖动过程需要从两个角度分解这个动作,可以想象这么一个场景,我们在地上划出一个范围,需要将桌子抬进去。
对于被拖动的桌子,需要拽住桌子,然后拖动,最后放下,在javascript对应的就是dragstart/drag/dragend(如果直接作为属性写,需要在开头加一个on);对于目标区域来说,桌子有个进入区域的状态,然后停留在上方的过程,最后是放到上面的状态,那对应的是dragenter/dragover/drop,当然,如果桌子抬进去,在没放下的情况下又抬出来,那会触发“抬离”的事件--dragleave。 拖动过程中,dragenter/dragover/dragleave/drop会发生在拖动轨迹经过的任意元素身上。当然,假设目标区域是元素B,被拖动的是元素A,那么给B绑定的事件,只有A被拖入B的时候才会执行(fire/dispatch)。当然,大部分高级浏览器都会对图片或者链接的dragend时刻有兴趣。
如果不希望在拖动网页上的图片时,浏览器默认打开新窗口的话,需要对dragstart开刀,通过在dragstart事件函数中return false,就可以达到这一目的。
拖动过程中,拖动的内容是什么,我们也许会感兴趣,那么dataTransfer显得尤为重要(将文件直接从电脑的文件系统中拽到浏览器中也可以通过它实现)。
http://help.dottoro.com/external/examples/ljpncnwi/ondragstart_3.htm 这个demo可以将流程看的较为清晰。
文中的被拖动元素是指source element, 目标区域是指target element,不准确,可以适当转换一下。
ondragstart:
执行拖动操作时候,发生在被拖动的元素(或者一段文字)上,也是最拖动过程中第一个触发的事件。
如果一些文本被选中,可以通过拖拽选中区域,在目标区域松手就可以;默认情况下,目标区域可以是一个可编辑元素(textarea/input),处于可编辑模式下的元素/an element in editable mode---<div contenteditable="true">,或者是设计模式下的文档/document in design mode。关于contentEditable和design mode的区别,可以参考这里。
ondrag:
被拖动元素在拖动期间会定时的触发这一事件,即使没有移到目标区域。
ondragend:
被拖动元素被“放下”的时候发生在其身上的事件。
ondragenter:
这是目标区域(元素)dragover的开端,只有鼠标移入了,才会有悬浮的事件dragover。
ondragover:
和ondrag有点类似,也是高频率触发的事件,但是发生在目标区域,且发生在dragenter之后,dragleave之前。
ondragleave:
和ondragenter刚好相反,结束dragover。
ondrop:
被拖动元素被“放置”在目标区域的时候,也就是拖拽结束的时候,发生在目标区域的事件。
在实践的过程中,发现在Chrome中,如果img没有src或者src无效的情况下,不会触发拖拽事件的。暂时还未找到相关文档。求真相
转载于:https://www.cnblogs.com/cy056/p/3357065.html
dragstart drag dragend dragenter dragover dragleave drop相关推荐
- 用jQuery添加dragstart,dragover和drop事件,实现拖拽效果
一.效果图 二.代码 <!DOCTYPE html> <html><head><meta charset="UTF-8"><t ...
- 【WPF】鼠标拖拽功能DragOver和Drop
在Winform里面实现拖入功能只要设置控件AllowDrop=true; 然后实现方法 //拖入 private void txtInputPath_DragOver(object sender, ...
- DRAG DROP
使用IDropTarget接口同时支持文本和文件拖放 关于Windows的外壳扩展编程,拖放是比较简单的一种,在网上可以找到不少介绍这个技巧的文章.大部分是介绍使用MFC的COleDropTarget ...
- HTML5 Drop API
转自:http://www.cnblogs.com/fsjohnhuang/p/3961066.html 一.前言 在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5 ...
- JS魔法堂:IE5~9的DragDrop API
一.前言 < HTML5魔法堂:全面理解Drag & Drop API>中提到从IE5开始已经支持DnD API,但IE5~9与HTML5的API有所不同,下面我们来了解 ...
- 【HTML5】网页元素的拖放操作
拖放介绍 拖放是一种常见的特性,即抓取对象以后拖到另一个位置.虽然在HTML5之前已经可以使用 mousedown,mousemove,mouseup 实现拖放,但是只支持在浏览器内部的拖放,在HTM ...
- mes项目 组态开发项目reademe文档 待整理
vue2 项目 ========= vue cmd命令所包含知识点: 当npm install无效,需要进行npm cache clean --force命令操作, 如果这样操作不成功的话,去C盘清空 ...
- HTML5讲解与演示转载整理
ZHENGLIL weiking 2010.12.06 html Html5从入门到精通 上周我们总结会上面主题的第二部分就是关于Html5的,后来自己想总结一下Html5 的支持列表,写了许久,无果 ...
- 《JS高级程序设计》第二遍读书笔记
这一遍的重点还是在JS语言本身,后面的DOM和BOM部分看的比较快,因为现在实际上用的不多,掌握大致的原理,需要的时候再翻手册就可以了. 认为暂时没必要的知识点WebGL, 认为已经不需要.过时的知识 ...
最新文章
- 35个高级Python知识点总结
- android中布局全屏,怎么在Android 应用中实现一个全屏与非全屏功能
- 网络存储技术介绍(1) ( based on zt)
- ESFramework 可复用的通信框架(序)
- 在emIDE中创建STM32项目
- mysql++3307,mysql多实例配置方法
- C# .net基于Http实现web server(web服务)
- React之组件小析
- Spring笔记02(3种加载配置文件的方式)
- 揭秘鲜为人知的酒店管理“黑洞”
- 速读原著-TCP/IP(端口映射器)
- 桌面快捷方式自动消失
- Week 10. 第189-204题
- win10计算机用户删除,Win10删除用户帐户的方法?如何在Win10中删除用户帐户
- win10自带邮箱无法登录QQ邮箱
- MySQL查询与数据库设计 #万能公式 #思维导图 #MySQL查询 #数据库设计规范 #第二部分
- 指纹识别在智能手机上的应用前景分析
- Camera Log 关键字汇总
- DOS命令篇(find 和 findstr)
- python安装anacondapanda_关于pandas:Pyarrow不安装python 3.7(anaconda 5.3.0,windows x64版本)...
热门文章
- 风变Python3---if条件相关的学习
- tomcat一段时间不操作oracle就关闭连接_操作数据库常见错误,开发人员必掌握的技能...
- 安卓 qemu 运行linux,在Qemu的beagleboard上运行Android
- 华为设备离线什么意思_华为手机中的P、Mate、nova分别是什么意思?看完你全懂了...
- data transformation python_Data augmentation: 利用python进行图像扩建
- 决策树(七)--Boost及源码分析
- Nacos教程_2 讲解
- at24c16如何划分出多个读写区_AVR学习笔记九、基于AT24C16的数据存储实验
- 将汉字转换成笔画代码_0基础学习五笔输入法之汉字的拆分
- java 调用kettle job 传参_java调用kettle向job(任务)和transformation(转换)传递参数实例...