关于拖拽的实现,其实原理很简单,就是把绑定三个事件:onmousedown , onmousemove , onmouseup。
可以参考这篇文章:
在鼠标点下时(onmousedown)把元素的坐标设置为鼠标的坐标,并把 position 设置为绝对坐标。
在鼠标移动时(onmousemove)改变元素坐标。
在鼠标弹起时(onmouseup)取消绑定的事件,并做后续操作。
下面是关于仿 google 个性化主页拖拽效果的一个 Demo (需包含 prototype)。
总共有四个文件:
1. google_drag.html
2. prototype.js
3. 通用拖拽函数 drag.js
4. 仿 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 以及拖拽到了哪个元素的前面然后传给服务器端去修改就可以了。
在鼠标移动时(onmousemove)改变元素坐标。
在鼠标弹起时(onmouseup)取消绑定的事件,并做后续操作。
下面是关于仿 google 个性化主页拖拽效果的一个 Demo (需包含 prototype)。
总共有四个文件:
1. google_drag.html
2. prototype.js
3. 通用拖拽函数 drag.js
4. 仿 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 以及拖拽到了哪个元素的前面然后传给服务器端去修改就可以了。
<!
DOCTYPE HTML PUBLIC
"
-//W3C//DTD HTML 4.01 Transitional//EN
"
>
< html >
< head >
< meta http - equiv = " Content-Type " content = " text/html; charset=gb2312 " >
< link href = " http://www.7ibu.com/favicon.ico " type = image / x-icon rel="icon">
< link href = " http://www.7ibu.com/favicon.ico " type = image / x-icon rel="shortcut icon">
< TITLE > JavaScript Google IG Drag Demo < / TITLE>
< LINK href = " /css/index.css " type = text / css rel=stylesheet>
< LINK href = " /css/news.css " type = text / css rel=stylesheet>
< META http - equiv = Content - Language content = zh - cn >
< META content = " JavaScript 拖拽 Drag Demo google " name = keywords >
< SCRIPT src = " /developer/programme/js//prototype.js " type = text / javascript>< / SCRIPT >
< SCRIPT src = " /developer/programme/js/drag.js " type = text / javascript>< / SCRIPT >
< SCRIPT src = " /developer/programme/js/google_drag.js " type = text / javascript>< / SCRIPT >
< STYLE type = text / css>#title{ border-bottom:1px solid #bbb; font-size:12px; padding:0 0 10px;}#title h1{ font-size:16px;}#title #intro{}.col_div{ float:left; width:33%; color:#fff;}.drag_div , .modbox{ width:90%; margin:10px auto; border:1px solid #1b243d; padding:5px;}.drag_header{ font-weight:bold; border-bottom:1px solid #fff;}.drag_content{ height:40px; padding:5px;}.no_drag{ height:0px; overflow:hidden; padding:0; border:0;}< / STYLE >
< / HEAD>
< BODY >
< DIV id = title _extended = " true " >
< H1 _extended = " true " >< FONT color = " #FFFFFF " > JavaScript Google IG Drag Demo < / FONT>< / H1 >
< H1 _extended = " true " > < FONT color = " #FFFFFF " > 更多资源查看专题: < a class = adLink href = " /developer/programme/2007/0128/721.htm " > Web页面元素拖拽实例系列 < / a>< / FONT >< / H1>
< FONT color = " #FFFFFF " > 这是一个关于 JavaScript 仿 google 个性化主页拖拽效果的简单的 Demo,在 IE 6 , FireFox 1.5 , Opera 9 下测试通过。 < / FONT>
< / DIV><br>
< div id = " col_1 " class = " col_div " >
<!-- 用 JavaScript 绘制 5 个 div -->
< script type = " text/javascript " >
for ( var i = 0 ; i < 5 ; i ++ ) {
document.write('<div id="drag_' + i + '" class="drag_div" style="background:#F50;"><div id="drag_' + i + '_h" class="drag_header">Header #' + i + '</div><div class="drag_content">Content #' + i + '</div></div>');
}
< / script>
<!-- 隐藏的 div ,用来修复不能拖到一个元素后面的 bug -->
< div id = " col_1_hidden_div " class = " drag_div no_drag " >< div id = " col_1_hidden_div_h " >< / div>< / div >
< / div>
< div id = " col_2 " class = " col_div " >
< script type = " text/javascript " >
for ( var i = 10 ; i < 15 ; i ++ ) {
document.write('<div id="drag_' + i + '" class="drag_div" style="background:#110;"><div id="drag_' + i + '_h" class="drag_header">Header #' + i + '</div><div class="drag_content">Content #' + i + '</div></div>');
}
< / script>
< div id = " col_2_hidden_div " class = " drag_div no_drag " >< div id = " col_2_hidden_div_h " >< / div>< / div >
< / div>
< div id = " col_3 " class = " col_div " >
< script type = " text/javascript " >
for ( var i = 20 ; i < 25 ; i ++ ) {
document.write('<div id="drag_' + i + '" class="drag_div" style="background:#628;"><div id="drag_' + i + '_h" class="drag_header">Header #' + i + '</div><div class="drag_content">Content #' + i + '</div></div>');
}
< / script>
< div id = " col_3_hidden_div " class = " drag_div no_drag " >< div id = " col_3_hidden_div_h " >< / div>< / div >
< / div>
< script type = " text/javascript " >
window.onload = function () {initDrag();}
< / script>
< / BODY>
< / html>
< html >
< head >
< meta http - equiv = " Content-Type " content = " text/html; charset=gb2312 " >
< link href = " http://www.7ibu.com/favicon.ico " type = image / x-icon rel="icon">
< link href = " http://www.7ibu.com/favicon.ico " type = image / x-icon rel="shortcut icon">
< TITLE > JavaScript Google IG Drag Demo < / TITLE>
< LINK href = " /css/index.css " type = text / css rel=stylesheet>
< LINK href = " /css/news.css " type = text / css rel=stylesheet>
< META http - equiv = Content - Language content = zh - cn >
< META content = " JavaScript 拖拽 Drag Demo google " name = keywords >
< SCRIPT src = " /developer/programme/js//prototype.js " type = text / javascript>< / SCRIPT >
< SCRIPT src = " /developer/programme/js/drag.js " type = text / javascript>< / SCRIPT >
< SCRIPT src = " /developer/programme/js/google_drag.js " type = text / javascript>< / SCRIPT >
< STYLE type = text / css>#title{ border-bottom:1px solid #bbb; font-size:12px; padding:0 0 10px;}#title h1{ font-size:16px;}#title #intro{}.col_div{ float:left; width:33%; color:#fff;}.drag_div , .modbox{ width:90%; margin:10px auto; border:1px solid #1b243d; padding:5px;}.drag_header{ font-weight:bold; border-bottom:1px solid #fff;}.drag_content{ height:40px; padding:5px;}.no_drag{ height:0px; overflow:hidden; padding:0; border:0;}< / STYLE >
< / HEAD>
< BODY >
< DIV id = title _extended = " true " >
< H1 _extended = " true " >< FONT color = " #FFFFFF " > JavaScript Google IG Drag Demo < / FONT>< / H1 >
< H1 _extended = " true " > < FONT color = " #FFFFFF " > 更多资源查看专题: < a class = adLink href = " /developer/programme/2007/0128/721.htm " > Web页面元素拖拽实例系列 < / a>< / FONT >< / H1>
< FONT color = " #FFFFFF " > 这是一个关于 JavaScript 仿 google 个性化主页拖拽效果的简单的 Demo,在 IE 6 , FireFox 1.5 , Opera 9 下测试通过。 < / FONT>
< / DIV><br>
< div id = " col_1 " class = " col_div " >
<!-- 用 JavaScript 绘制 5 个 div -->
< script type = " text/javascript " >
for ( var i = 0 ; i < 5 ; i ++ ) {
document.write('<div id="drag_' + i + '" class="drag_div" style="background:#F50;"><div id="drag_' + i + '_h" class="drag_header">Header #' + i + '</div><div class="drag_content">Content #' + i + '</div></div>');
}
< / script>
<!-- 隐藏的 div ,用来修复不能拖到一个元素后面的 bug -->
< div id = " col_1_hidden_div " class = " drag_div no_drag " >< div id = " col_1_hidden_div_h " >< / div>< / div >
< / div>
< div id = " col_2 " class = " col_div " >
< script type = " text/javascript " >
for ( var i = 10 ; i < 15 ; i ++ ) {
document.write('<div id="drag_' + i + '" class="drag_div" style="background:#110;"><div id="drag_' + i + '_h" class="drag_header">Header #' + i + '</div><div class="drag_content">Content #' + i + '</div></div>');
}
< / script>
< div id = " col_2_hidden_div " class = " drag_div no_drag " >< div id = " col_2_hidden_div_h " >< / div>< / div >
< / div>
< div id = " col_3 " class = " col_div " >
< script type = " text/javascript " >
for ( var i = 20 ; i < 25 ; i ++ ) {
document.write('<div id="drag_' + i + '" class="drag_div" style="background:#628;"><div id="drag_' + i + '_h" class="drag_header">Header #' + i + '</div><div class="drag_content">Content #' + i + '</div></div>');
}
< / script>
< div id = " col_3_hidden_div " class = " drag_div no_drag " >< div id = " col_3_hidden_div_h " >< / div>< / div >
< / div>
< script type = " text/javascript " >
window.onload = function () {initDrag();}
< / script>
< / BODY>
< / html>