페이지 사용자 정의 드래그 앤 드롭 레이아웃_javascript 기술

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <style> body {margin:0px;padding:0px;font-size:12px;text-align:center;} body > div {text-align:center; margin-right:auto; margin-left:auto;} .content{width:900px;} .content .left{ float:left; width:20%; border:1px solid #FF0000; margin:3px; } .content .center{float:left;border:1px solid #FF0000;margin:3px;width:57%} .content .right{float:right;width:20%;border:1px solid #FF0000;margin:3px} .mo{height:auto;border:1px solid #CCC;margin:3px;background:#FFF} .mo h1{background:#ECF9FF;height:18px;padding:3px;cursor:move} .mo .nr{height:80px;border:1px solid #F3F3F3;margin:2px} h1{margin:0px;padding:0px;text-align:left;font-size:12px} </style> <div class="content"> <div class="left" id="dom0"> <div class="mo" id="m0"> <h1> </h1>dom0<div class="nr"> </div> </div> <div class="mo" id="m1"> <h1> </h1>dom1<div class="nr"></div> </div> <div class="mo" id="m2"> <h1></h1>dom2<div class="nr"></div> </div> <div class="mo" id="m3"> <h1></h1>dom3<div class="nr"></div> </div> </div> <div class="center" id="dom1"> <div class="mo" id="m4"> <h1></h1>dom4<div class="nr"></div> </div> <div class="mo" id="m5"> <h1></h1>dom5<div class="nr"></div> </div> <div class="mo" id="m6"> <h1></h1>dom6<div class="nr"></div> </div> <div class="mo" id="m7"> <h1></h1>dom7<div class="nr"></div> </div> </div> <div class="right" id="dom2"> <div class="mo" id="m8"> <h1></h1>dom8<div class="nr"></div> </div> <div class="mo" id="m9"> <h1></h1>dom9<div class="nr"></div> </div> <div class="mo" id="m10"> <h1></h1>dom10<div class="nr"></div> </div> <div class="mo" id="m11"> <h1></h1>dom11<div class="nr"></div> </div> </div> </div>