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 相关文章推荐
JQuery Tips(2) 关于$()包装集你不知道的
Dec 14 Javascript
JQuery对表格进行操作的常用技巧总结
Apr 23 Javascript
javascript针对cookie的基本操作实例详解
Nov 30 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
Angular2表单自定义验证器的实现
Oct 19 Javascript
纯js三维数组实现三级联动效果
Feb 07 Javascript
浅谈Vue的加载顺序探讨
Oct 25 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
vue+Element-ui实现分页效果实例代码详解
Dec 10 Javascript
这应该是最详细的响应式系统讲解了
Jul 22 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
Feb 28 Javascript
Vue自定义组件双向绑定实现原理及方法详解
Sep 03 Javascript
麦鸡的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序列化函数serialize() 和 unserialize() 与原生函数对比
2015/05/08 PHP
php生成图片验证码-附五种验证码
2015/08/19 PHP
Linux下编译redis和phpredis的方法
2016/04/07 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
基于ThinkPHP5.0实现图片上传插件
2017/09/25 PHP
smarty模板的使用方法实例分析
2019/09/18 PHP
弹出窗口并且此窗口带有半透明的遮罩层效果
2014/03/13 Javascript
零基础轻松学JavaScript闭包
2016/12/30 Javascript
Vue中自定义全局组件的实现方法
2017/12/08 Javascript
简述vue中的config配置
2018/01/23 Javascript
完美解决axios跨域请求出错的问题
2018/02/05 Javascript
Vue脚手架的简单使用实例
2018/07/10 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
react实现换肤功能的示例代码
2018/08/14 Javascript
Vue路由模块化配置的完整步骤
2019/08/14 Javascript
vue.js中ref和$refs的使用及示例讲解
2019/08/14 Javascript
解决vue使用vant轮播组件swipe + flex时文字抖动问题
2021/01/07 Vue.js
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
Python读写Redis数据库操作示例
2014/03/18 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
六行python代码的爱心曲线详解
2019/05/17 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
python3图片文件批量重命名处理
2019/10/31 Python
keras模型可视化,层可视化及kernel可视化实例
2020/01/24 Python
Python paramiko使用方法代码汇总
2020/11/20 Python
利用HTML5中Geolocation获取地理位置调用Google Map API在Google Map上定位
2013/01/23 HTML / CSS
党员的自我评价范文
2014/01/02 职场文书
书法培训心得体会
2014/01/05 职场文书
音乐教学反思
2014/02/02 职场文书
酒店节能减排方案
2014/05/26 职场文书
辞职信的写法
2015/02/27 职场文书
2015年检验科工作总结
2015/04/27 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
2019交通安全宣传标语集锦!
2019/06/28 职场文书
2019朋友新婚祝福语精选
2019/10/10 职场文书