摘要:需求實現父里面左右,上下動態分割,并上下改變父的高度,并且寬和高都是按百分比如圖。一個改變父高度的,用于上下拖動不能占有位置,所以要絕對定位,并定位到最右下角。上下拖動的,當上拖動時,的父的高度變小,當下拖動時,的父的高度變大。
1. 需求
實現父 div 里面 左右,上下動態分割 div,并上下改變父 div 的高度,并且寬和高都是按百分比(如圖) 。
2. 實現原理 2.1 父布局首先一個父 div 為 hj-wrap,相對定位 。
一個改變父 div 高度的 arrow,用于上下拖動 , 不能占有位置,所以要絕對定位,并定位到最右下角。
上下拖動的 arrow,當上拖動時,arrow 的父 div 的高度變小,當下拖動時,arrow 的父 div 的高度變大。
2.2 橫向布局橫 向橫 向 2橫 向 3橫 向 4橫 向 5
每一個橫向的 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 為 hj-vertical-split-div 并相對定位,里面有一個拖動改變左右的 label 為 hj-vertical-split-label ,不能占有位置,所以要絕對定位,并定位到最下邊并寬為 100%,最后一個豎向的 div 不用再放 hj-vertical-split-label 的 label 。
拖動改變上下的 label 時,向上時,label 的父 div 的高度變小,label 的父 div 相鄰的下邊的 div 高度變大。
3. js 實現代碼:
/** * 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.html
初始代碼是從網上來的,不過網上的并不完整,父 div 的高也不能改變,并且孩子的寬高并不是百分比的,布局也并不合理,所以修改成這樣子。
5. 最后微信公眾號:BiaoChenXuYing
分享 前端、后端開發等相關的技術文章,熱點資源,隨想隨感,全棧程序員的成長之路。
關注公眾號并回復 福利 便免費送你視頻資源,絕對干貨。
福利詳情請點擊: 免費資源分享--Python、Java、Linux、Go、node、vue、react、javaScript
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/53490.html
摘要:需求實現父里面左右,上下動態分割,并上下改變父的高度,并且寬和高都是按百分比如圖。一個改變父高度的,用于上下拖動不能占有位置,所以要絕對定位,并定位到最右下角。上下拖動的,當上拖動時,的父的高度變小,當下拖動時,的父的高度變大。 showImg(https://upload-images.jianshu.io/upload_images/12890819-b26f439121646da...
摘要:需求實現父里面左右,上下動態分割,并上下改變父的高度,并且寬和高都是按百分比如圖。一個改變父高度的,用于上下拖動不能占有位置,所以要絕對定位,并定位到最右下角。上下拖動的,當上拖動時,的父的高度變小,當下拖動時,的父的高度變大。 showImg(https://upload-images.jianshu.io/upload_images/12890819-b26f439121646da...
閱讀 3118·2021-11-15 18:14
閱讀 1773·2021-09-22 10:51
閱讀 3283·2021-09-09 09:34
閱讀 3505·2021-09-06 15:02
閱讀 1013·2021-09-01 11:40
閱讀 3186·2019-08-30 13:58
閱讀 2523·2019-08-30 11:04
閱讀 1081·2019-08-28 18:31