我正在尝试在容器内创建一个可调整大小的滑动条。由于某种原因,可调整大小的方法将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", '');
        }
    });
});


任何帮助,将不胜感激;谢谢!

最佳答案

我找不到原始缺陷报告的原因,但是很明显,这是故意的,很可能是特定于浏览器的……肮脏的解决方案可能是您最好的选择。

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});
  }

09-11 00:09
查看更多