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

Question

我正在开发新仪表板的点击和滑出面板功能。

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

代码笔: http://codepen.io/leongaban/pen/gbVpry

单击并拖动红色 div，我可以获得一个新的 x 位置，我尝试将该值添加到 drag-container(橙色 div)的宽度，即应该拉伸(stretch)的 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