通过JS实现拖拽变更层布局的代码，改变当前行的第一列，同时改变其他行的布局
<!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=utf-8" /> <title></title> <!--引用jquery--> <script src="JS/jquery-1.7.1.min.js"></script> <script type="text/javascript"> var srcwidth = 900; //整个面板的宽 var currRow = 0; //当前操作的行 $(function () { //绑定需要拖拽改变大小的元素对象 每行的第一列 暂时支持一行两列 bindResize(document.getElementById('p00')); bindResize(document.getElementById('p10')); bindResize(document.getElementById('p20')); }); function bindResize(el) { var els = el.style, x = y = 0; $(el).mousedown(function (e) { currRow = el.id; x = e.clientX - el.offsetWidth, y = e.clientY - el.offsetHeight; el.setCapture ? ( el.setCapture(), el.onmousemove = function (ev) { mouseMove(ev || event); }, el.onmouseup = mouseUp ) : ( $(document).bind("mousemove", mouseMove).bind("mouseup", mouseUp) ); e.preventDefault(); }); //移动事件 function mouseMove(e) { els.width = e.clientX - x + 'px', els.height = e.clientY - y + 'px'; var cx = currRow.substr(1, 1); //当前行 var cy = currRow.substr(2, 1); //当前列 var docCur = $("#p" + cx + cy); //current row colum docCur.css({ "width": ((parseInt(docCur.css("width").replace("px", ""))) > srcwidth ? srcwidth : (parseInt(docCur.css("width")))) }); var docCurCopy = docCur; var cya = parseInt(cy) + 1; //当前列+1 var docNCol = $("#p" + cx + cya); //next colum if (docNCol != null) { docNCol.css({ "left": (parseInt(docCur.css("left").replace("px", ""))) + (parseInt(docCur.css("width").replace("px", ""))) }); docNCol.css({ "width": (srcwidth - (parseInt(docCur.css("width").replace("px", "")))) }); docNCol.css({ "top": (docCur.css("top")) }); docNCol.css({ "height": docCur.css("height") }); } for (var i = 1; i < 4; i++) { var cxa = parseInt(cx) + i; //当前行+1 var docNRow = $("#p" + cxa + cy); //next row if (docNRow != null) { docNRow.css({ "left": (parseInt(docCurCopy.css("left").replace("px", ""))) }); docNRow.css({ "top": (parseInt(docCurCopy.css("top").replace("px", ""))) + (parseInt(docCurCopy.css("height").replace("px", ""))) }); var docNCol = $("#p" + cxa + 1); //next colum if (docNCol != null) { docNCol.css({ "left": (parseInt(docNRow.css("left").replace("px", ""))) + (parseInt(docNRow.css("width").replace("px", ""))) }); docNCol.css({ "width": (srcwidth - (parseInt(docNRow.css("width").replace("px", "")))) }); docNCol.css({ "top": (docNRow.css("top")) }); docNCol.css({ "height": docNRow.css("height") }); } } docCurCopy = docNRow; } $("#megshow").html("#p" + els.width + els.height); } //停止事件 function mouseUp() { el.releaseCapture ? ( el.releaseCapture(), el.onmousemove = el.onmouseup = null ) : ( $(document).unbind("mousemove", mouseMove).unbind("mouseup", mouseUp) ); } } </script> <style type="text/css"> #p00 { position: absolute; top: 100px; left: 200px; width: 400px; height: 300px; background: #f1f1f1; text-align: center; line-height: 100px; border: 1px solid #CCC; cursor: se-resize; } #p01,#p11,#p21 { position:absolute; top:80px; left:400px; width:200px; height:200px; background:#8a9bca; cursor:move; } #p10 { position: absolute; top: 400px; left: 100px; width: 400px; height: 300px; background: #f1f1f1; text-align: center; line-height: 100px; border: 1px solid #CCC; cursor: se-resize; } #p20,#p30 { position: absolute; top: 400px; left: 100px; width: 400px; height: 300px; background: #f1f1f1; text-align: center; line-height: 100px; border: 1px solid #CCC; cursor: se-resize; } </style> </head> <body> <div id="megshow"></div> <div id="p00"> 这是内容1 </div> <div id="p01"> 这是内容2 </div> <div id="p10"> 这是内容3 </div> <div id="p11"> 这是内容2 </div> <div id="p20"> 这是内容4 </div> <div id="p21"> 这是内容2 </div> <div id="p30"> 这是内容5 </div> </body> </html>
