jquery - jQuery ドラッグ アンド フォロー マウス

Question

中央にドラッグバーがある 2 列のスライド可能な領域を作成しようとしています。この Fiddle を参照してください: http://jsfiddle.net/W7tGj/2/

私はミックスにjQ-UIを追加することを避けようとしているので、助けていただければ幸いです。シンプルなものが欠けているような気がします。

Answer 1

最初: - コンテナー div を追加して、mousemove をチェックします。

<div id="content-div">
  <div id="left-panel">f</div>

  <div id="drag-bar">f</div>

  <div id="right-panel">f</div>
</div>

2 番目 : - mousemove イベントを div コンテナーに追加します。

var movebar = false; 

$('#drag-bar').mousedown(function(e){
    movebar = true;
});

$('#drag-bar').mouseup(function(e){
    movebar = false;
});

$('#content-div').mousemove(function(e){
    if(movebar)
    {
        var x = e.pageX;
        $('#left-panel').css({'width': x+'px'});
        $('#right-panel').css({'margin-left': (x+5)+'px'});
    }
});

Answer 2

この方法で試してください、http：//jsfiddle.net/W7tGj/6/、それでもドラッグをサポートすることはできませんが、マウスが下がっているときに正しいことをします