dragstart drag dragend dragenter dragover dragleave drop
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无效的情况下,不会触发拖拽事件的。暂时还未找到相关文档。求真相
dragstart drag dragend dragenter dragover dragleave drop的更多相关文章
- HTML 5 拖放 drag dragend dragover ....
拖放(Drag 和 drop)是 HTML5 标准的组成部分. // http://www.w3school.com.cn/html5/html_5_draganddrop.asp dataTrans ...
- HTML5--拖动02-dragstart、drag、dragenter、dragover、dragleave、drop、dragend属性
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 【WPF】鼠标拖拽功能DragOver和Drop
在Winform里面实现拖入功能只要设置控件AllowDrop=true; 然后实现方法 //拖入 private void txtInputPath_DragOver(object sender, ...
- Javascript 高级程序设计--总结【四】
******************************* Chapter 11 DOM扩展 ******************************* 主要的扩展是 选择符API 和 H ...
- vue拖拽组件开发
vue拖拽组件开发 创建临时vue项目 先查看node和npm版本,怎么安装就不多多bb了 再安装vue-cli npm install vue-cli -g //全局安装 vue-cli 检测是否安 ...
- HTML5魔法堂:全面理解Drag & Drop API
一.前言 在HTML4的时代,各前端工程师为了实现拖拽功能可说是煞费苦心,初听HTML5的DnD API觉得那些痛苦的日子将一去不复返,但事实又是怎样的呢?下面我们一起来看看DnD API的真面 ...
- JS魔法堂:IE5~9的Drag&Drop API
一.前言 < HTML5魔法堂:全面理解Drag & Drop API>中提到从IE5开始已经支持DnD API,但IE5~9与HTML5的API有所不同,下面我们来了解一 ...
- HTML 5 drag and drop 简介
Html 5 drag and drop 简介 HTML5提供了专门拖拽和拖放的API draggable属性 启用拖拽 draggable属性是否可被拖拽, 可选值: true, false, au ...
- 原生 drag drop HTML5
drag事件( dragstart -- drag -- dragend ) 当按下鼠标开始drag一个可以拖动的对象时,触发dragstart事件,如果元素是不可拖动的话,会出现一个不可拖动的图 ...
随机推荐
- 【科技】扩展Lucas随想
扩展Lucas解决的还是一个很Simple的问题: 求:$C_{n}^{m} \; mod \; p$. 其中$n,m$都会比较大,而$p$不是很大,而且不一定是质数. 扩展Lucas可以说和Luca ...
- LINUX第四周学习
<Linux内核设计与实现>第四周读书笔记——第五章 5.1 与内核通信57 系统调用在用户空间进程和硬件设备之间添加了一个中间层,该层主要作用有三个: 首先它为用户空间提供了一种硬件的抽 ...
- 主流图片加载框架 ImageLoader、Glide、Picasso、Fresco 对比
图片缓存库主页: Glidehttps://github.com/bumptech/glide fresco - An Android library for managing images and ...
- 安装JDK、Tomcat、Maven’详细步骤
安装JDK 1.首先在官网下载JDK1.8包并解压(随便你装哪个版本) 2.下面开始配置环境变量 此电脑-右键-属性-高级系统配置 点击环境变量 将会看到以下界面 在系统变量下“新建” 变量名(J ...
- python 文件路径问题
需要用到 os 模块和 sys 模块 import os print(__file__)# 输出相对路径 print(os.path.abspath(__file__)) #输出绝对路径 # D:\P ...
- my-innodb-heavy-4G.cnf配置文件注解
[client] ####客户端 port = 3306 ####mysql客户端连接时的默认端口号 socket = /application/mysql-5.5.32/tmp/mysql.sock ...
- clock()、time()、clock_gettime()和gettimeofday()函数的用法和区别
1. clock_gettime( ) 提供了纳秒的精确度 int clock_gettime(clockid_t clk_id, struct timespect *tp); clockid_t c ...
- Shell记录-Shell命令(其他)
top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器. .命令格式 top [参数] Shell 2.命令功能 显示当前系统正在执行的 ...
- hdu1286 找新朋友
找新朋友 http://acm.hdu.edu.cn/showproblem.php?pid=1286 Time Limit: 2000/1000 MS (Java/Others) Memory ...
- (一)在Lingo中使用集合
1. 在Lingo中使用集合 4.1 集合的基本用法和lingo模型的基本要素 Lingo虽然使用方便,但是如果要解决几万个,几十万个变量的优化问题时,我们总不能一个一个地列出x1,x2,…,x ...