JQuery Drag and Follow Mouse

Question

I am trying to create a double column area with the ability to slide with drag and drop in the center, see this script: http://jsfiddle.net/W7tGj/2/

I try not to add jQ-UI to the mix, so any help would be appreciated. I feel that I am missing something simple.

Answer 1

First: - add a div container to check mousemove

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

Second: - add the mousemove event to the div container

 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

try this, http://jsfiddle.net/W7tGj/6/ , although it still cannot support drag and drop, it does the right thing when the mouse is down