基于HTML5 drag/drop模块拖动插入排序删除完整实例

by zhangxinxu from http://www.zhangxinxu.com/wordpress/?p=5766
本文可全文转载，但需得到原作者书面许可，同时保留原作者和出处，摘要引流则随意。

一、HTML5 drag/drop模块插入排序删除demo

您可以狠狠地点击这里：HTML5 drag/drop模块插入排序删除demo

上面demo为模块拖拽包装功能完整前提下的最简易demo，模块全部使用一张图片示意。

功能包括：
1. 从左侧小模块缩略区拖动到舞台区域：

2. 舞台模块上下排序：

3. 舞台模块拖到左侧删除：

非常适合作为学习案例，以及在此基础上定制属于自己的模块拖拽功能。

二、HTML5 drag/drop基础知识

关于HTML5 drag/drop基础知识以前有介绍过，可参见“HTML5 drag & drop 拖拽与拖放简介”这篇文章，其中有更简单的案例。

基本上的知识点如下：

1. DataTransfer 对象：退拽拖拽对象用来传递的媒介，使用一般为Event.dataTransfer。
2. draggable 属性：就是标签元素要设置draggable=true，否则不会有效果，例如：

   <div draggable="true">拖拽我</div>

3. ondragstart 事件：当拖拽元素开始被拖拽的时候触发的事件，此事件作用在被拖曳元素上
4. ondragenter 事件：当拖曳元素进入目标元素的时候触发的事件，此事件作用在目标元素上
5. ondragover 事件：拖拽元素在目标元素上移动的时候触发的事件，此事件作用在目标元素上
6. ondrop 事件：被拖拽的元素在目标元素上同时鼠标放开触发的事件，此事件作用在目标元素上
7. ondragend 事件：当拖拽完成后触发的事件，此事件作用在被拖曳元素上
8. Event.preventDefault() 方法：阻止默认的些事件方法等执行。在ondragover中一定要执行preventDefault()，否则ondrop事件不会被触发。另外，如果是从其他应用软件或是文件中拖东西进来，尤其是图片的时候，默认的动作是显示这个图片或是相关信息，并不是真的执行drop。此时需要用用document的ondragover事件把它直接干掉。
9. Event.effectAllowed 属性：就是拖拽的效果。

如果使用jQuery，事件你可以这么写：

$().on({
    dragover: function(event) {
        event.preventDefault();
    },
    dragenter: function(event) {
        event.preventDefault();
    },
    dragstart: function() { },
    dragend: function() {                    
        event.preventDefault();
    }
});

也支持delegate()全局委托。

三、demo页面拖拽脚本的一些说明

首先，所有样式代码和脚本代码都在demo页面上，无需向我索要源代码，页面→右键→查看页面源代码，应该都会的。

代码基于jQuery编写，可以省点事件。另外，兼容性是IE10+以及其他现代浏览器效果OK，不支持IE7-IE9浏览器，因为使用的是原生的HTML5 drag/drop API，一般适合开发一些工具后者内网项目的时候使用。如果对兼容性有要求，大家可以去搜一搜一些复杂的jQuery插件。

所有代码都整个在一个名为moduleDrag的字面量对象之中，如果你觉得此命名有些不合你的口味，可以随意修改，调用的时候很简单，直接：

moduleDrag.init();

如果你希望传一些参数进去，可以在调用init()方法之前，设置下，例如：

moduleDrag.el.body = $('#xxxBody');
moduleDrag.init();

init()初始化方法里面内容很简单，就是使用选择器选择一些需要的元素，然后事件初始化，如下截图：

实际使用的时候，不可能id就按照demo来，元素结构也可能做调整，此时，把上面el = {}对应的元素重新按照你的HTML代码重新获取下就好了。

下面还有很重要的一个点，就是拖拽完了的一些回调什么的。

由于拖拽行为触发的行为非常多，如果真要抽象个什么回调的话，那估计有10多个不同的回调参数，那就复杂了，本来就是个简单的demo，复杂的东西谁用啊？

而且需求千变万化，就算弄10个回调参数出来，也不一定够用，因此，没有抽象成API接口。

大家如果希望拖拽完毕后座什么时候，直接去JS代码中找到对应的事件在哪里，然后自己写在里面，或者自己弄个方法回调啊什么的。

例如216行这里有个插入图片（用大图示意）的代码：

你就可以改成$.ajax()去请求一个HTML片段什么的，插入进去，或者视频，或者iframe等等。

其他一些事件处理也是类似的（如下截图箭头所指，自己的逻辑处理就写在对应位置就好了）。

相当于demo页面的脚本就是打了个架子，然后，可以根据实际的项目需求很容易地加血加肉。

四、结束语

想了很久，不知道结语该说些什么。那我就在此先给大家拜个早年吧，祝大家鸡年快乐，万事如意！

希望本文的内容可以帮助一些小伙伴节约开发时间和成本，如果真的有所帮助，别忘了在评论里点个赞哦！

（本篇完） 是不是学到了很多？可以分享到微信！
有话要说？点击这里。