13

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

如果您尝试使用棕色条调整标记为“侧边栏”的内容的大小，则可以看到问题。

4

2 回答 2

22

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

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

不知道你真正的问题是什么，但所看到的是#sidebar被调整大小但在下面#main，所以#dragbar消失了..

于 2011-01-12T20:14:29.203 回答
0

使用event.preventDefault.

$('#dragbar').mousedown(function(e){
   e.preventDefault();
   // ...
});

也许你也需要调用它mousemove。

于 2011-01-12T20:04:12.730 回答