HTML5元素拖拽drag与拖放drop相关API的具体介绍(图文)


本文摘自PHP中文网,作者黄舟,侵删。

其实HTML5就是新增一些有用的API
让我们更轻松的开发
从而把更多精力都放在业务逻辑上来
这些API的使用也非常简单
不过我的记性不太好
所以还是以博客的形式记录下来(手动滑稽)
今天就来写一下这个拖拽API

默认拖拽

说起拖放,其实最早实现拖放功能的还是IE(IE4)
H5就是在IE实例的基础上指定的拖拽规范
在浏览器中,是有默认拖拽的
比如说图片的拖拽

选中文本的拖拽

链接的拖拽

元素拖拽

浏览器默认允许我们拖拽图像、文本以及链接
让其它元素被拖动也是可以实现的
只需要在元素标签上添加一个属性

1

<p draggable="true"></p>

当拖拽这个元素的时候,浏览器就会以半透明复本的方式显示

拖拽事件

拖拽事件应该分为两类
一类是被拖拽元素触发的事件
另一类是拖放目标元素触发的事件

1

<p id="source" draggable="true"></p><p id="target"></p<!-- 样式略 -->

1

var source = document.getElementById('source');var target = document.getElementById('target');

拖拽元素

拖拽元素的时候,被拖拽元素会触发以下事件

  • dragstart

  • drag

  • dragend

当鼠标点中元素并且开始移动时,就会触发dragstart事件(类比mousedown)
拖拽过程中会持续不断地触发drag事件(类比mousemove)
松开鼠标取消拖拽时就会触发dragend事件(类比mouseup)

1

2

3

4

5

6

7

source.ondragstart = function(){

  console.log('开始拖拽');

}source.ondrag = function(){

  console.log('拖拽中');

}source.ondragend = function(){

  console.log('拖拽结束');

}

目标元素

当拖拽的元素拖到一个目标元素上时,目标元素会触发以下事件

  • dragenter

  • dragover

  • dragleave

  • drop

拖拽元素到目标上,就会触发dragenter事件(类比mouseover)
当拖动元素在目标元素中,就会持续触发dragover事件
离开目标元素,触发dragleave事件(类比mouseout)
若拖放元素到了目标元素中(在目标元素中松开鼠标),就会触发drop事件而不会触发dragleave事件

阅读剩余部分

相关阅读 >>

HTML5标准学习-简介介绍

HTML5/css3 网页加载进度条的实现,下载进度条等经典案例

HTML5中在用户可以开始播放视频/音频时触发的事件oncanplay

HTML5 datalist标签的用法是什么?这里有datalist标签的用法实例

h5的所有元素及基本语法归纳

HTML5能干什么?详解HTML5的功能

如何在微信端HTML5页面调用分享接口

HTML5和js绘制图片到canvas的方法

HTML5实践-使用css制作时间icon的具体详解(图)

h5视频中背景音乐如何自动播放

更多相关阅读请进入《HTML5》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...

    正在狠努力加载,请稍候...