课程咨询 :13623629309

太原PHP培训 > 达内新闻 > 基于HTML5 drag/drop模块拖动插入排序删除完整实例
  • 基于HTML5 drag/drop模块拖动插入排序删除完整实例

    发布:张鑫旭      来源:张鑫旭      时间:2016-11-15

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

    HTML5 drag/drop基础知识

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

    基本上的知识点如下:

    DataTransfer 对象:退拽对象用来传递的媒介,使用一般为 Event.dataTransfer

    draggable 属性:就是标签元素要设置 draggable=true ,否则不会有效果,例如:

    拖拽我

    ondragstart 事件:当拖拽元素开始被拖拽的时候触发的事件,此事件作用在被拖曳元素上

    ondragenter 事件:当拖曳元素进入目标元素的时候触发的事件,此事件作用在目标元素上

    ondragover 事件:拖拽元素在目标元素上移动的时候触发的事件,此事件作用在目标元素上

    ondrop 事件:被拖拽的元素在目标元素上同时鼠标放开触发的事件,此事件作用在目标元素上

    ondragend 事件:当拖拽完成后触发的事件,此事件作用在被拖曳元素上

    Event.preventDefault() 方法:阻止默认的些事件方法等执行。在 ondragover 中一定要执行 preventDefault() ,否则 ondrop 事件不会被触发。另外,如果是从其他应用软件或是文件中拖东西进来,尤其是图片的时候,默认的动作是显示这个图片或是相关信息,并不是真的执行 drop 。此时需要用用 document ondragover 事件把它直接干掉。

    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代码中找到对应的事件在哪里,然后自己写在里面,或者自己弄个方法回调啊什么的。

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

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

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

    结束语

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

    好了,今天就给大家讲这么多吧,喜欢我的内容可以关注或者分享(微信公众平台:tytedu)选择太原达内培训,不再孤军奋战,轻轻松松做IT高薪白领。太原达内培训带领有明确目标的学子迈向成功之路!

上一篇:面向对象该怎么办

下一篇:不再安全的 OSSpinLock

最新开班日期  |  更多

php高级开发名企定制班(剩2个名额)

php高级开发名企定制班(剩2个名额)

开班日期:12-30

php高级开发周末班(剩5个名额)

php高级开发周末班(剩5个名额)

开班日期:12-30

php高级开发免费试听(剩5个名额)

php高级开发免费试听(剩5个名额)

开班日期:12-30

更多高级开发工程师精品班

更多高级开发工程师精品班

开班日期:12-30

  • 地址:山西省太原市小店区学府街长治路高新国际A座24层
  • 课程培训电话:13623629309     全国服务监督电话:400-827-0010
  • 服务邮箱 ts@tedu.cn
  • 2001-2016 达内国际公司(TARENA INTERNATIONAL,INC.) 版权所有 京ICP证08000853号-56

    在线客服系统