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()以避免选择要发生的文本在代码中我改变了left的{{1}}属性，以便双方都移动..

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

Answer 2

使用event.preventDefault。

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

也许你需要在mousemove中调用它。

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

2 个答案: