javascript - 在不使用 jQuery UI 的情况下使用 jQuery 模拟 div 的帧调整大小行为？

Question

我正在将客户的站点从框架集转换为 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

如果您尝试使用棕色条调整标有“侧边栏”的东西的大小，就会发现问题。

Answer 1

看http://www.jsfiddle.net/gaby/Bek9L/

我将 #main 区域更改为 left:200px(并且没有宽度)。
在 mousedown 上添加了 e.preventDefault() 以避免选择文本。
在代码中，我也更改了 #main 的 left 属性，因此双方都移动了..

---

不确定您的问题到底是什么，但看到的是 #sidebar 已调整大小但位于 #main 下方，因此 #拖动条消失了..