从两端调整div的大小

Question

我正在制作div resizer并且不能使用任何插件,因为我需要在它的基础上定制很多东西.我已经完成了从右侧调整div的大小的任务.在这里我操纵拖动并相应地计算单位.

如果我将拖动限制在右侧,则此脚本可以正常工作.但现在我的任务是在两端调整大小.我知道会应用一些技巧.

我试图应用的一种技术是div的一半并注意到距离中心点的距离,例如,如果中心是200px而鼠标是10px,那么我们可以从右边开始减小div,反之亦然.

var handle, measurement, isResizing;
var pageWidth = $(window).width();
var maxUnit = 300;
var minUnit = 50;
var maxLimit;
var adjustment = 0;
var container;

function calculateUnit(maxUnit, maxLimit, currentWidth) {
  var offset = maxLimit - currentWidth;
  return Math.ceil(maxUnit - offset);
}

function adjustContainer(innerContainerWidth, widthDiff, heightDiff) {
  handle.css({
    'width': (innerContainerWidth - widthDiff) + 'px',
    'left': (widthDiff / 2) + 'px',
    'top': (heightDiff / 2) + 'px'
  });
}

function InitSizeCalculator() {
  container = $("#topDrag");
  console.log('height c', container.height());
  //console.log('width c', container.width());
  handle = $('#drag'), measurement = document.getElementById('measurement'), isResizing = false;
  var heightDiff = container.height() - 170;
  var widthDiff = container.width() - handle.width();
  console.log('height c', heightDiff);
  //maxLimit = (pageWidth <= 720) ? (pageWidth - 20) : (pageWidth - (pageWidth / 3)) - 60;
  maxLimit = container.width();
  adjustContainer(handle.width(), widthDiff, heightDiff);
  //handle.css('width', maxLimit);

  measurement.innerHTML = maxUnit + ' m';
}
InitSizeCalculator(); //initialize the variable first 
handle.on('mousedown touchstart', function(e) {
  isResizing = true;
  lastDownX = e.clientX;
});

$(document).on('mousemove touchmove', function(e) {
    var currentWidth = e.clientX - adjustment;
    console.log(e.clientX);
    // we don't want to do anything if we aren't resizing.
    var unit = calculateUnit(maxUnit, maxLimit, currentWidth);
    if (!isResizing || unit < minUnit || e.clientX > maxLimit)
      return;
    handle.css('width', currentWidth);
    measurement.innerHTML = unit + ' cm';
  })
  .on('mouseup touchend', function(e) {
    // stop resizing
    isResizing = false;
  });
//start

.imgContainer-p {
  position: relative !important;
  border-right: black 1px dashed;
  border-left: black 1px dashed;
  cursor: w-resize;
  height: 220px
}
#drag {
  position: absolute;
  /*right: 500px;*/
  top: 0;
  bottom: 0;
  /*width: 500px;*/
}
.imgWinder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  /*height: 200px;*/
  height: 90%;
}
.imgPaper {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  /*height: 200px;*/
  height: 90%;
}
.measurment-p {
  width: 100%;
  height: 20px;
  border-bottom: 1px dashed black;
  border-left: 1px dashed black;
  border-right: 0px dashed black;
  padding-top: 10px;
  text-align: center;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-md-9 col-sm-12" id="topDrag">
  <div class="imgContainer-p" id="drag">
    <img id="imgWinder" class="imgWinder" draggable="false" src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f6/Cylinder_geometry_rotated.svg/2000px-Cylinder_geometry_rotated.svg.png" />


    <div style="width: 100%; height: 20px; border-bottom: 1px dashed black; border-left: 1px dashed black; border-right: 0px dashed black; padding-top: 10px; text-align: center">
      <span style="background-color: #FFFFFF; padding: 0 10px;">
                                    <span class="label label-default">Size</span>
      <span class="label label-warning" id="measurement">01</span>

      <!--Padding is optional-->
      </span>
    </div>

  </div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 1

1. 当您从右侧拖动元素以展开它时，您可以通过将拖动操作中覆盖的像素数添加到其宽度来有效地更新该元素的右侧位置。

2. 这就是元素在浏览器中的行为方式 - 从左到右，因此类似于使用 CSS 增加宽度。但是当您拖动它的另一侧（即左侧）时，浏览器不知道如何处理此问题。

3. 现在，由于您将元素的大小调整到左侧，因此那里有空间，并且元素的左边缘移动到该空间中的新位置，但您无法向左侧添加宽度。因此，您必须通过将右边缘保持在当前位置来给人一种将其添加到左侧的错觉。

4. 当您向左拖动元素的左边缘时，计算其旧的左侧位置和新的左侧位置之间的差值，并将其添加到元素的宽度中。这将确保宽度扩大以适应新的位移。

5. 当您将左边缘拖动到右侧时，要缩小元素，请执行相同的过程，只是从总宽度中减少而不是添加它。

6. 当您将右侧向左拖动，从而减少调整大小时，计算差异并从宽度中减少它。

这应该对您的代码有帮助：

通过拖动其左/上边框来调整 div 的高度/宽度，无需 jQuery 拖动？