/** * by SPACE ^_^ * 2019年5月8日 */ var dragHeight = {}; var lastRecord = {}; // 设定监听回调函数 var observer = new MutationObserver(function(mutations) { if (mutations.length > 1) { return; } initDragHeight(); var div = $(mutations[0].target); var divAll = $(div).nextAll("div.scrollbar"); var childerAry = $(div).children("div"); var childerAryLength = $(childerAry).length; // 自己是最后一个 var isBottomFlag = false; // 当前元素如果是最后一个,为真,否则为假 var ulHeight = getUlTop(); //UL容器高度 if (divAll.length == 0) { isBottomFlag = true; } // 没到底,自己自增高度 if (dragHeight.maxHeight > ulHeight) { // 新增节点 if (mutations[0].addedNodes.length > mutations[0].removedNodes.length) { var countHeight = childerAryLength * $(childerAry[0]).height(); // 出现滚动条,就增加高度,否则不增加高度,由样式控制 var h = $(div).height(); if (countHeight >= h) { } else { $(div).height(($(div).height() + lastRecord.height) + "px"); } } // 删除节点 else { // 自己设置了高度,就判断子元素总高度是否大于当前高度 if (style.indexOf("height") != -1) { var countHeight = childerAryLength * lastRecord.height; // 总高度大于当前元素高度,不做处理 if (countHeight > $(div).height()) {} // 总高度小于当前元素高度,删除掉高度样式 else { $(div).css({ height: "" }); } } } } // 到底了,缩小上面的同辈元素 else { var allBt = false; // 是否全部元素已经缩到最小,全部缩小为真,否则为假 var comp = function(divAll, allBt) { for (var i = 0; i < divAll.length; i++) { var height = $(divAll[i]).height(); // 当前元素不能被缩放 if ((height <= lastRecord.height) || ((height - lastRecord.height) < lastRecord.height)) { // 没有到底,且所有元素都已经缩到最小,就只放大自己 var ulHeight2 = getUlTop(); //UL容器高度 if (dragHeight.maxHeight > ulHeight2 && i == divAll.length - 1) {} // 到底,啥都不做 else { continue; } } else { allBt = true; $(divAll[i]).height((height - lastRecord.height) + "px"); break; } } } // 自己是最后一个 if (isBottomFlag) { divAll = $(div).prevAll("div.scrollbar"); comp(divAll, allBt); } // 不是最后一个 else { divAll = $(div).nextAll("div.scrollbar"); comp(divAll, allBt); // 下面的都不能缩小了,就缩小上面的 if (!allBt) { divAll = $(div).prevAll("div.scrollbar"); // 上面没有元素了 if (divAll.length == 0) { allBt = true; } else { comp(divAll, allBt); } } } // 全部都不能再缩小了,就给自己添加一个高度 if (allBt) { $(div).height($(div).height() + "px"); } } $(div).next("div.plugin-dragHeight").remove(); if (isBottomFlag || childerAryLength == 0 || childerAryLength == 1) { $(div).after(''); } else { $(div).after('
'); } initAllEvent(); }); $(document).ready(function() { $("div.iconList-div").on('click', function() { console.log("div.iconList-div ——————>") setTimeout(function() { initDragHeight(); }, 100); }) $("div.cardList-div").on('click', function() { console.log("div.cardList-div ——————>") setTimeout(function() { initDragHeight(); }, 100); }) $("body").on('click', "div.td_div", function() { console.log("div.td_div-div ——————>") setTimeout(function() { initDragHeight(); }, 100); }) var target = $("[ssRbar] div.scrollbar"); // ("[wdRightBar]。Lin for (var i = 0; i < target.length; i++) { observer.observe($(target[i])[0], { childList: true, }) } initMaxMinTitle(); }) function initDragHeight() { var dragHeightAry = $("[ssRbar]"); // ("[wdRightBar]")。Lin if (dragHeightAry.length == 0) { console.log("未发现 ssRbar 标记"); return false; } dragHeight.contentDom = $(dragHeightAry[0]); dragHeight.ulDom = $(dragHeight.contentDom).children("ul")[0]; dragHeight.initDragResult = function() { $(dragHeight.ulDom).find("div.plugin-dragHeight").remove(); var cDivAry = $(dragHeight.ulDom).children("div.scrollbar"); for (var i = 0; i < cDivAry.length; i++) { var childerAry = $(cDivAry[i]).children("div.sideList"); var childerAryLength = $(childerAry).length; if (childerAryLength == 0) { childerAry = $(cDivAry[i]).children("span.sideList"); childerAryLength = $(childerAry).length; } if (childerAryLength == 0) { $(cDivAry[i]).height("0px"); $(cDivAry[i]).css({ height: "" }); } else { lastRecord.height = $(childerAry[0]).height(); if (childerAryLength < 3) { $(cDivAry[i]).height(($(childerAry[0]).height() * childerAryLength) + "px"); } else { $(cDivAry[i]).height(($(childerAry[0]).height() * 3) + "px"); } } if (i == (cDivAry.length - 1) || childerAryLength == 0 || childerAryLength == 1) { $(cDivAry[i]).after(''); continue; } $(cDivAry[i]).after('
'); } return true; }; dragHeight.initDragResult(); dragHeight.maxHeight = $(dragHeight.contentDom).height(); dragHeight.dragAry = $(dragHeight.ulDom).children("div.plugin-dragHeight"); for (var i = 0; i < dragHeight.dragAry.length; i++) { initEvent(dragHeight.dragAry[i], i); } // 高度自适应调整 initAutoHeight(); } function initAutoHeight() { dragHeight.ulDom = $(dragHeight.contentDom).children("ul")[0]; var cDivAry = $(dragHeight.ulDom).children("div.scrollbar"); console.log("dragHeight.maxHeight=" + dragHeight.maxHeight); var ulHeight = getUlTop(); //UL容器高度 for (var i = 0; i < cDivAry.length; i++) { var _height = $(cDivAry[i]).height(); var _childerAry = $(cDivAry[i]).children("div.sideList"); if (_height == 0 || _childerAry.length == 0) { continue; } var _childrenAryLength = $(_childerAry).length; var _childrenHeight = $(_childerAry[0]).height(); var _countHeight = _childrenAryLength * _childrenHeight; // 理论总高度 var autoFlag = false; // 处理完成为真,否则为假 // 出现滚动条 if (_countHeight > _height) { if (autoFlag) { continue; } // 误差高度 var wc = _countHeight - _height; // 获取误差高度加上之后的总高度 var _totalHeight = ulHeight + wc; if (_totalHeight > dragHeight.maxHeight) { // 大于最大高度,裁剪部分高度 autoFlag = true; var h = $(cDivAry[i]).height() + (dragHeight.maxHeight - ulHeight); if (h < _childrenHeight) { h = _childrenHeight; } $(cDivAry[i]).height(h + "px"); // break; } // 小于最大高度,全部展开 else { $(cDivAry[i]).height(_countHeight + "px"); ulHeight = getUlTop(); } } else { $(cDivAry[i]).css({ height: "" }); } } } function initAllEvent() { dragHeight.dragAry = $(dragHeight.ulDom).children("div.plugin-dragHeight"); for (var i = 0; i < dragHeight.dragAry.length; i++) { initEvent(dragHeight.dragAry[i], i); } } function initEvent(obj, index) { obj.onmousedown = function(ev) { var ev = ev || window.event; var locaY = ev.clientY; // Y轴坐标 var divObj = $(obj).prev("div.scrollbar"); // 内容容器 var objHeight = $(divObj).height(); // 当前所属容器的高度 var objSize = getMaxMinHeight(divObj); // 当前所属容器的最大高度和最小高度 var nextDom = getNextDivObj(index); // 当前元素的下一个有内容的元素 document.onmousemove = function(ev) { dragHeight.ulHeight = getUlTop(); // 获取外层容器高度 var ev = ev || window.event; var curHeight = ev.clientY - locaY + objHeight; var isMinHeight = false; // 如果最小高度,为真,否则为假 if (curHeight < objSize.min) { curHeight = objSize.min; isMinHeight = true; } if (curHeight > objSize.max) { curHeight = objSize.max; } if (curHeight < objHeight) { for (var i = index; i < dragHeight.dragAry.length; i++) { // 当前元素的下一个有内容的元素 var _nextDom = getNextAutoDivObj(i); if (_nextDom == undefined) { // 元素为空 // 自己还可以缩小 if (!isMinHeight) { $(divObj).height(curHeight + 'px'); } continue; } // 最后一个且最大高度 if (_nextDom.index == dragHeight.dragAry.length - 1 && _nextDom.height >= _nextDom.max) { $(divObj).height(curHeight + 'px'); continue; } if (_nextDom.height >= _nextDom.max) { continue; } var _h = 0; _h = _nextDom.height + ($(divObj).height() - curHeight); if (_h <= _nextDom.min) { _h = _nextDom.min; } else if (_h >= _nextDom.max) { _h = _nextDom.max; } $(dragHeight.dragAry[_nextDom.index]).prev("div.scrollbar").height(_h + "px"); $(divObj).height(curHeight + 'px'); } return false; } var nextDomHeight = 0; if (nextDom != undefined) { nextDomHeight = nextDom.height + (objHeight - curHeight); if (nextDomHeight < nextDom.min) { nextDomHeight = nextDom.min; } if (nextDomHeight > nextDom.max) { nextDomHeight = nextDom.max; } } // 碰到底部啦 if ((dragHeight.ulHeight > dragHeight.maxHeight && nextDom == undefined && curHeight >= $(divObj).height()) || (dragHeight.ulHeight > dragHeight.maxHeight && nextDom != undefined && nextDomHeight <= nextDom.min)) { console.log("bottom"); for (var i = index + 1; i < dragHeight.dragAry.length; i++) { // 当前元素的下一个有内容的元素 var _nextDom = getNextAutoDivObj(i); if (_nextDom == undefined) { // 元素为空 continue; } if (_nextDom.height <= _nextDom.min) { continue; } var _h = 0; _h = _nextDom.height + ($(divObj).height() - curHeight); if (_h <= _nextDom.min) { _h = _nextDom.min; } else if (_h >= _nextDom.max) { _h = _nextDom.max; } $(dragHeight.dragAry[_nextDom.index]).prev("div.scrollbar").height(_h + "px"); $(divObj).height(curHeight + 'px'); } return false; } if (nextDom != undefined) { $(dragHeight.dragAry[nextDom.index]).prev("div.scrollbar").height(nextDomHeight + "px"); } $(divObj).height(curHeight + 'px'); } document.onmouseup = function() { var _t = getUlTop(); if (_t > dragHeight.maxHeight) { var _h = $(divObj).height(); _h = _h - (_t - dragHeight.maxHeight); var size = getMaxMinHeight(divObj); // 不能再减了! if (_h <= size.min) { for (var i = index + 1; i < dragHeight.dragAry.length; i++) { var _nextDom = getNextAutoDivObj(i); var _oS = (_t - dragHeight.maxHeight); if ((_nextDom.height - _oS) < _nextDom.min) { continue; } else { $(dragHeight.dragAry[_nextDom.index]).prev("div.scrollbar").height(_nextDom.height - _oS + "px"); break; } } } else { $(divObj).height(_h + "px"); } } document.onmousemove = null; document.onmouseup = null; } return false; } } /** * 获取一个容器的最大宽度和最小宽度 * @param {Object} obj */ function getMaxMinHeight(obj) { var cAry = $(obj).children("div"); if (cAry.length == 0) { return { max: 0, min: 0 } } return { max: ($(cAry[0]).height()) * cAry.length, min: $(cAry[0]).height() } } /** * 获取当前元素的下一个有内容的Div对象 * @param {Object} obj * @param {Object} index */ function getNextDivObj(index) { var dom; index += 1; for (var i = index; i < dragHeight.dragAry.length; i++) { // DIV内容 容器 var nextDivObjDom = $(dragHeight.dragAry[i]).prev("div.scrollbar"); // 容器元素数组 var cAry = $(nextDivObjDom).children("div"); if (cAry.length == 0) { index = i; continue; } else { dom = getMaxMinHeight(nextDivObjDom); dom.index = i; dom.height = $(nextDivObjDom).height(); return dom; } } return undefined; } /** * 获取当前元素的下一个有内容的Div对象,且高度未达到最小高度 * @param {Object} obj * @param {Object} index */ function getNextAutoDivObj(index) { var dom; index += 1; for (var i = index; i < dragHeight.dragAry.length; i++) { // DIV内容 容器 var nextDivObjDom = $(dragHeight.dragAry[i]).prev("div.scrollbar"); // 容器元素数组 var cAry = $(nextDivObjDom).children("div"); if (cAry.length == 0) { index = i; continue; } dom = getMaxMinHeight(nextDivObjDom); if (dom.height <= dom.min) { dom = undefined; continue; } dom.index = i; dom.height = $(nextDivObjDom).height(); return dom; } return undefined; } /** * 获取当前父容器的高度 */ function getUlTop() { return $(dragHeight.ulDom).height(); } function initMaxMinTitle() { $("li.hLine").on("dblclick", function() { var status = $(this).attr("winStatus"); if (!status) { status = "min"; } if (status == "min") { var ulHeight = getUlTop(); //UL容器高度 $(dragHeight.ulDom).find("li.hLine").hide(); $(dragHeight.ulDom).find("div.scrollbar").hide(); var dragDiv = $(dragHeight.ulDom).find("div.plugin-dragHeight"); for (var i = 0; i < dragDiv.length; i++) { if(!$(dragDiv[i]).is(":hidden")) { $(dragDiv[i]).attr("status", "show"); } } $(dragHeight.ulDom).find("div.plugin-dragHeight").hide(); var cont_div = $(this).next("div.scrollbar"); $(this).show(); $(cont_div).show(); $(this).attr("oldHeight", $(cont_div).height()); // 原高度 $(this).attr("winStatus", "max"); // 代表已经最大了 var thisHeight = $(this).height(); // 当前标题的高度 var contDivHeight = ulHeight - thisHeight; if($(cont_div).attr("wdDragSmallMaxHeight")){ //放大后的高度 contDivHeight=$(cont_div).attr("wdDragSmallMaxHeight"); $(cont_div).css({"max-height":contDivHeight+"px"}); } $(cont_div).height(contDivHeight + "px"); } else { var oldHeight = $(this).attr("oldHeight"); // 原高度 $(this).attr("winStatus", "min"); // 代表是正常状态 var cont_div = $(this).next("div.scrollbar"); $(cont_div).height(oldHeight + "px"); $(cont_div).css({"max-height":null}); $(dragHeight.ulDom).find("li.hLine").show(); $(dragHeight.ulDom).find("div.scrollbar").show(); $(dragHeight.ulDom).find("div.plugin-dragHeight[status='show']").show(); } }); };