关于DIV布局拖动保存的实现方法和实例下载-平面设计-菜鸟图库

关于DIV布局拖动保存的实现方法和实例下载

2022-02-03
来源/作者： adobe-dreamweaver.cn / adobe-dr…
11 次浏览

QQ群里的一位网友呼天抢地的找我要这个仿3721的DIV拖动保存代码，当时偶实在没空找。这次干脆自己找了个修改了一下放出来给大家下载。

其实也很简单。

首先将下列CSS代码复制到HTML代码中
<style type="text/css"> 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>
然后再将下列JS代码也复制到HTML代码中。

最后将下列布局DIV复制到你的HTML页面中
<body onLoad_fckprotectedatt=" onLoad="CoolDrag.init('container');""> <br /> <div id="container"> <div id="leftcontainer"> <div style="height:100px; width:318px; " class="dragLayer" id="win1"> <div class="dragHeader"> <div style="float:left">第一个窗口</div> <div 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:318px; " class="dragLayer" id="win2"> <div class="dragHeader"> <div style="float:left">第二个窗口</div> <div 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:318px; " class="dragLayer" id="win3"> <div class="dragHeader"> <div style="float:left">第三个窗口</div> <div 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:318px; " class="dragLayer" id="win4"> <div class="dragHeader"> <div style="float:left">第四个窗口</div> <div 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:318px; " class="dragLayer" id="win5"> <div class="dragHeader"> <div style="float:left">第五个窗口</div> <div 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:318px; " class="dragLayer" id="win6"> <div class="dragHeader"> <div style="float:left">第六个窗口</div> <div 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:318px; " class="dragLayer" id="win7"> <div class="dragHeader"> <div style="float:left">第七个窗口</div> <div 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>

点击下载完整示例代码

关于DIV布局拖动保存的实现方法和实例下载

更多精彩内容