3

I'm trying to create a two-column slideable region with a drag-bar in the center, see this Fiddle: http://jsfiddle.net/W7tGj/2/

I'm trying to avoid adding jQ-UI to the mix, so any help would be appreciated. I feel like I'm missing something simple.

Fluidbyte
  • 5,162
  • 9
  • 47
  • 76
  • 1
    I kinda got it working...it works if you move the mouse really slowly while dragging. http://jsfiddle.net/W7tGj/2/ Take a look at this: http://stackoverflow.com/questions/1572483/jquery-mousedown-mousemove – mittmemo Aug 28 '12 at 01:55
  • jQ UI is probably the best way to go. There are some other plugins out there that do what you want. i.e. http://www.methvin.com/splitter/ – Nal Aug 28 '12 at 02:13

2 Answers2

2

First : - add container div 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 mousemove event into 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'});
    }
});
Rahadyan Permana
  • 36
  • 3
  • I had tried something similar (detecting mouseup/down and setting a var) but missed isolating it to the container. Thanks! – Fluidbyte Aug 28 '12 at 13:09
0

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

S.831
  • 113
  • 1
  • 10