你好,游客 登录
背景:
阅读新闻

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

[日期:2016-11-18] 来源:网络  作者: [字体: ]

一、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页面的脚本就是打了个架子,然后,可以根据实际的项目需求很容易地加血加肉。

四、结束语

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

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

收藏 推荐 打印 | 录入:admin | 阅读:
相关新闻      
本文评论   查看全部评论 (0)
表情: 表情 姓名: 字数
点评:
       
评论声明
  • 尊重网上道德,遵守中华人民共和国的各项有关法律法规
  • 承担一切因您的行为而直接或间接导致的民事或刑事法律责任
  • 本站管理人员有权保留或删除其管辖留言中的任意内容
  • 本站有权在网站内转载或引用您的评论
  • 参与本评论即表明您已经阅读并接受上述条款