轉載 * jQuery實現動態分割div—通過拖動分隔欄實現上下、左右動態改變左右、上下兩個相鄰div的大小
由jQuery實現上下、左右動態改變左右、上下兩個div的大小，需要自己引入jquery1.8.0.min.js包
可用於頁面布局。
//============================index.html======================================
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<title>分隔欄動態改變div大小—基於jQuery</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="renderer" content="webkit"/>
<meta name="viewport" content="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"/>
<meta name="author" content="wind"/>
<meta name="robots" content="index,follow"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<style>
.hj-wrap{
width:100%;
height: 200px;
margin:10px auto;
clear:both;
border:1px solid red;
overflow: hidden;
}
.hj-transverse-split-div{
float: left;
height: 100%;
padding:0px;
background: #0099EE;
overflow: hidden;
border:0px solid #0099ff;
}
.hj-wrap .hj-transverse-split-label{
float:left;
width: 10px;
height: 100%;
display:block;
cursor: e-resize;
}
table tr td{
border:1px solid #fff;
}
.hj-vertical-split-div{
height:150px;
border:0px solid red;
width:99.9%;
margin:0 auto;
}
.hj-vertical-split-label{
width: 100%;
height: 10px;
display:block;
cursor: n-resize;
}
</style>
</head>
<body>
<div class=‘hj-wrap‘>
<div class="hj-transverse-split-div">
<label>ggg</label>
</div>
<label class="hj-transverse-split-label"> </label>
<div class="hj-transverse-split-div">中</div>
<label class="hj-transverse-split-label"> </label>
<div class="hj-transverse-split-div">右</div>
<label class="hj-transverse-split-label"> </label>
<div class="hj-transverse-split-div">右1</div>
<label class="hj-transverse-split-label"> </label>
<div class="hj-transverse-split-div">右2</div>
</div>
<div class=‘hj-wrap‘>
<div class="hj-transverse-split-div">
<h1>Hello word</h1>
</div>
<label class="hj-transverse-split-label"> </label>
<div class="hj-transverse-split-div">中</div>
<label class="hj-transverse-split-label"> </label>
<div class="hj-transverse-split-div">右</div>
<label class="hj-transverse-split-label"> </label>
<div class="hj-transverse-split-div">右1</div>
</div>
<div class=‘hj-wrap‘>
<div class="hj-transverse-split-div">
<h2>javascript</h2>
</div>
<label class="hj-transverse-split-label"> </label>
<div class="hj-transverse-split-div">中</div>
<label class="hj-transverse-split-label"> </label>
<div class="hj-transverse-split-div">
<table>
<tr>
<td>1</td>
<td>2</td>
<td rowspan="2">3</td>
</tr>
<tr>
<td colspan="2">1</td>
</tr>
</table>
</div>
</div>
<div class=‘hj-wrap‘ style="height:500px;">
<div class="hj-transverse-split-div">
<h1>Hello word</h1>
</div>
<label class="hj-transverse-split-label"> </label>
<div class="hj-transverse-split-div" style="">
<div class="hj-vertical-split-div">上</div>
<label class="hj-vertical-split-label"> </label>
<div class="hj-vertical-split-div">中</div>
<label class="hj-vertical-split-label"> </label>
<div class="hj-vertical-split-div">下</div>
</div>
</div>
<div class=‘hj-wrap‘ style="height:500px;">
<div class="hj-transverse-split-div">
<h1>Hello word</h1>
</div>
<label class="hj-transverse-split-label"> </label>
<div class="hj-transverse-split-div">中</div>
<label class="hj-transverse-split-label"> </label>
<div class="hj-transverse-split-div" style="">
<div class="hj-vertical-split-div">上</div>
<label class="hj-vertical-split-label"> </label>
<div class="hj-vertical-split-div">中</div>
<label class="hj-vertical-split-label"> </label>
<div class="hj-vertical-split-div">下</div>
</div>
</div>
<div class=‘hj-wrap‘ style="height:500px;">
<div class="hj-vertical-split-div">上</div>
<label class="hj-vertical-split-label"> </label>
<div class="hj-vertical-split-div">中</div>
<label class="hj-vertical-split-label"> </label>
<div class="hj-vertical-split-div">下</div>
</div>
<script src="jquery-1.8.0.min.js"></script>
<script src="monitorSplitWindows.js"></script>
</div>
</body>
</html>
//==================================monitorSplitWindows.js代碼=======================================
/**
* name: monitorSplitWindows.js
* route: /static/js/control/ui
* author: luozhubang
* date: 2016-10-26
* function: 監聽窗口拖動事件，依賴於/static/js/control/ui/DynamicWindow.js,
* 演示地址：http://www.vfkjsd.cn/div/2/div.html
*/
$(function(){
//alert("ok");
//鼠標橫向、豎向操作對象
var thisHorizontalObject,thisVerticalObject;
//文檔對象
var doc = document;
//查找橫向分割欄
var horizontalLabels = $(".hj-wrap").find(‘.hj-transverse-split-label‘);
//查找豎向分割欄
var verticalLabels = $(".hj-wrap").find(‘.hj-vertical-split-label‘);
//定義一個對象
function PointerObject(){
this.el = null;//當前鼠標選擇的對象
this.clickX =0;//鼠標橫向初始位置
this.clickY =0;//鼠標豎向初始位置
this.horizontalDragging=false;//判斷鼠標可否橫向拖動
this.verticalDragging=false;//判斷鼠標可否豎向拖動
}
doc.onmousedown = function(e){
console.log("--mousedown--");
horizontalLabels = $(".hj-wrap").find(‘.hj-transverse-split-label‘);
verticalLabels = $(".hj-wrap").find(‘.hj-vertical-split-label‘);
//判斷窗體個數，並初始化窗體寬度
if($(".hj-wrap").length>0){
for(var i=0;i<$(".hj-wrap").length;i++){
var hjDivNums = $($(".hj-wrap")[i]).children(".hj-transverse-split-div");
var defaultWidth =Math.floor(100/hjDivNums.length);
$($(".hj-wrap")[i]).children(".hj-transverse-split-div").width(defaultWidth-1+"%");
}
}
//橫向分隔欄綁定事件
horizontalLabels.bind(‘mousedown‘,function(e){
thisHorizontalObject = new PointerObject();
thisHorizontalObject.horizontalDragging = true;//鼠標可橫向拖動
thisHorizontalObject.el = this;
thisHorizontalObject.clickX = e.pageX;//記錄鼠標橫向初始位置
});
//豎向分隔欄綁定事件
verticalLabels.bind(‘mousedown‘,function(e){
console.log("----");
thisVerticalObject = new PointerObject();
thisVerticalObject.verticalDragging = true;//鼠標可豎向拖動
thisVerticalObject.el = this;
thisVerticalObject.clickY = e.pageY;//記錄鼠標豎向初始位置
});
}
//橫向分隔欄綁定事件
horizontalLabels.bind(‘mousedown‘,function(e){
thisHorizontalObject = new PointerObject();
thisHorizontalObject.horizontalDragging = true;//鼠標可橫向拖動
thisHorizontalObject.el = this;
thisHorizontalObject.clickX = e.pageX;//記錄鼠標橫向初始位置
});
//豎向分隔欄綁定事件
verticalLabels.bind(‘mousedown‘,function(e){
console.log("----");
thisVerticalObject = new PointerObject();
thisVerticalObject.verticalDragging = true;//鼠標可豎向拖動
thisVerticalObject.el = this;
thisVerticalObject.clickY = e.pageY;//記錄鼠標豎向初始位置
});
doc.onmousemove = function(e){
//鼠標橫向拖動
if(thisHorizontalObject != null){
if (thisHorizontalObject.horizontalDragging) {
var changeDistance = 0;
var nextWidth = $(thisHorizontalObject.el).next().width();
var prevWidth = $(thisHorizontalObject.el).prev().width();
if(thisHorizontalObject.clickX>=e.pageX){
//鼠標向左移動
changeDistance = Number(thisHorizontalObject.clickX)-Number(e.pageX);
if($(thisHorizontalObject.el).prev().width()-changeDistance<20){
}else{
$(thisHorizontalObject.el).prev().width($(thisHorizontalObject.el).prev().width()-changeDistance);
$(thisHorizontalObject.el).next().width($(thisHorizontalObject.el).next().width()+changeDistance);
thisHorizontalObject.clickX=e.pageX;
$(thisHorizontalObject.el).offset({left:e.pageX-4});
}
}else{
//鼠標向右移動
changeDistance = Number(e.pageX)-Number(thisHorizontalObject.clickX);
if($(thisHorizontalObject.el).next().width()-changeDistance<20){
}else{
$(thisHorizontalObject.el).prev().width($(thisHorizontalObject.el).prev().width()+changeDistance);
$(thisHorizontalObject.el).next().width($(thisHorizontalObject.el).next().width()-changeDistance);
thisHorizontalObject.clickX=e.pageX;
$(thisHorizontalObject.el).offset({left:e.pageX-4});
}
}
$(thisHorizontalObject.el).width(10);
}
}
//鼠標豎向拖動
if(thisVerticalObject != null){
if (thisVerticalObject.verticalDragging) {
var changeDistance = 0;
var nextheight = $(thisVerticalObject.el).next().height();
var prevheight = $(thisVerticalObject.el).prev().height();
if(thisVerticalObject.clickY>=e.pageY){
//鼠標向上移動
changeDistance = Number(thisVerticalObject.clickY)-Number(e.pageY);
if($(thisVerticalObject.el).prev().height()-changeDistance<20){
}else{
$(thisVerticalObject.el).prev().height($(thisVerticalObject.el).prev().height()-changeDistance);
$(thisVerticalObject.el).next().height($(thisVerticalObject.el).next().height()+changeDistance);
thisVerticalObject.clickY=e.pageY;
$(thisVerticalObject.el).offset({top:e.pageY-4});
}
}else{
//鼠標向下移動
changeDistance = Number(e.pageY)-Number(thisVerticalObject.clickY);
if($(thisVerticalObject.el).next().height()-changeDistance<20){
}else{
$(thisVerticalObject.el).prev().height($(thisVerticalObject.el).prev().height()+changeDistance);
$(thisVerticalObject.el).next().height($(thisVerticalObject.el).next().height()-changeDistance);
thisVerticalObject.clickY=e.pageY;
$(thisVerticalObject.el).offset({top:e.pageY-4});
}
}
$(thisVerticalObject.el).height(10);
}
}
};
$(doc).mouseup(function(e) {
console.log("-+");
//鼠標釋放時判斷是否有橫向操作對象
if (thisHorizontalObject != null) {
thisHorizontalObject.horizontalDragging = false;//修改橫向可拖動狀態
thisHorizontalObject = null;//當鼠標釋放的時候，銷毀橫向對象
}
//鼠標釋放時判斷是否有豎向操作對象
if (thisVerticalObject != null) {
thisVerticalObject.verticalDragging = false;//修改豎向可拖動狀態
thisVerticalObject = null;//當鼠標釋放的時候，銷毀豎向對象
}
e.cancelBubble = true;
});
});
轉載 * jQuery實現動態分割div—通過拖動分隔欄實現上下、左右動態改變左右、上下兩個相鄰div的大小