js 實現上下拖動改變父 div 的高度，左右上下拖動動態分割孩子的寬高
1. 需求
實現父 div 裏面 左右，上下動態分割 div，並上下改變父 div 的高度，而且寬和高都是按百分比（如圖） 。css
2. 實現原理
2.1 父佈局
<div class='hj-wrap'>
<div class="arrow"></div>
</div>
- 首先一個父 div 爲 hj-wrap，相對定位 。
- 一個改變父 div 高度的 arrow，用於上下拖動 , 不能佔有位置，因此要絕對定位，並定位到最右下角。
- 上下拖動的 arrow，當上拖動時，arrow 的父 div 的高度變小，當下拖動時，arrow 的父 div 的高度變大。
2.2 橫向佈局
<div class='hj-wrap'>
<div class="hj-transverse-split-div">
橫 向
<label class="hj-transverse-split-label"></label>
</div>
<div class="hj-transverse-split-div">橫 向 2
<label class="hj-transverse-split-label"></label>
</div>
<div class="hj-transverse-split-div">橫 向 3
<label class="hj-transverse-split-label"></label>
</div>
<div class="hj-transverse-split-div">橫 向 4
<label class="hj-transverse-split-label"></label>
</div>
<div class="hj-transverse-split-div">橫 向 5
</div>
<div class="arrow"></div>
</div>
- 每個橫向的 div 爲 hj-transverse-split-div 並相對定位，裏面有一個拖動改變左右的 label 爲 hj-transverse-split-label ，不能佔有位置，因此要絕對定位，並定位到最右邊並高爲 100%，最後一個橫向的 div 不用 hj-transverse-split-label 。
- 拖動改變左右的 label 時，向左時，label 的父 div 的寬變小，label 的父 div 相鄰的 右邊的 div 寬度變大。
2.3 豎向佈局
<div class='hj-wrap verticals'>
<div class="hj-vertical-split-div">上
<label class="hj-vertical-split-label"></label>
</div>
<div class="hj-vertical-split-div">中
<label class="hj-vertical-split-label"></label>
</div>
<div class="hj-vertical-split-div">下</div>
<div class="arrow"></div>
</div>
- 每個橫向的 div 爲 hj-vertical-split-div 並相對定位，裏面有一個拖動改變左右的 label 爲 hj-vertical-split-label ，不能佔有位置，因此要絕對定位，並定位到最下邊並寬爲 100%，最後一個豎向的 div 不用再放 hj-vertical-split-label 的 label 。
- 拖動改變上下的 label 時，向上時，label 的父 div 的高度變小，label 的父 div 相鄰的下邊的 div 高度變大。
3. js 實現
代碼：html
/**
* name: split.js
* author: biaochen
* date: 2018-12-26
*
*/
$(function() {
//鼠標橫向、豎向、和改變父高度的上下 操做對象
var thisTransverseObject, thisVerticalObject, thisArrowObject;
//文檔對象
var doc = document;
//橫向分割欄
var transverseLabels = $(".hj-wrap").find(".hj-transverse-split-label");
//豎向分割欄
var verticalLabels = $(".hj-wrap").find(".hj-vertical-split-label");
// 改變父高度的 箭頭 div
var parentArrow = $(".hj-wrap").find(".arrow");
// 設置寬
function setWidth(type) {
if (type === "init") {
var length = $(".hj-wrap").length;
if (length > 0) {
for (var i = 0; i < length; i++) {
var width = $($(".hj-wrap")[i])[0].offsetWidth;
var hjDivNums = $($(".hj-wrap")[i]).children(".hj-transverse-split-div");
// var defaultWidth = Math.floor(100 / hjDivNums.length);
var defaultWidth = Math.floor(width / hjDivNums.length);
$($(".hj-wrap")[i])
.children(".hj-transverse-split-div")
.width(defaultWidth + "px");
// .width(defaultWidth + "%");
}
}
} else {
// 設置百分比
var transverseDivs = $(".hj-transverse-split-div")
var widthLength = transverseDivs.length
for (var i = 0; i < widthLength; i++) {
var width = $(transverseDivs[i]).width();
var parentWidth = $(transverseDivs[i])
.parent()
.width();
var rate = (width / parentWidth) * 100 + "%";
$(transverseDivs[i]).css({ width: rate });
}
}
}
// 設置高
function setHeight(type) {
if (type === "init") {
var verticalsParentDivs = $(".verticals");
var parentLengths = verticalsParentDivs.length;
for (var i = 0; i < parentLengths; i++) {
var parentHeight = $(verticalsParentDivs[i]).height();
var childrenNum = $(verticalsParentDivs[i]).children(
".hj-vertical-split-div"
).length;
var defaultHeight = Math.floor(parentHeight / childrenNum);
// var rate = Math.floor((height / parentHeight)* 100) + '%'
var defaultHeight = Math.floor(100 / childrenNum);
$(verticalsParentDivs[i])
.children(".hj-vertical-split-div")
.height(defaultHeight + "%");
// .height(defaultHeight + "px");
}
} else {
// 設置百分比
var verticalsDivs = $(".hj-vertical-split-div");
var heightLength = verticalsDivs.length;
for (var i = 0; i < heightLength; i++) {
var height = $(verticalsDivs[i]).height();
var parentHeight = $(verticalsDivs[i])
.parent()
.height();
var rate = (height / parentHeight) * 100 + "%";
$(verticalsDivs[i]).css({ height: rate });
}
}
}
setWidth('init')
setHeight("init");
//定義一個對象
function PointerObject() {
this.el = null; //當前鼠標選擇的對象
this.clickX = 0; //鼠標橫向初始位置
this.clickY = 0; //鼠標豎向初始位置
this.transverseDragging = false; //判斷鼠標能否橫向拖動
this.verticalDragging = false; //判斷鼠標能否豎向拖動
}
//橫向分隔欄綁定事件
transverseLabels.bind("mousedown", function(e) {
thisTransverseObject = new PointerObject();
thisTransverseObject.transverseDragging = true; //鼠標可橫向拖動
thisTransverseObject.el = this;
thisTransverseObject.clickX = e.pageX; //記錄鼠標橫向初始位置
});
//豎向分隔欄綁定事件
verticalLabels.bind("mousedown", function(e) {
//console.log("mousedown");
thisVerticalObject = new PointerObject();
thisVerticalObject.verticalDragging = true; //鼠標可豎向拖動
thisVerticalObject.el = this;
thisVerticalObject.clickY = e.pageY; //記錄鼠標豎向初始位置
});
//上下綁定事件
parentArrow.bind("mousedown", function(e) {
//console.log("mousedown");
thisArrowObject = new PointerObject();
// thisArrowObject.transverseDragging = true; //鼠標可橫向拖動
thisArrowObject.verticalDragging = true; //鼠標可豎向拖動
thisArrowObject.el = this;
thisArrowObject.clickY = e.pageY; //記錄鼠標豎向初始位置
});
doc.onmousemove = function(e) {
//鼠標橫向拖動
if (thisTransverseObject != null) {
if (thisTransverseObject.transverseDragging) {
var changeDistance = 0;
if (thisTransverseObject.clickX >= e.pageX) {
//鼠標向左移動
changeDistance =
Number(thisTransverseObject.clickX) - Number(e.pageX);
if (
$(thisTransverseObject.el)
.parent()
.width() -
changeDistance <
20
) {} else {
$(thisTransverseObject.el)
.parent()
.width(
$(thisTransverseObject.el)
.parent()
.width() - changeDistance
);
$(thisTransverseObject.el)
.parent()
.next()
.width(
$(thisTransverseObject.el)
.parent()
.next()
.width() + changeDistance
);
thisTransverseObject.clickX = e.pageX;
$(thisTransverseObject.el).offset({ left: e.pageX });
}
} else {
//鼠標向右移動
changeDistance =
Number(e.pageX) - Number(thisTransverseObject.clickX);
if (
$(thisTransverseObject.el)
.parent()
.next()
.width() -
changeDistance <
20
) {} else {
$(thisTransverseObject.el)
.parent()
.width(
$(thisTransverseObject.el)
.parent()
.width() + changeDistance
);
$(thisTransverseObject.el)
.parent()
.next()
.width(
$(thisTransverseObject.el)
.parent()
.next()
.width() - changeDistance
);
thisTransverseObject.clickX = e.pageX;
$(thisTransverseObject.el).offset({ left: e.pageX });
}
}
$(thisTransverseObject.el).width(2);
}
}
//鼠標豎向拖動
if (thisVerticalObject != null) {
if (thisVerticalObject.verticalDragging) {
var changeDistance = 0;
if (thisVerticalObject.clickY >= e.pageY) {
//鼠標向上移動
changeDistance = Number(thisVerticalObject.clickY) - Number(e.pageY);
if (
$(thisVerticalObject.el)
.parent()
.height() -
changeDistance <
20
) {} else {
$(thisVerticalObject.el)
.parent()
.height(
$(thisVerticalObject.el)
.parent()
.height() - changeDistance
);
$(thisVerticalObject.el)
.parent()
.next()
.height(
$(thisVerticalObject.el)
.parent()
.next()
.height() + changeDistance
);
thisVerticalObject.clickY = e.pageY;
$(thisVerticalObject.el).offset({ top: e.pageY });
}
} else {
//鼠標向下移動
changeDistance = Number(e.pageY) - Number(thisVerticalObject.clickY);
if (
$(thisVerticalObject.el)
.parent()
.next()
.height() -
changeDistance <
20
) {} else {
$(thisVerticalObject.el)
.parent()
.height(
$(thisVerticalObject.el)
.parent()
.height() + changeDistance
);
$(thisVerticalObject.el)
.parent()
.next()
.height(
$(thisVerticalObject.el)
.parent()
.next()
.height() - changeDistance
);
thisVerticalObject.clickY = e.pageY;
$(thisVerticalObject.el).offset({ top: e.pageY });
}
}
$(thisVerticalObject.el).height(2);
}
}
// 改變父的 高度
if (thisArrowObject != null) {
//鼠標豎向拖動
if (thisArrowObject.verticalDragging) {
var changeDistance = 0;
if (thisArrowObject.clickY >= e.pageY) {
//鼠標向上移動
changeDistance = Number(thisArrowObject.clickY) - Number(e.pageY);
if (
$(thisArrowObject.el)
.parent()
.height() -
changeDistance <
50
) {} else {
$(thisArrowObject.el)
.parent()
.height(
$(thisArrowObject.el)
.parent()
.height() - changeDistance
);
thisArrowObject.clickY = e.pageY;
$(thisArrowObject.el).offset({ bottom: e.pageY });
}
} else {
//鼠標向下移動
changeDistance = Number(e.pageY) - Number(thisArrowObject.clickY);
$(thisArrowObject.el)
.parent()
.height(
$(thisArrowObject.el)
.parent()
.height() + changeDistance
);
thisArrowObject.clickY = e.pageY;
$(thisArrowObject.el).offset({ bottom: e.pageY });
}
$(thisArrowObject.el).height(10);
}
}
};
$(doc).mouseup(function(e) {
setHeight("setHeight");
setWidth("setWidth");
// 鼠標彈起時設置不能拖動
if (thisTransverseObject != null) {
thisTransverseObject.transverseDragging = false;
thisTransverseObject = null;
}
if (thisVerticalObject != null) {
thisVerticalObject.verticalDragging = false;
thisVerticalObject = null;
}
if (thisArrowObject != null) {
thisArrowObject.verticalDragging = false;
thisArrowObject = null;
}
e.cancelBubble = true;
});
});
4. 完整代碼與效果
效果圖：前端
項目地址：https://github.com/biaochenxuying/split
效果體驗地址： https://biaochenxuying.github.io/split/index.htmlvue
初始代碼是從網上來的，不過網上的並不完整，父 div 的高也不能改變，而且孩子的寬高並非百分比的，佈局也並不合理，因此修改爲這樣子。java
5. 最後
微信公衆號： BiaoChenXuYing
分享 前端、後端開發等相關的技術文章，熱點資源，隨想隨感，全棧程序員的成長之路。
關注公衆號並回復 福利 便免費送你視頻資源，絕對乾貨。node
福利詳情請點擊： 免費資源分享--Python、Java、Linux、Go、node、vue、react、javaScriptreact
相關文章
- 1. js 實現上下改變父 div 的高度，左右上下動態分割孩子的寬高
- 2. 實現可調整寬高的DIV（左右拖動和上下拖動）
- 3. js分隔條實現拖拽功能(支持左右拖動)
- 4. jQuery實現鼠標拖動改變Div高度
- 5. android：RecyclerView交互動畫（上下拖動，左右滑動刪除）
- 6. js拖拽之二：實現拖動元素上下左右改變元素大小
- 7. 滑動文字實現上下拖動
- 8. js實現可拖動Div
- 9. js與jquery實例-拖動改變列寬和行高
- 10. 拖拽改變div寬、高(轉)
- 更多相關文章...
- • PHP 獲取圖像寬度與高度 - PHP參考手冊
- • IP地址分配（靜態分配+動態分配+零配置） - TCP/IP教程
- • Docker容器實戰(七) - 容器眼光下的文件系統
- • ☆基於Java Instrument的Agent實現
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
