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 事件小结 表格区别
Aug 13 Javascript
jQuery 动画基础教程
Dec 25 Javascript
使用jQuery轻松实现Ajax的实例代码
Aug 16 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
JavaScript编程的10个实用小技巧
Apr 18 Javascript
node.js中的http.response.write方法使用说明
Dec 14 Javascript
浅谈下拉菜单中的Option对象
May 10 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
Jan 09 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
详解如何webpack使用DllPlugin
Sep 30 Javascript
微信小程序实现点击空白隐藏的方法示例
Aug 13 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 array_slice函数的使用以及参数详解
2008/08/30 PHP
PHP 反射机制实现动态代理的代码
2008/10/22 PHP
PHP表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
使用php判断服务器是否支持Gzip压缩功能
2013/09/24 PHP
zf框架db类的分页示例分享
2014/03/14 PHP
ThinkPHP模板循环输出Volist标签用法实例详解
2016/03/23 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
jQuery EasyUI NumberBox(数字框)的用法
2010/07/08 Javascript
对 jQuery 中 data 方法的误解分析
2014/06/18 Javascript
JavaScript将数字转换成大写中文的方法
2015/03/23 Javascript
js面向对象之公有、私有、静态属性和方法详解
2015/04/17 Javascript
编写高质量JavaScript代码的基本要点
2016/03/02 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
jQuery命名空间与闭包用法示例
2017/01/12 Javascript
JS简单判断函数是否存在的方法
2017/02/13 Javascript
php输出全部gb2312编码内的汉字方法
2017/03/04 Javascript
基于JavaScript实现图片剪切效果
2017/03/07 Javascript
详解Vue.js Mixins 混入使用
2017/09/15 Javascript
vue2组件之select2调用的示例代码
2017/10/12 Javascript
详解node.js中的npm和webpack配置方法
2018/01/21 Javascript
[46:23]完美世界DOTA2联赛PWL S2 FTD vs Magma 第一场 11.20
2020/11/23 DOTA
python获得图片base64编码示例
2014/01/16 Python
Python制作CSDN免积分下载器
2015/03/10 Python
简单实现python爬虫功能
2015/12/31 Python
基于Python 的进程管理工具supervisor使用指南
2016/09/18 Python
Python轻量级ORM框架Peewee访问sqlite数据库的方法详解
2017/07/20 Python
Pytorch之卷积层的使用详解
2019/12/31 Python
扩大国家免疫规划实施方案
2014/03/21 职场文书
购房协议书
2014/04/11 职场文书
销售助理岗位职责
2015/02/11 职场文书
假如给我三天光明读书笔记
2015/06/26 职场文书
php 原生分页
2021/04/01 PHP
Vue项目打包、合并及压缩优化网页响应速度
2021/07/07 Vue.js
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android