使用jQuery在不使用jQuery UI的情况下使用div模拟frame-resize行为？

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(并且没有宽度).
添加e.preventDefault()了mousedown以避免选择要发生的文本.
在代码中我改变了left属性,#main所以双方移动..

不确定你的问题到底是什么,但是看到的#sidebar是调整大小但是在下面#main,所以#dragbar消失了......