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

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。其实就是加了个函数，让他保证左上方那个大块只会有一个元素，如
果超过一个则把后面的挤到下面的第一列去，如果没有元素则从下面的第一列拿出第一个元素放到左上方
的大块中，如果下面的第一列没有元素，则找第二列，第三列。

赞 (0)

相关推荐

  • javascript拖拽上传类库DropzoneJS使用方法

    用法 1. add js and css style 复制代码 代码如下: <link href="~/Dropzone/css/basic.css" rel="stylesheet" /> <link href="~/Dropzone/css/dropzone.css" rel="stylesheet" /> <script src="~/Dropzone/dropzone.min.j

  • 关于js拖拽上传 [一个拖拽上传修改头像的流程]

    关于js拖拽上传 [一个拖拽上传修改头像的流程]

    如今现代的浏览器已经有很多支持拖拽文件读取操作,其优点不再复述.前端时间利用拖拽改进了一下网站的头像上传流程,对其中的要点和实践体会做一点总结. 先看一下总体视图:1. 文件拖拽接受区域要有明显的标示,并且要尽可能的大(由于版面的原因,这个界面的拖放盒子并不大).可以用虚线框盒子等样式吸引用户拖拽文件.最好有明显的文字提示和图标配合. 2. 在交互体验上当文件拖入浏览器窗口时,可以用拖放区变换背景颜色等向用户发起放置操作邀请. 实现代码: 复制代码 代码如下: doc.bind({ 'drage

  • JQuery Dialog(JS 模态窗口,可拖拽的DIV)

    JQuery Dialog(JS 模态窗口,可拖拽的DIV)

    效果图 调用示意图 交互示意图 如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的"提交"按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户提交事件. 2.用OO的概念来说,JQueryDialog.Ok()其实是一个虚函数,它的逻辑封装在子窗口ContentWindow.Ok()中,这一点我借鉴了FCKEditor,如下代码所示: JS代码 复制代码 代码如下: var JQueryDialog = { /// <summ

  • js完美的div拖拽实例代码

    复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

  • Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性第1/2页

    Javascript拖拽系列文章2之offsetLeft、offsetTop、offsetWidth、offsetHeight属性第1/2页

    在阅读本文之前,请先看一看第一篇文章Javascript拖拽系列文章1之offsetParent属性,因为循序渐进是一个很好的习惯,值得提倡.好了,看看我们今天的内容吧. 首先让我们先看一看element.offsetLeft属性. 支持的浏览器:Internet Explorer 4.0+,Mozilla 1.0+,Netscape 6.0+,Opera 7.0+,Safari 1.0+ 定义:返回一个像素数值,它表示当前元素的左边缘到它的offsetParent属性返回的对象左边缘的偏移量.

  • 百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome

    百度Popup.js弹出框进化版 拖拽小框架发布 兼容IE6/7/8,Firefox,Chrome

    我们之前发布过这样的代码,其实问题不大,但这里的版本主要是增加一些功能,回调执行服务器端的方法,对于asp.net开发或ajax开发都是非常有价值的改进.先看下效果图: 原有百度的Popup.js在有 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"

  • js实现拖拽效果

    首先来了解一下,面向对象练习的基本规则和问题: 先写出普通的写法,然后改成面向对象写法项 普通方法变形 ·尽量不要出现函数嵌套函数 ·可以有全局变量 ·把onload函数中不是赋值的语句放到单独函数中 改成面向对象 ·全局变量就是属性 ·函数就是方法 ·onload中创建对象 ·改this指针问题 先把拖拽效果的布局完善好: HTML结构: <div id="box"></div> csc样式: #box{position: absolute;width: 20

  • javascript实现移动端上的触屏拖拽功能

    javascript实现移动端上的触屏拖拽功能

    本文是分享了javascript实现移动端上的触屏拖拽功能,具体内容如下 效果图: 实现代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <meta name="viewport" content="width=device-width, user-scalable=no, initi

  • 使用js实现的简单拖拽效果

    使用js实现的简单拖拽效果

    前端开发的时候,有好多地方用到拖拽效果,当然 http://jqueryui.com/draggable/  是个不错的选择,but 我是个打破砂锅问到底的人,抽点时间用js小小的实现了类似的插件,话不多说. first: html和css 复制代码 代码如下: <head>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />     <ti

  • js实现QQ面板拖拽效果（慕课网DOM事件探秘）（全）

    js实现QQ面板拖拽效果（慕课网DOM事件探秘）（全）

    QQ面板拖拽,效果如图 JavaScript代码如下: function getByClass(clsName, parent) { var oParent = parent ? document.getElementById(parent) : document, eles = [], elements = oParent.getElementsByTagName('*'); for (var i = 0, l = elements.length; i < l; i++) { if (elem

随机推荐