相关疑难解决方法(0)

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

如果您尝试使用棕色条调整标记为"侧边栏"的内容,则可以看到问题.

我目前知道调整大小手柄出现在带有 css 属性的 div 的右下角：

resizable: horizontal;

我不确定这是否是浏览器独有的，但在 Firefox 中，手柄仅出现在右下角，并且仅在我们拖动该特定部分时才起作用。如果您看到任何网络应用程序，您可能会发现这些应用程序通过使整个侧面（例如：右侧）可拖动来实现相同的效果，并且即使它不在手柄上也没关系。

总而言之，我想要实现的目标：

使用 vanilla html/css 使 div 的整个侧面可调整大小。

对于当前的情况，我无法使用 jQuery，因为这是一个 React 应用程序。想知道这是否可以仅通过 html/css 而不是依赖 javascript，如果不能，我们如何在普通 javascript 中实现这一点。