太原PHP培训
达内太原php培训中心

0351-5608878

热门课程

基于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培训资源站

太原PHP编程开发并发编程槽与坑

Php开发规划自己的路

太原php培训老生常谈php

选择城市和中心
贵州省

广西省

海南省