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

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

JSFiddle Example

我试过挂钩停止和调整大小事件并转换回位置：相对,但这是一个非常黑客,结果并不完美.看来这应该有用吗？

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",w',resize: function (event,ui) {
            $(this).css("height",'');
        },stop: function (event,ui) {
            $(this).css("position",'');
            $(this).css("top",'');
            $(this).css("height",'');
        }
    });
});

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

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