拖动内部元素时，调整父元素大小（jQueryUI拖动）

Question

jsfiddle示例

当拖动#right元素时，我想调整其父级的大小。我的示例不起作用，我无法理解为什么。有什么提示如何修复它吗？

以防万一，我在尝试创建一个可调整大小的滚动条，类似于这个。但目前，我只对右侧的元素感兴趣。

- evfwcqcg

---

看起来可拖动行为取决于父元素的尺寸，并且不喜欢在调整项目的父元素大小时进行操作。 - techfoobar

Answer 1

最简单的解决方案如下（注意SCSS中#left和#right的更改）：

SCSS：

#container {
    width: 500px;
    height: 100px;
    background: #f9f9f9;
}

#nav {
    width: 100px;
    height: 100px;
    background: #e9e9e9;
    cursor: move;
}
#left {
    width: 10px;
    height: 100px;
    position: absolute;
    top:0;
    left:0px;
    background: #a9a9a9;
    cursor: w-resize;
    &:hover {
        background: #999;
    }
}
#right {
    width: 10px;
    height: 100px;
    position:absolute;
    top:0;
    right:0px;
    background: #a9a9a9;
    cursor: e-resize;
    &:hover {
        background: #999;
    }
}

JavaScript:

var cont = $("#container")
var nav = $("#nav")
var left = $("#left")
var right = $("#right")

nav.draggable({
    containment: cont
});

right.draggable({
    containment: cont,
    drag: function(e, ui) {
        nav.width(ui.position.left);
    }
});

唯一的问题是您在使用JavaScript时过于复杂了。ui.position.left中包含了您所需的所有信息。我所做的就是将内容从浮动更改为position:absolute;

- Graham Robertson

---

嗯，这看起来不错。一开始没想到改变CSS。 - Derek 朕會功夫

哦，你太过奖了 <3 我有些害羞了。但说真的：谢谢！ - Graham Robertson

Answer 2

您可以使用传统的纯JavaScript来实现此操作。
http://jsfiddle.net/DerekL/cCvGD/

var oriX = 0,
    oriW = 0,
    mousedown = false;
right.mousedown(function (e) {
    oriX = $(this).offset().left;             //store the initial x and width
    oriW = nav.width();
    mousedown = true;                         //mousedown sets to true
    e.stopPropagation();                      //prevent nav from being dragged
})
$(window).mousemove(function (e) {
    if(mousedown == true) {                   //only when mouse is down (dragging)
        nav.width(oriW + (e.clientX - oriX)); //calculate the width
    }
}).mouseup(function () {
    mousedown = false;                        //mousedown sets to false
});

两边都可以： http://jsfiddle.net/DerekL/cCvGD/1/

- Derek 朕會功夫

---

你绝对可以在这里使用jQuery。有一个解决方案。 - Graham Robertson

@GrahamRobertson - 当然可以，但是可能会很麻烦，因为“draggable”似乎依赖于父元素的大小。 - Derek 朕會功夫

draggable属性提供了相对于其所在容器的位置。只需要将右侧和左侧元素更改为position:absolute;而不是floats，并简化JavaScript以将宽度更改为ui.position.left即可。 - Graham Robertson

Answer 3

问题在于您正在更改导航容器的宽度，这会使右侧元素移动。因此，在您拖动它时，它会移动两倍的距离。

您可以通过在可拖动方法中重置右侧元素的位置来解决此问题。

right.draggable({
    containment: cont,
    drag: function(e, ui){
        dragged = ui.position.left;
        nav.width(originNavWidth + dragged);
        ui.position.left = nav.position.left;
    }
})

请查看：http://jsfiddle.net/vf4eS

- Nate

---

当 nav 的宽度大于以前时，它就无法工作。 - Derek 朕會功夫

对的，这仍然存在每次拖动都会重置回原始宽度的问题。看起来Graham通过更改CSS以不使用浮动来解决了这个问题。 - Nate