JQueryUI - 可調整大小迫使我的div從位置：相對於絕對

Question

我試圖在容器中創建一個滑動，可調整大小的欄。出於某種原因，可調整大小的方法是將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", 
     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 }); 
}