时间戳

首页 > 解决方案 > 无需jQuery UI即可在分隔符的拖放上调整Div大小

javascript - 无需jQuery UI即可在分隔符的拖放上调整Div大小

问题描述

我正在尝试实现分隔符，它应该能够在拖放时调整 div 的大小。我已经尝试过，但我的代码没有按预期工作。下面是我的代码

HTML

<html style="overflow-y: hidden!important;" >
   <head>       
<meta name="description" content="Separator">
   </head>
   <body >
      <div id="container" >
         <div id="div1" >As of 2016 the WHO website on environmental health states "Environmental health addresses all the physical, chemical, and biological factors external to a person, and all the related factors impacting behaviours. It encompasses the assessment and control of those environmental factors that can potentially affect health. It is targeted towards preventing disease and creating health-supportive environments. This definition excludes behaviour not related to environment, as well as behaviour related to the social and cultural environment, as well as genetics."[2]

The WHO has also defined environmental health services as "those services which implement environmental health policies through monitoring and control activities. They also carry out that role by promoting the improvement of environmental parameters and by encouraging the use of environmentally friendly and healthy technologies and behaviors. They also have a leading role in developing and suggesting new policy areas
        </div>

         <div class="separator"></div>

         <div id="div2" >As of 2016 the WHO website on environmental health states "Environmental health addresses all the physical, chemical, and biological factors external to a person, and all the related factors impacting behaviours. It encompasses the assessment and control of those environmental factors that can potentially affect health. It is targeted towards preventing disease and creating health-supportive environments. This definition excludes behaviour not related to environment, as well as behaviour related to the social and cultural environment, as well as genetics."[2]

The WHO has also defined environmental health services as "those services which implement environmental health policies through monitoring and control activities. They also carry out that role by promoting the improvement of environmental parameters and by encouraging the use of environmentally friendly and healthy technologies and behaviors. They also have a leading role in developing and suggesting new policy areas</div>
      </div>
   </body>
</html>

Javascript

var oSeparator = document.querySelector(".separator"),
  oPrevEl = oSeparator.previousElementSibling,
  oNextEl = oSeparator.nextElementSibling;

    var iIniSepTop;
    var iIniNextElHeight;
    var bDrag = false;

function dragStart(oEvent) {  
  if(oEvent.target == oSeparator) {
    bDrag = true;
    iIniSepTop = oEvent.clientX - oPrevEl.offsetTop;
    iIniNextElHeight = oNextEl.style.height;
  }  
}
function dragEnd(oEvent) {
  bDrag = false;  
}
function drag(oEvent) {  
  if(bDrag){
    oEvent.preventDefault();    
    var iXDiff = iIniSepTop - oEvent.clientX;
    oPrevEl.style.height = oEvent.clientX - oPrevEl.offsetTop;
    oNextEl.style.height = iIniNextElHeight + iXDiff;
  }  
}

oSeparator.addEventListener("mousedown", dragStart, false);
oSeparator.addEventListener("mouseup", dragEnd, false);
oSeparator.addEventListener("mousemove", drag, false);

CSS

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#container {
  height: 100%;
}
.separator {
  height: 5px;
  background-color: grey;
  cursor: n-resize;
  position: relative;
}
.separator:hover {
  background-color: #5d5c5c;
}
#div1,#div2 {
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto !important;
  position: relative;
  height: 50%; 
}

上述代码的 JS Bin 链接

请不要建议使用 jQuery UI 或任何其他插件，因为我一直在使用相同的插件，我不想使用它来减少整体代码大小，而且我不认为仅将其用于这一功能整个应用程序。

它没有按预期工作（Div 的高度应该调整大小并根据分隔符拖放时页面的相对高度进行调整）。

标签： javascripthtmlcss

解决方案

推荐阅读