如何根据另一个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