Question

我正在尝试实现分隔符，该分隔符应能够在拖放时调整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 link for the above code

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

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

Div在不使用jQuery UI的情况下根据分隔符的拖放来调整大小

0 个答案: