最近浏览了张鑫旭大神基于HTML5 drag/drop模块拖动插入排序删除完整实例,感觉受益匪浅。于是将最做的demo记录下来。

  首先浏览一下事件,这些事件比较好记,只要记住用在谁的身上就好了,无非是被推拽的元素和目标元素。

    被拖拽元素上触发的事件:

  1.ondragstart - 用户开始拖动元素时触发

  2.ondrag - 元素正在拖动时触发

  3.ondragend - 用户完成元素拖动后触发

    目标元素上触发的事件:

  1.ondragenter - 当被鼠标拖动的对象进入其容器范围内时触发此事件

  2.ondragover - 当某被拖动的对象在另一对象容器范围内拖动时触发此事件

  3.ondragleave - 当被鼠标拖动的对象离开其容器范围内时触发此事件

  4.ondrop - 在一个拖动过程中,释放鼠标键时触发此事件

  另外需要的知识点就是event对象中的preventDefault()。引用张大神的原话:在ondragover中一定要执行preventDefault(),否则ondrop事件不会被触发。另外,如果是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,并不是真的执行drop。此时需要用用documentondragover事件把它直接干掉。

  于是乎我照样子做了个小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中的拖拽事件的更多相关文章

  1. [Qt]Qt中TreeWidget拖拽事件

    文章在简书里啦 http://www.jianshu.com/p/45b740060aca

  2. 用H5自带拖拽做出购物车效果的作业题

    效果描述: 图片代表物品,图片在有宽高的div上方显示,把图片拖放到设置好的div里面,并且在div里面显示图片的信息:价格,物品名,数量.如果拖放有重复,只是在div里面让物品的数量加1,最后计算出 ...

  3. H5原生拖拽事件

    使用原生js实现简单的拖拽事件 <!DOCTYPE html> <html lang="en"> <head> <meta charset ...

  4. html5拖拽事件 xhr2 实现文件上传 含进度条

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  5. iOS开发拓展篇—xib中关于拖拽手势的潜在错误

    iOS开发拓展篇—xib中关于拖拽手势的潜在错误 一.错误说明 自定义一个用来封装工具条的类 搭建xib,并添加一个拖拽的手势. 主控制器的代码:加载工具条 封装工具条以及手势拖拽的监听事件 此时运行 ...

  6. HTML5 02. 多媒体控件、拖拽事件、历史记录、web存储、应用程序缓存、地理定位、网络状态

    多媒体 video:是行内块(text-align: center; 对行内块适用) <figure></figure>: 多媒体标签 : <figcaption> ...

  7. iOS - xib中关于拖拽手势的潜在错误

    iOS开发拓展篇—xib中关于拖拽手势的潜在错误 一.错误说明 自定义一个用来封装工具条的类 搭建xib,并添加一个拖拽的手势. 主控制器的代码:加载工具条 封装工具条以及手势拖拽的监听事件 此时运行 ...

  8. Duilib嵌入CEF禁止浏览器响应拖拽事件

    转载:http://blog.csdn.net/liuyan20092009/article/details/53819473 转载:https://blog.csdn.net/u012778714( ...

  9. Android Launcher拖拽事件详解【android4.0--Launcher系列二】

    AndroidICS4.0版本的launcher拖 拽的流程,基本和2.3的相似.就是比2.3写的封装的接口多了一些,比如删除类的写法就多了个类.等等.4.0的改变有一些,但是不是特别大.这个月一 直 ...

随机推荐

  1. dscp hftp

    http://blog.163.com/caipeipei_love@126/blog/static/25966032201142712856862/

  2. python Tornado(招聘的一个比较经常问到的知识)

    Tornado既是一个webserver也是一个web框架 这是一个总结的比较详细的内容 http://www.nowamagic.net/academy/detail/1332612 开源中国中的关 ...

  3. Python 操作FTP

    import sys, os, ftplib, socket CONST_HOST = "FTP服务器地址" CONST_USERNAME = "FTP用户名" ...

  4. 已解决: 已引发: "无法加载 DLL“opencv_core2410”: 找不到指定的模块。

    之前是win7 32位系统,程序运行没有问题:换了64位 win7后,系统就找不到opencv相关库了,网上各种查询解决方法,感觉不太可行,或者很麻烦...多次试验后,找到方便关键的解决方案如下: 计 ...

  5. Servlet学习三——传输文件

    最先在考虑传输文件时,想通过java写一个文件上传案例,传给Servlet,Servlet再保存至数据库中,但苦于一直没找到实例,听说Flex有实际的例子,就直接用Flex例子来测试了.本文的顺序为: ...

  6. angularjs(一)基础概念

    一.前言 前端技术的发展是如此之快,各种优秀技术.优秀框架的出现简直让人目不暇接,作为一名业界新秀,紧跟时代潮流,学习掌握新知识自然是不敢怠慢.当听到AngularJs这个名字并知道是google在维 ...

  7. oracle 队列

    Oracle 高级队列(AQ) 适用对象:初步了解oracle高级队列人群 注意事项: 序号 注意事项 1 JMS监听部分可参考官方文档: http://docs.oracle.com/cd/e128 ...

  8. 在JSP中使用JavaBean

    //创建一个PersonBean类 public class PersonBean {    private String name;    private int age;    public Pe ...

  9. I/O流——字节流

    流的概念 流是一个很形象的概念,当程序需要读取数据的时候,就会开启一个通向数据源的流,这个数据源可以使文件,内存,或是网络连接.类似的,当程序需要写入数据的时候,就会开启一个通向目的地的流.这时候你就 ...

  10. Linux入门学习,开启端口号

    之前买了一个阿里云Centos 7服务器,默认开启22端口和80端口,想开启其他端口号如何做 1.开启端口号 [root@localhost ~]# /sbin/iptables -I INPUT - ...