javascript 拖拽JavaScript Google IG Drag Demo，非常棒的拖动，准备用于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.82 KB ,下载: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 以及拖拽到了哪个元素的前面然后传给服务器端去修改就可 以了。 Update 2007-01-26 1:22 加了个加强版的，效果请看 Demo。其实就是加了个函数，让他保证左上方那个大块只会有一个元素，如 果超过一个则把后面的挤到下面的第一列去，如果没有元素则从下面的第一列拿出第一个元素放到左上方 的大块中，如果下面的第一列没有元素，则找第二列，第三列。

　　推荐阅读

　　解读IE和firefox下JScript和HREF的执行顺序

很久都没有写关于代码方面的文章了。主要原因还是因为最近的工作都集中在需求分析方面，没有了现实中的感触，就没有了写作的动机。讨论一个关于JScript执行顺序的问题。示例代码如下： a.htm <A onmouseup="func('>>>详细阅读

本文标题：javascript支持firefox,ie7页面布局拖拽效果代码

地址：http://www.17bianji.com/kaifa2/JS/29910.html

 1/2    1