javascript支持firefox,ie7页面布局拖拽效果代码


Posted in Javascript onDecember 20, 2007

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

拖拽效果的页面效果演示地址:http://img.3water.com/online/tuozhuai/google_drag.htm
加强版效果演示地址:http://img.3water.com/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。其实就是加了个函数,让他保证左上方那个大块只会有一个元素,如
果超过一个则把后面的挤到下面的第一列去,如果没有元素则从下面的第一列拿出第一个元素放到左上方
的大块中,如果下面的第一列没有元素,则找第二列,第三列。 

Javascript 相关文章推荐
javascript正则表达式之search()用法实例
Jan 19 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
Apr 06 Javascript
javascript中html字符串转化为jquery dom对象的方法
Aug 27 Javascript
jquery点击展示与隐藏更多内容
Dec 03 Javascript
浅谈jQuery中事情的动态绑定
Feb 12 Javascript
JavaScript闭包_动力节点Java学院整理
Jun 27 Javascript
微信小程序http连接访问解决方案的示例
Nov 05 Javascript
浅入深出Vue之组件使用
Jul 11 Javascript
JavaScript判断浏览器版本的方法
Nov 03 Javascript
vue-cli点击实现全屏功能
Mar 07 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 Vue.js
jquery实现淡入淡出轮播图效果
Dec 13 jQuery
麦鸡的TAB切换功能结合了javascript和css
Dec 17 #Javascript
用javascript来实现动画导航效果的代码
Dec 16 #Javascript
不用ajax实现点击文字即可编辑的方法
Dec 16 #Javascript
JS是否可以跨文件同时控制多个iframe页面的应用技巧
Dec 16 #Javascript
Javascript常用运算符(Operators)-javascript基础教程
Dec 14 #Javascript
javascript实现仿银行密码输入框效果的代码
Dec 13 #Javascript
CLASS_CONFUSION JS混淆 全源码
Dec 12 #Javascript
You might like
php启用zlib压缩文件的配置方法
2013/06/12 PHP
php 伪造ip以及url来路信息方法汇总
2014/11/25 PHP
php导出生成word的方法
2015/12/25 PHP
ThinkPHP+EasyUI之ComboTree中的会计科目树形菜单实现方法
2017/06/09 PHP
ExtJS 学习专题(一) 如何应用ExtJS(附实例)
2010/03/11 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
JS获取iframe中marginHeight和marginWidth属性的方法
2015/04/01 Javascript
jQuery实现横向带缓冲的水平运动效果(附demo源码下载)
2016/01/29 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
在web中js实现类似excel的表格控件
2016/09/01 Javascript
微信小程序 Image API实例详解
2016/09/30 Javascript
AngularJS入门教程之数据绑定用法示例
2016/11/01 Javascript
轻松实现jQuery添加删除按钮Click事件
2017/03/13 Javascript
vue 实现全选全不选的示例代码
2018/03/29 Javascript
Vue 中axios配置实例详解
2018/07/27 Javascript
js实现简单选项卡功能
2020/03/23 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
js仿淘宝放大镜效果
2020/12/28 Javascript
JS中循环遍历数组的四种方式总结
2021/01/23 Javascript
python使用cStringIO实现临时内存文件访问的方法
2015/03/26 Python
python snownlp情感分析简易demo(分享)
2017/06/04 Python
Flask之pipenv虚拟环境的实现
2019/11/26 Python
Lombok插件安装(IDEA)及配置jar包使用详解
2020/11/04 Python
使用HTML和CSS3绘制基本卡通图案的示例分享
2015/11/06 HTML / CSS
Html5实现用户注册自动校验功能实例代码
2016/05/24 HTML / CSS
荷兰的时尚市场:To Be Dressed
2019/05/06 全球购物
售后服务科岗位职责范文
2013/11/13 职场文书
葡萄牙语专业个人求职信
2013/12/10 职场文书
建筑设计学生的自我评价
2014/01/16 职场文书
妈妈的账单教学反思
2014/02/06 职场文书
婚前保证书范文
2015/02/28 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
社区青年志愿者活动总结
2015/05/06 职场文书
2015年幼儿园卫生保健工作总结
2015/05/12 职场文书