JQueryUI-可调整大小，迫使我的div从Position：Relative切换到Absolute

Question

我正在尝试在容器内创建可调整大小的滑动条。由于某种原因，可调整大小的方法将div从Position：Relative转换为Position：Absolute。然后，这在视觉上移动了盒子，并破坏了容器容器的滚动动作。

JSFiddle Example

我已经尝试挂接到Stop and Resize事件，然后转换回Position：Relative，但这是一个hack，结果并不理想。看来这应该工作吗？

JQuery：

$(document).ready(function () {
    $(".Timeline").draggable({
        axis: "x",
        containment: "parent"
    })
    .resizable({
        containment: "parent",
        handles: 'e, w'
    });
});

HTML：

<div style="width: 800px; overflow: auto;">
    <div id="TimelineCanvas">
        <div class="TimelineContainer">
            <div class="Timeline">
            </div>
        </div>
    </div>
</div>

样式：

#TimelineCanvas
{
    width: 2000px;
    height: 150px;
}
.TimelineContainer
{
    height: 75px;
    width: 100%;
    border: 1px solid black;
}
.Timeline
{
    position: relative;
    height: 75px;
    width: 75px;
    background-color: Gray;
    cursor: move;
}

到目前为止，我尽最大努力进行修复：

$(document).ready(function () {
    $(".Timeline").draggable({
        axis: "x",
        containment: "parent"
    })
    .resizable({
        containment: "parent",
        handles: 'e, w',
        resize: function (event, ui) {
            $(this).css("height", '');
        },
        stop: function (event, ui) {
            $(this).css("position", '');
            $(this).css("top", '');
            $(this).css("height", '');
        }
    });
});

任何帮助将不胜感激；谢谢！

Answer 1

我找不到原始缺陷报告以了解其发生原因，但这显然是故意的，很可能是特定于浏览器的...最好的解决方法是最好的。

https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.resizable.js#L242

  // bugfix for http://dev.jquery.com/ticket/1749
  if (el.is('.ui-draggable') || (/absolute/).test(el.css('position'))) {
      el.css({position: 'absolute',top: iniPos.top,left: iniPos.left});
  }

Answer 2

.resizable({
        grid: 25,
        containment: "#"+ $(this).parent().attr("id"), // The parent
        stop: function(e, $this) {
            $(this).css({
                position: "relative",
                left: $this.originalPosition.left,
                width:$this.originalSize.width
            });
        }
    })

应该是the right way。但是肯定不是（总是会因为draggable和re sizable发生位置-宽度冲突而发生问题），我们必须等待Jquery-ui 2.0 ...

Answer 3

这里是original jQuery UI ticket和更新的链接。代码中引用的票证不正确。

https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.resizable.js#L299

// bugfix for http://dev.jquery.com/ticket/1749
if ( (/absolute/).test( el.css("position") ) ) {
    el.css({ position: "absolute", top: el.css("top"), left: el.css("left") });
} else if (el.is(".ui-draggable")) {
    el.css({ position: "absolute", top: iniPos.top, left: iniPos.left });
}

Answer 4

您可以将可调整大小的对象的position属性设置为！important