javascript – 使用jQuery在不使用jQuery UI的情况下使用div来模拟框架大小调整行为？

我正在将客户端的站点从框架集转换为div.客户端具有的一个功能是可以根据用户需要多少空间来调整大小的侧边栏.使用框架,这个侧边栏的大小是内置的.但是,我在jQuery中模拟这个功能有一些困难.

我不希望使用jQuery UI来做到这一点,我不需要UI套件提供的所有额外的功能,而只是编写几行代码来处理这个问题.

我只需要在水平面调整大小,垂直尺寸是固定的.

目前我有一个解决方案(一种)的作品.侧边栏div可以调整大小,但只有当用户点击可调整大小的div时,拖动鼠标,然后再次单击div(删除mousemove事件).

我想要的经验是：用户将鼠标悬停在可调整大小的div上,按下鼠标按钮,然后拖动div更大/更小,并释放按钮.

我遇到的问题是：如果用户点击我的可调整大小的div,然后尝试拖动它使其更小/更大,鼠标成为“否”图标,并且我的div的透明版本是药物周围用鼠标.

也许这更好地解释了检查我的代码：.

$(document).ready(function() {
var i = 0;
   $('#dragbar').mousedown(function(){
        $('#mousestatus').html("mousedown" + i++);
       $(document).mousemove(function(E){
          $('#position').html(e.pageX +','+ e.pageY);
          $('#sidebar').css("width",e.pageX+2);
       })
       console.log("leaving mouseDown");
    });
   $(document).mouseup(function(){
       $('#clickevent').html('in another mouseUp event' + i++);
       $(document).unbind('mousemove');
       });
});

和HTML：

<div id="header">
    header
    <span id="mousestatus"></span>
    <span id="clickevent"></span>
</div>
<div id="sidebar">
     <span id="position"></span>
    <div id="dragbar">
    </div>
    sidebar
</div>
<div id="main">
    main
</div>
<div id="footer">
    footer
</div>

这是一个基本布局工作的临时网页：

http://pastehtml.com/view/1crj2lj.html

如果您尝试使用棕色条调整标有“侧边栏”的东西,则可以看到问题.