4

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

JSFiddle 示例

我曾尝试连接到 Stop 和 Resize 事件并转换回 Position:Relative，但这是一个相当的 hack，结果并不完美。看来这应该可以工作？

查询：

$(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", '');
        }
    });
});

任何帮助，将不胜感激; 谢谢！

4

4 回答 4

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

于 2012-11-23T03:13:20.860 回答
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});
  }
于 2012-07-25T04:27:43.520 回答
0

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

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 });
}
于 2013-05-06T14:47:20.550 回答
0

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

于 2020-03-20T12:25:03.583 回答