Question

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

我已经尝试连接到Stop和Resize事件并转换回Position：Relative，但这是一个非常黑客，结果并不完美。看起来这应该有效吗？

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

.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 2

我找不到原始缺陷报告的原因，但它显然是故意的，很可能是特定于浏览器的......一个肮脏的解决方案可能是你最好的。

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 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

JQueryUI - Resizable强制我的div从Position：Relative到Absolute切换

4 个答案: