公司研发一个新的cms，为了减少以后的修改和尽可能大程度的满足客户对cms的灵活需求，我的经理安排我去做一个与bootstrap的layout差不多的效果，这叫什么，锻炼的时候来了，加油，这个急不得一点一点的来吧，当然做肯定也是做一个简化版的，我初步规划做一个一个布局的，一个往布局里面扔内容的应该就足够了，js要求支持火狐谷歌和ie9以上的浏览器，ie8适当考虑，ie8一下的，不好意思，我放弃了，哈哈...
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>拖拽</title> <style> html,body{ width:100%; height:100%; padding:0; margin:0;} #layout{ margin-left:200px; background:#f1f1f1; height:100%; overflow:auto;} #list{ float:left; width:195px; height:100%; background:#f1f1f1;} .box{ margin:10px; height:90px; background:#9CF; text-align:center; color:#fff; line-height:90px; padding:5px 10px;} .css{ margin:10px; height:40px; background:#F99;text-align:center; color:#fff; line-height:40px; padding:5px 10px;} </style> </head> <body> <div id="list"> <div class="box"> 11111111 </div> <div class="box"> 2222222222 </div> <div class="box"> 33333333333 </div> <div class="css"> css </div> </div> <div id="layout"> </div> </body> </html> <script type="text/javascript"> var oList=document.getElementById("list"); var oLayout=document.getElementById("layout"); var aDiv=oList.getElementsByTagName("div"); for(var i=aDiv.length-1;i>-1;i--){ aDiv[i].onmousedown=function(e){ var e=e||event; var ismoved=false; var disX=e.clientX-this.offsetLeft; var disY=e.clientY-this.offsetTop; var oDiv=document.createElement("div"); oDiv.className=this.className; oDiv.innerHTML=this.innerHTML; oDiv.style.width=this.offsetWidth+"px"; oDiv.style.position="absolute"; oDiv.style.opacity=0; oList.appendChild(oDiv); document.onmousemove=function(e){ var e=e||event; ismoved=true; oDiv.style.opacity=.5; oDiv.style.left=e.clientX-disX+"px"; oDiv.style.top=e.clientY-disY+"px"; } document.onmouseup=function(){ if(ismoved){ oLayout.appendChild(oDiv); oDiv.removeAttribute("style"); } document.onmousemove=null; document.onmouseup=null; } return false; } } </script>