H5中的拖拽事件
最近浏览了张鑫旭大神的基于HTML5 drag/drop模块拖动插入排序删除完整实例,感觉受益匪浅。于是将最做的demo记录下来。
首先浏览一下事件,这些事件比较好记,只要记住用在谁的身上就好了,无非是被推拽的元素和目标元素。
被拖拽元素上触发的事件:
1.ondragstart - 用户开始拖动元素时触发
2.ondrag - 元素正在拖动时触发
3.ondragend - 用户完成元素拖动后触发
目标元素上触发的事件:
1.ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件
2.ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件
3.ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件
4.ondrop - 在一个拖动过程中,释放鼠标键时触发此事件
另外需要的知识点就是event对象中的preventDefault()。引用张大神的原话:在ondragover
中一定要执行preventDefault()
,否则ondrop
事件不会被触发。另外,如果是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,并不是真的执行drop
。此时需要用用document
的ondragover
事件把它直接干掉。
于是乎我照样子做了个小demo,很好理解。代码如下:
html:
<div class="left" id = 'trash'>垃圾箱</div>
<div class="right">
<ul>
<li draggable = 'true'>1</li>
<li draggable = 'true'>2</li>
<li draggable = 'true'>3</li>
<li draggable = 'true'>4</li>
</ul>
</div>
css:
.left{
width: 100px;
height: 400px;
float: left;
margin-left: 20px;
margin-top: 20px;
background: #ccc;
font-size: 100px;
color: #fff;
}
.right{
width: 200px;
height: 400px;
float: left;
background: #fff;
margin-top: 20px;
cursor: move;
}
ul{
margin:;
padding:;
}
ul>li{
height:80px;
margin-bottom: 20px;
text-align: center;
list-style-type: none;
background: #f90;
line-height: 80px;
}
js
var arr_li = document.getElementsByTagName('li');
var trash = document.getElementById('trash');
var index = null;
for(var i = 0; i < arr_li.length; i++){
this.ondragstart = function(event){
event.dataTransfer.getData('text',event.target.innerHTML);
trash.style.color = 'red';
trash.innerHTML = '删除';
index = event.target;
this.style.cursor = 'move';
}
this.ondragend = function(event){
trash.style.color = '#fff';
trash.innerHTML = '垃圾箱';
}
}
trash.ondragover = function(event){
event.preventDefault();
}
trash.ondragenter = function(event){
this.style.color = 'blue';
}
trash.ondragleave = function(event){
this.style.color = 'red';
}
trash.ondrop = function(event){
event.preventDefault();
this.style.color = "#fff";
this.innerHTML = '垃圾箱';
index.parentNode.removeChild(index);
}
简单的效果图如下:
H5中的拖拽事件的更多相关文章
- [Qt]Qt中TreeWidget拖拽事件
文章在简书里啦 http://www.jianshu.com/p/45b740060aca
- 用H5自带拖拽做出购物车效果的作业题
效果描述: 图片代表物品,图片在有宽高的div上方显示,把图片拖放到设置好的div里面,并且在div里面显示图片的信息:价格,物品名,数量.如果拖放有重复,只是在div里面让物品的数量加1,最后计算出 ...
- H5原生拖拽事件
使用原生js实现简单的拖拽事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...
- html5拖拽事件 xhr2 实现文件上传 含进度条
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- iOS开发拓展篇—xib中关于拖拽手势的潜在错误
iOS开发拓展篇—xib中关于拖拽手势的潜在错误 一.错误说明 自定义一个用来封装工具条的类 搭建xib,并添加一个拖拽的手势. 主控制器的代码:加载工具条 封装工具条以及手势拖拽的监听事件 此时运行 ...
- HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态
多媒体 video:是行内块(text-align: center; 对行内块适用) <figure></figure>: 多媒体标签 : <figcaption> ...
- iOS - xib中关于拖拽手势的潜在错误
iOS开发拓展篇—xib中关于拖拽手势的潜在错误 一.错误说明 自定义一个用来封装工具条的类 搭建xib,并添加一个拖拽的手势. 主控制器的代码:加载工具条 封装工具条以及手势拖拽的监听事件 此时运行 ...
- Duilib嵌入CEF禁止浏览器响应拖拽事件
转载:http://blog.csdn.net/liuyan20092009/article/details/53819473 转载:https://blog.csdn.net/u012778714( ...
- Android Launcher拖拽事件详解【android4.0--Launcher系列二】
AndroidICS4.0版本的launcher拖 拽的流程,基本和2.3的相似.就是比2.3写的封装的接口多了一些,比如删除类的写法就多了个类.等等.4.0的改变有一些,但是不是特别大.这个月一 直 ...
随机推荐
- dscp hftp
http://blog.163.com/caipeipei_love@126/blog/static/25966032201142712856862/
- python Tornado(招聘的一个比较经常问到的知识)
Tornado既是一个webserver也是一个web框架 这是一个总结的比较详细的内容 http://www.nowamagic.net/academy/detail/1332612 开源中国中的关 ...
- Python 操作FTP
import sys, os, ftplib, socket CONST_HOST = "FTP服务器地址" CONST_USERNAME = "FTP用户名" ...
- 已解决: 已引发: "无法加载 DLL“opencv_core2410”: 找不到指定的模块。
之前是win7 32位系统,程序运行没有问题:换了64位 win7后,系统就找不到opencv相关库了,网上各种查询解决方法,感觉不太可行,或者很麻烦...多次试验后,找到方便关键的解决方案如下: 计 ...
- Servlet学习三——传输文件
最先在考虑传输文件时,想通过java写一个文件上传案例,传给Servlet,Servlet再保存至数据库中,但苦于一直没找到实例,听说Flex有实际的例子,就直接用Flex例子来测试了.本文的顺序为: ...
- angularjs(一)基础概念
一.前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,作为一名业界新秀,紧跟时代潮流,学习掌握新知识自然是不敢怠慢.当听到AngularJs这个名字并知道是google在维 ...
- oracle 队列
Oracle 高级队列(AQ) 适用对象:初步了解oracle高级队列人群 注意事项: 序号 注意事项 1 JMS监听部分可参考官方文档: http://docs.oracle.com/cd/e128 ...
- 在JSP中使用JavaBean
//创建一个PersonBean类 public class PersonBean { private String name; private int age; public Pe ...
- I/O流——字节流
流的概念 流是一个很形象的概念,当程序需要读取数据的时候,就会开启一个通向数据源的流,这个数据源可以使文件,内存,或是网络连接.类似的,当程序需要写入数据的时候,就会开启一个通向目的地的流.这时候你就 ...
- Linux入门学习,开启端口号
之前买了一个阿里云Centos 7服务器,默认开启22端口和80端口,想开启其他端口号如何做 1.开启端口号 [root@localhost ~]# /sbin/iptables -I INPUT - ...