如何根据另一个div的位置增加div的大小-Vanilla JavaScript

Question

我正在研究新仪表板的单击和滑出面板功能。

目标是在不使用jQuery-UI或jQuery，纯Javascript或Angular的情况下实现这一目标。

Codepen： http ：//codepen.io/leongaban/pen/gbVpry

单击并拖动红色div，我可以得到一个新的x位置，我尝试将该值添加到drag-container的宽度（橙色div）中，该宽度应该是要拉伸的div。

到目前为止，我尝试过的所有技术都没有奏效。

您在这里看到我做错了吗？

window.onload = addListeners();

var xPosition = 0;

var wW = window.innerWidth;
console.log(wW);

function addListeners() {
    document.getElementById('drag-container').addEventListener("click", getClickPosition, false);

    document.getElementById('dragger').addEventListener('mousedown', mouseDown, false);
    window.addEventListener('mouseup', mouseUp, false);
}

function getClickPosition(e) {
    xPosition = e.clientX;
    console.log(xPosition);
}

function mouseUp() {
    window.removeEventListener('mousemove', divMove, true);
}

function mouseDown(e) {
  window.addEventListener('mousemove', divMove, true);
}

function divMove(e) {

    var max = (window.innerWidth - 50);
    var x = event.clientX;
    var div = document.getElementById('dragger');
    var offset = div.offsetWidth/2;
    var orangeDiv = document.getElementById('drag-container');

    //console.log(max);

    if (x > (100 + offset) && x < (max+offset)) {

        div.style.position = 'absolute';

        div.x = xPosition;

        div.style.left = (e.clientX - offset) + 'px';

          //orangeDiv.offsetWidth = (orangeDiv.offsetWidth + x);
        orangeDiv.style.width = (orangeDiv.style.width + x);

          console.log(orangeDiv.style.width);
        //console.log(x);
    }
}

Answer 1

我认为这可能有些复杂，但是我发现了一些问题。 如果您要这样做，那么下面的修复程序对我有用。

orangeDiv.style.width = (x - 40 + 'px');

http://codepen.io/anon/pen/QwejWg