ドラッグ可能なオブジェクトは、私は私がこのJSFiddleを作っ <p>JQueryUI</p>に&ドロップ/ドラッグ可能な機能、ドラッグを使用してカスタムスクロールバーを作っしよう

Question

ウィンドウのサイズが変更される容器の外に行く：

http://jsfiddle.net/96k2ysbf/1/

HTML

<div id="scrollbar-zone" class="w85pc"> 
    <div id="scrollbar" style=""></div> 
</div> 

CSS

.w85pc{ 
    width: 80%; 
    margin: 0 auto; 
} 

#scrollbar-zone{ 
    border: 1px solid black; 
    height: 30px; 
} 

#scrollbar{ 
    border: 1px solid red; 
    height: 100%; 
    width: 10px; 
} 

Javascriptを

$("#scrollbar").draggable({ 
    axis: "x", 
    containment: 'parent' 
}); 

それは正常に動作しますが、私は、ウィンドウのサイズを変更すると、時々、ドラッグ可能なオブジェクトは、親要素outsite行き、私はそれを避けたいです。

この問題を解決する最も簡単な方法は何ですか？私はresize()イベントを使うことができましたが、もっと良い解決策があります。

Answer 1

stopイベントで位置をパーセンテージに変換することができます。したがって、スクロールバーのサイズを変更すると比例した位置が維持されます。このように：

$("#scrollbar").draggable({ 
    axis: "x", 
    containment: 'parent', 
    stop: function(e, ui) { 
    var perc = ui.position.left/ui.helper.parent().width() * 100; 
    ui.helper.css('left', perc + '%'); 
    } 
}); 

http://jsfiddle.net/axmgm2j2/