带cookie保存功能的DIV拖拽效果

关注

原创最新推荐文章于 2026-10-07 21:33:12 发布 1.1k 阅读 AI 写同款· GEO 优化 ›

使用jQuery实现自定义拖拽功能本文还有配套的精品资源，点击获取简介：在网页开发中，拖放功能是增强用户交互体验的重要特性。jQuery简化了DOM操作，提供了实现拖放效果的API。文章将详细介绍如何仅使用jQuery核心库来创建页面元素的拖拽功能，并保存和恢复元素位置。还将探讨如何使用localStorage保存拖动后的位置，以及在实际应用中如何根据需求选择合适的实现方式。 1. jQuery实现... 阅读详情

相信有朋友已经看过本站先前登载的仿Google和Windows Live的拖拽这篇文章，里面的两个DIV拖拽效果除了第一个兼容Firefox火狐浏览器之外，且都不带cookie保存功能，即，当用户重新访问或刷新页面后，所有之前拖拽的DIV都回到原位。

下面这段代码终于支持cookie保存，但页面在Firefox火狐浏览器下面有点变形错乱，可能是xhtml页面结构写得不标准还是怎么的。。。每当这时候自己就想，我到底应该支持哪一家，是IE还是Firefox？？？

代码转自经典论坛，如需转载请注明出处，谢谢合作！

<!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="Content-Type" content="text/html; charset=gb2312"> <title>Drag & Drop</title> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1">body{ background-color:#36393D; font-size:12px; margin:0px; } DIV.dragLayer{ border:1px solid #369; background-color:#6BBA70; margin-bottom:10px; } DIV.dragLayer_over{ border:1px solid #C79810; background-color:#6BBA70; filter:alpha(opacity=80); -moz-opacity:0.8; /* Moz + FF */ opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/ } DIV.clone_dragLayer_over{ border:1px dashed #FA0; background-color:#6BBA70; filter:alpha(opacity=80); -moz-opacity:0.8; /* Moz + FF */ opacity: 0.8; /* 支持CSS3的浏览器（FF 1.5也支持）*/ margin-bottom:10px; } DIV.dragHeader{ width:100%; height:20px ; line-height:20px; background-color:#006E2E; color:#FFFFFF; } DIV.dragHeader_over{ width:100%; height:20px ; line-height:20px; background-color:#C79810; } SPAN.min,SPAN.close{cursor:pointer;font-family:Webdings} #container{margin:0px} #leftcontainer{float:left; width:33%;} #middlecontainer{float:left; width:34%;} #middlecontainer div{margin-left:auto; margin-right:auto} #rightcontainer{float:right; width:33%;} #rightcontainer div{float:right} DIV.content{width:100%; padding:4px}</style> <mce:script type="text/javascript"></mce:script> </head> <body onLoad="CoolDrag.init('container');"> <br /> <div id="container"> <div id="leftcontainer"> <div style="height:100px; width:200px; " class="dragLayer" id="win1"> <div class="dragHeader"> <div style="float:left" mce_style="float:left">第一个窗口</div> <div style="float:right; " mce_style="float:right; "><span class="min">0</span><span class="close">r</span></div> </div> <div class="content">window 1</div> </div> <div style="height:100px; width:200px; " class="dragLayer" id="win2"> <div class="dragHeader"> <div style="float:left" mce_style="float:left">第二个窗口</div> <div style="float:right; " mce_style="float:right; "><span class="min">0</span><span class="close">r</span></div> </div> <div class="content">window 2</div> </div> </div> <div id="middlecontainer"> <div style="height:100px; width:200px; " class="dragLayer" id="win3"> <div class="dragHeader"> <div style="float:left" mce_style="float:left">第三个窗口</div> <div style="float:right; " mce_style="float:right; "><span class="min">0</span><span class="close">r</span></div> </div> <div class="content">window 3</div> </div> <div style="height:100px; width:200px; " class="dragLayer" id="win4"> <div class="dragHeader"> <div style="float:left" mce_style="float:left">第四个窗口</div> <div style="float:right; " mce_style="float:right; "><span class="min">0</span><span class="close">r</span></div> </div> <div class="content">window 4</div> </div> </div> <div id="rightcontainer"> <div style="height:100px; width:200px; " class="dragLayer" id="win5"> <div class="dragHeader"> <div style="float:left" mce_style="float:left">第五个窗口</div> <div style="float:right; " mce_style="float:right; "><span class="min">0</span><span class="close">r</span></div> </div> <div class="content">window 5</div> </div> <div style="height:100px; width:200px; " class="dragLayer" id="win6"> <div class="dragHeader"> <div style="float:left" mce_style="float:left">第六个窗口</div> <div style="float:right; " mce_style="float:right; "><span class="min">0</span><span class="close">r</span></div> </div> <div class="content">window 6</div> </div> <div style="height:100px; width:200px; " class="dragLayer" id="win7"> <div class="dragHeader"> <div style="float:left" mce_style="float:left">第七个窗口</div> <div style="float:right; " mce_style="float:right; "><span class="min">0</span><span class="close">r</span></div> </div> <div class="content">window 7</div> </div> </div> </div> </body> </html>