最近浏览了张鑫旭大神基于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. table变色

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

  2. JDBC步骤

    总结JDBC五步骤: 1.Class.forName 加载驱动 2.conn = (Connection) DriverManager.getConnection(url, user, passwor ...

  3. 新年SO交期更新——FP_SO2SAP

    (一)         以下逻辑落在12月26日-2月4日生效,2月5日此段逻辑失效: (二)         针对SO创建日期落在N-1天的新单进行处理: (三)         根据FP运算逻辑: ...

  4. jenkins入门

    look at http://www.cnblogs.com/itech/archive/2011/11/23/2260009.html

  5. Java NIO教程 目录

    "Java NIO系列教程" 是笔者hans为NIO的初学者编写的一份入门教程,想仔细学习的同学可以按照顺序去阅读.由于我学的也不是特别的精,所以错误.疏漏在所难免,希望同学们指正 ...

  6. 初步认识html以及表格的制作

    12.21,冬至,天空中还下着小雨,雾霾也没有散去,但是也没有冲散节日的气氛,心情也是倍儿好. 今天学习了不少的内容,对我来说是对之前所学的一个巩固,内容比较多也比较杂乱一些,下面以例子的形式来表现: ...

  7. git 实用操作

    查看某文件的某些行的变化历史: $ git log --pretty=short -u -L 2003,2005:Executor.cpp http://stackoverflow.com/quest ...

  8. ABP 仓储VIEW实现

    每个view实体加个ID 对应实体属性配置到View的列 View添加一列类似自增序列 ROW_NUMBER() OVER(ORDER BY getdate()) AS ID codefirst时 删 ...

  9. Git常用命令学习(2)

    1):git branch -v --查看每一个分支的最后一次提交2):git branch --merged 与 --no-merged 这两个有用的选项可以过滤这个列表中已经合并或尚未合并到当前分 ...

  10. object.bind()方法的低版本兼容

    Function.prototype.bind= function(obj){ var _self = this, args = arguments; return function() { _sel ...