當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

js 实现上下拖动改变父 div 的高度，左右上下拖动动态分割孩子的宽高

發(fā)布時(shí)間：2025/3/19 编程问答 21 豆豆

生活随笔收集整理的這篇文章主要介紹了 js 实现上下拖动改变父 div 的高度，左右上下拖动动态分割孩子的宽高小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

1. 需求

實(shí)現(xiàn)父 div 里面左右，上下動(dòng)態(tài)分割 div，并上下改變父 div 的高度，并且寬和高都是按百分比（如圖）。

2. 實(shí)現(xiàn)原理

2.1 父布局

首先一個(gè)父 div 為 hj-wrap，相對(duì)定位。
一個(gè)改變父 div 高度的 arrow，用于上下拖動(dòng) , 不能占有位置，所以要絕對(duì)定位，并定位到最右下角。
上下拖動(dòng)的 arrow，當(dāng)上拖動(dòng)時(shí)，arrow 的父 div 的高度變小，當(dāng)下拖動(dòng)時(shí)，arrow 的父 div 的高度變大。

2.2 橫向布局

每一個(gè)橫向的 div 為 hj-transverse-split-div 并相對(duì)定位，里面有一個(gè)拖動(dòng)改變左右的 label 為 hj-transverse-split-label ，不能占有位置，所以要絕對(duì)定位，并定位到最右邊并高為 100%，最后一個(gè)橫向的 div 不用 hj-transverse-split-label 。
拖動(dòng)改變左右的 label 時(shí)，向左時(shí)，label 的父 div 的寬變小，label 的父 div 相鄰的右邊的 div 寬度變大。

2.3 豎向布局

每一個(gè)橫向的 div 為 hj-vertical-split-div 并相對(duì)定位，里面有一個(gè)拖動(dòng)改變左右的 label 為 hj-vertical-split-label ，不能占有位置，所以要絕對(duì)定位，并定位到最下邊并寬為 100%，最后一個(gè)豎向的 div 不用再放 hj-vertical-split-label 的 label 。
拖動(dòng)改變上下的 label 時(shí)，向上時(shí)，label 的父 div 的高度變小，label 的父 div 相鄰的下邊的 div 高度變大。

3. js 實(shí)現(xiàn)

代碼：

/*** name: split.js* author: biaochen* date: 2018-12-26**/ $(function() {//鼠標(biāo)橫向、豎向、和改變父高度的上下操作對(duì)象var thisTransverseObject, thisVerticalObject, thisArrowObject;//文檔對(duì)象var doc = document;//橫向分割欄var transverseLabels = $(".hj-wrap").find(".hj-transverse-split-label");//豎向分割欄var verticalLabels = $(".hj-wrap").find(".hj-vertical-split-label");// 改變父高度的箭頭 divvar parentArrow = $(".hj-wrap").find(".arrow");// 設(shè)置寬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 {// 設(shè)置百分比var transverseDivs = $(".hj-transverse-split-div")var widthLength = transverseDivs.lengthfor (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 });}}}// 設(shè)置高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 {// 設(shè)置百分比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");//定義一個(gè)對(duì)象function PointerObject() {this.el = null; //當(dāng)前鼠標(biāo)選擇的對(duì)象this.clickX = 0; //鼠標(biāo)橫向初始位置this.clickY = 0; //鼠標(biāo)豎向初始位置this.transverseDragging = false; //判斷鼠標(biāo)可否橫向拖動(dòng)this.verticalDragging = false; //判斷鼠標(biāo)可否豎向拖動(dòng)}//橫向分隔欄綁定事件transverseLabels.bind("mousedown", function(e) {thisTransverseObject = new PointerObject();thisTransverseObject.transverseDragging = true; //鼠標(biāo)可橫向拖動(dòng)thisTransverseObject.el = this;thisTransverseObject.clickX = e.pageX; //記錄鼠標(biāo)橫向初始位置});//豎向分隔欄綁定事件verticalLabels.bind("mousedown", function(e) {//console.log("mousedown");thisVerticalObject = new PointerObject();thisVerticalObject.verticalDragging = true; //鼠標(biāo)可豎向拖動(dòng)thisVerticalObject.el = this;thisVerticalObject.clickY = e.pageY; //記錄鼠標(biāo)豎向初始位置});//上下綁定事件parentArrow.bind("mousedown", function(e) {//console.log("mousedown");thisArrowObject = new PointerObject();// thisArrowObject.transverseDragging = true; //鼠標(biāo)可橫向拖動(dòng)thisArrowObject.verticalDragging = true; //鼠標(biāo)可豎向拖動(dòng)thisArrowObject.el = this;thisArrowObject.clickY = e.pageY; //記錄鼠標(biāo)豎向初始位置});doc.onmousemove = function(e) {//鼠標(biāo)橫向拖動(dòng)if (thisTransverseObject != null) {if (thisTransverseObject.transverseDragging) {var changeDistance = 0;if (thisTransverseObject.clickX >= e.pageX) {//鼠標(biāo)向左移動(dòng)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 {//鼠標(biāo)向右移動(dòng)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);}}//鼠標(biāo)豎向拖動(dòng)if (thisVerticalObject != null) {if (thisVerticalObject.verticalDragging) {var changeDistance = 0;if (thisVerticalObject.clickY >= e.pageY) {//鼠標(biāo)向上移動(dòng)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 {//鼠標(biāo)向下移動(dòng)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) {//鼠標(biāo)豎向拖動(dòng)if (thisArrowObject.verticalDragging) {var changeDistance = 0;if (thisArrowObject.clickY >= e.pageY) {//鼠標(biāo)向上移動(dòng)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 {//鼠標(biāo)向下移動(dòng)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");// 鼠標(biāo)彈起時(shí)設(shè)置不能拖動(dòng)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. 完整代碼與效果

效果圖：

項(xiàng)目地址：https://github.com/biaochenxuying/split
效果體驗(yàn)地址： https://biaochenxuying.github.io/split/index.html

初始代碼是從網(wǎng)上來的，不過網(wǎng)上的并不完整，父 div 的高也不能改變，并且孩子的寬高并不是百分比的，布局也并不合理，所以修改成這樣子。

5. 最后

微信公眾號(hào)：BiaoChenXuYing
分享前端、后端開發(fā)等相關(guān)的技術(shù)文章，熱點(diǎn)資源，隨想隨感，全棧程序員的成長(zhǎng)之路。

關(guān)注公眾號(hào)并回復(fù) 福利便免費(fèi)送你視頻資源，絕對(duì)干貨。

福利詳情請(qǐng)點(diǎn)擊：免費(fèi)資源分享--Python、Java、Linux、Go、node、vue、react、javaScript

總結(jié)

以上是生活随笔為你收集整理的js 实现上下拖动改变父 div 的高度，左右上下拖动动态分割孩子的宽高的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： virtualbox+vagrant学习
下一篇：性能优化内存渲染存取时间