jQuery的拖放，並按照鼠標

Question

我試圖創建一個具有中心的拖杆兩列可滑動的區域，看到這個小提琴：http://jsfiddle.net/W7tGj/2/

我試圖避免增加JQ-UI到混合，所以任何幫助將不勝感激。我覺得我錯過了簡單的事情。

Answer 1

第一： - 添加容器div來檢查鼠標移動

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

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

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

二： - 添加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/，儘管它仍然不能支持拖拽，它確實做正確的事情，當鼠標向下