javascript支持firefox,ie7页面布局拖拽效果代码
javascript支持firefox,ie7页面布局拖拽效果代码
发布时间:2016-12-30 来源:查字典编辑
摘要:javascript拖拽JavaScriptGoogleIGDragDemo,非常棒的拖动,准备用于F2Blog新Theme的后台模块设置,...

javascript拖拽JavaScriptGoogleIGDragDemo,非常棒的拖动,准备用于F2Blog新Theme的后台模块设置,之间的拖

拖拽效果的页面效果演示地址:http://img.jb51.net/online/tuozhuai/google_drag.htm

加强版效果演示地址:http://img.jb51.net/online/tuozhuai/google_drag2.htm

拖拽原理:

关于拖拽的基础,可以参考这篇文章,讲得非常不错。

其实原理很简单,就是把绑定三个事件:onmousedown,onmousemove,onmouseup。

在鼠标点下时(onmousedown)把元素的坐标设置为鼠标的坐标,并把position设置为绝对坐标。

在鼠标移动时(onmousemove)改变元素坐标。

在鼠标弹起时(onmouseup)取消绑定的事件,并做后续操作。

javascript拖拽下面是关于仿google个性化主页拖拽效果的一个Demo(需包含prototype)。完整下载包:Google

Drag.rar(19.82KB,下载:247次)

总共有四个文件:

google_drag.html

prototype.js

通用拖拽函数drag.js

仿google个性化主页的拖拽google_drag.js

google_drag.html中最后几行中有个初始化拖拽函数

window.onload=function(){initDrag();}

必须写成这样,如果直接写成

window.onload=initDrag();

这样会在IE下报个错误:尚未实现

其他代码可以直接查看源码,就几行注释。其实就是用JavaScript绘制了15个div,然后设置它们

class都为drag_div(后面是通过className来判断元素是否可拖拽),然后把可拖拽的部分的ID设置

元素的ID后加个_h(也可设置自己为拖拽部分)

drag.js是一个比较通用的拖拽函数。里面包含四个最简单的函数:start_Drag,when_Drag,end_Drag,

after_Drag。这四个函数只是实现最基本的拖拽功能,要实现其他功能可修改或在后面覆盖掉这些函数。

google_drag.js是仿google个性化主页拖拽效果的函数。它覆盖了上面说的那个四个函数,实现比较

高级的效果。

拖拽其实应该还是比较简单的,实现完拖拽后就是要用Ajax来传递拖拽后的位置,改变服务器端的值,

这样下次用户访问时元素才会位置不变。效果的实现是非常简单的,主要是怎么融合到已有的项目中,从

而提高用户体验。

这个Demo有一部分参考的网上的代码。

在网上还有很多这种例子,不过感觉效率都没这个高。有一些例子是把所有元素的位置都设置为

absolute,然后直接修改各个元素的top和left来显示效果,感觉那个不是很通用,那样的话比如我要

把这个效果修改为一个数的拖拽,并且记录各个元素之间的位置,比较麻烦。这个例子中要记录元素的位

置,只需在拖拽完成后记录被拖拽元素的id以及拖拽到了哪个元素的前面然后传给服务器端去修改就可

以了。

Update2007-01-261:22

加了个加强版的,效果请看Demo。其实就是加了个函数,让他保证左上方那个大块只会有一个元素,如

果超过一个则把后面的挤到下面的第一列去,如果没有元素则从下面的第一列拿出第一个元素放到左上方

的大块中,如果下面的第一列没有元素,则找第二列,第三列。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类