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

这篇文章发布于 2016年11月15日,星期二,00:01,归类于 JS实例。 阅读 60536 次, 今日 3 次 34 条评论

 

一、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。此时需要用用documentondragover事件把它直接干掉。
  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页面的脚本就是打了个架子,然后,可以根据实际的项目需求很容易地加血加肉。

四、结束语

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

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

(本篇完)

分享到:


发表评论(目前34 条评论)

  1. qnlz说道:

    发现同一张图片第二次拖拽时,网站就会崩溃

  2. 张华宇说道:

    旭哥,我在ondragstart事件中执行了ev.dataTransfer.setData(“Text”,“123”); 为什么在ondragover事件中ev.dataTransfer.getData(“Text”) 拿不到我set的值 呢? 求指教

  3. M说道:

    真的太有用了!现在向旭哥看齐啊!

  4. ddd说道:

    火狐的拖拽事件禁止不了啊,老是打开新窗口 怎么破.阻止默认事件也没用 咋办 求解

    • Nicholas说道:

      event.originalEvent.dataTransfer.setData(‘text/plain’, “”); 把第二个参数改成空好像就没事了

  5. yy说道:

    正需要啊,太感谢了

  6. 慰农说道:

    学习了

  7. john说道:

    CL_DRAGENTER 这几个类名有什么实际作用吗

  8. Necessary说道:

    诶 正需要—感谢

  9. 王小二说道:

    请教一个问题:
    javascript中使用对象字面量创建对象。直接贴一个吧:

    栗1
    var o = {
    a:[1,2,3],
    b:o.a[0]
    }

    运行报错。

    但如果这么写:
    栗2
    var o = {a:[1,2,3]};
    o.b = o.a[0];
    console.log(o);
    属性被正常创建,结构也没问题。

    改下栗1:

    栗3:
    var o = {a:o.b[0],b:[1,2,3]};
    和栗1一样报错。

    结论:
    通过栗1和栗3的报错,栗2的正常比较,两种情况下不同点是:栗2中先创建了o
    对象的a属性。所以总结是: 报错是因为找不到属性a 。

    猜测:
    通过栗1和栗3,两种情况不同点是:颠倒了引用顺序(栗1: b引用a 栗3:a引用b),但两种情况下都报错了,说明这两种情况下被引用的那个属性都不存在。所以有以下两种猜测:
    1 属性被同时创建
    2 属性是异步创建的

    仔细想想还是觉得第二种猜测正确的几率大一些:如果一个对象被使用字面量直接创建时有很多属性甚至有多层的嵌套时+计算机的处理机制,是不可能同时去创建所有的属性的。

    但网上没找到相应的资料,自己的时间不够去做各种测试,所以偷个懒来问问大神。
    求指点!!!
    有结果的话请发我QQ: 1017894741
    迫切想知道真相!!!

  10. Diane说道:

    在谷歌下,拖过去了根本留不住啊,一放鼠标就回去了。为什么啊

  11. xuancao说道:

    我发现了一个问题今天,就是在网速很慢的情况下,还没有获得jquery插件,就已经开始初始化,导致$ 没有定义。

  12. 渣渣说道:

    最近比较能产 🙂

  13. 路人甲说道:

    66666

  14. 知了说道:

    很有用,每个月都看旭哥的发的 ,赞一个。很适合我这样的菜鸟学习

  15. web二傻说道:

    不得不说,你真的很牛逼,我服了。你就是我的God!!!

  16. 蒲公英小黎说道:

    你好,我想问一下,最近一个后台项目,有用到表格,关于表格tablebody部分滚动我一直没有找到合理的解决方案,目前是tablehead和tablebody是两个独立的部分,tablebody用div包裹了加滚动条(设计又不让滚动条出现在表头的地方),但是tablebody的内容在出现滚动条的时候不能和表头对齐,就算不用table布局,也会出现这个情况,请问你有遇到过么?或者有什么比较好的解决方案么?

  17. billzbc说道:

    最近高产似~~

  18. GIN说道:

    沙发 拜读

  19. 墨染说道:

    占沙发

  20. yuren说道:

    赞,最近刚好会用到

  21. 不二很纯洁说道:

    基本上的知识点如下:

    DataTransfer 对象:退拽对象用来传递的媒介…
    应该是拖拽吧

  22. long说道:

    代码好像不兼容火狐

  23. zhangolve说道:

    文章不错!真的是好早的拜年啊。

  24. bruce说道:

    火狐下没有拖不动呀~