您的位置：首页 > 其它
独创轻松实现拖拽，改变层布局

2016-08-08 16:16 323 查看
通过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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航