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 相关文章推荐
js实现页面跳转重定向的几种方式
May 29 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
Oct 17 Javascript
AngularJS中实现显示或隐藏动画效果的方式总结
Dec 31 Javascript
javascript实现粘贴qq截图功能(clipboardData)
May 29 Javascript
利用原生JS自动生成文章标题树的实例
Aug 22 Javascript
javascript iframe跨域详解
Oct 26 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
mpvue 如何使用腾讯视频插件的方法
Jul 16 Javascript
JS实现简单的点赞与踩功能示例
Dec 05 Javascript
Vue.js中的高级面试题及答案
Jan 13 Javascript
JavaScript获取时区实现过程解析
Sep 24 Javascript
vue浏览器返回监听的具体步骤
Feb 03 Vue.js
麦鸡的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
生成sessionid和随机密码的例子
2006/10/09 PHP
discuz加密解密函数使用方法和中文注释
2014/01/21 PHP
php5.4以上版本GBK编码下htmlspecialchars输出为空问题解决方法汇总
2015/04/03 PHP
php is_writable判断文件是否可写实例代码
2016/10/13 PHP
实例介绍PHP中zip_open()函数用法
2019/02/15 PHP
JavaScript 高级篇之闭包、模拟类,继承(五)
2012/04/07 Javascript
推荐4个原生javascript常用的函数
2015/01/12 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
vue实现全选、反选功能
2020/11/17 Javascript
完美解决手机网页中输入框被输入法遮挡的问题
2017/12/19 Javascript
解决angularjs前后端分离调用接口传递中文时中文乱码的问题
2018/08/13 Javascript
vue.js编译时给生成的文件增加版本号
2018/09/17 Javascript
vue-cli 打包后提交到线上出现 "Uncaught SyntaxError:Unexpected token" 报错
2018/11/06 Javascript
彻底揭秘keep-alive原理(小结)
2019/05/05 Javascript
JavaScript使用表单元素验证表单的示例代码
2019/08/20 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
[56:17]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
Django压缩静态文件的实现方法详析
2018/08/26 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
python错误调试及单元文档测试过程解析
2019/12/19 Python
pandas 对group进行聚合的例子
2019/12/27 Python
在python3中实现查找数组中最接近与某值的元素操作
2020/02/29 Python
jupyter notebook 多环境conda kernel配置方式
2020/04/10 Python
pytorch 计算ConvTranspose1d输出特征大小方式
2020/06/23 Python
Python使用urlretrieve实现直接远程下载图片的示例代码
2020/08/17 Python
世界上最大的汽车共享网站:Zipcar
2017/01/14 全球购物
汽车检测与维修应届毕业生求职信
2013/10/19 职场文书
晚会邀请函范文
2014/01/24 职场文书
学习十八届三中全会精神实施方案
2014/02/17 职场文书
2015元旦家电促销活动策划方案
2014/12/09 职场文书
浅谈JS的原型和原型链
2021/06/04 Javascript
MYSQL常用函数介绍
2022/05/05 MySQL