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

最新推荐文章于 2020-06-08 16:15:58 发布

Java2King

最新推荐文章于 2020-06-08 16:15:58 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： div float class function border filter

本文链接：https://blog.csdn.net/Java2King/article/details/4598274

版权

JavaScript 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

相信有朋友已经看过本站先前登载的仿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>