拖动以调整分区的大小

Drag to Resize a Div

本文关键字：分区 调整 拖动      更新时间：2024-02-13

我的实时页面：

http://rafflebananza.com/Admin/Desktop/index123.html#

我使用的JQuery：

  • jquery-1.11.0.min.js
  • jquery-migrate-.2.1.min.js
  • jquery-ui-1.10.3.custom.min.js

问题：

我想让我的快速边栏，你看到的右侧有三个选项卡的边栏，有一个可拖动的宽度。我尝试了好几次都没有成功；

代码尝试：

$('.Quick-Sidebar').resizable({
    handles: 'w'
});

尽管我看到过像这个JSFiddle这样的工作，但在我的网站上实现它似乎不起作用，更新到更新的JQuery似乎也不适用于我的所有编码。

问题

如何在拖动时调整侧菜单的大小，动态流体拖动，如果使用JQuery，我希望使用最小的JQuery css。

演示

您的可调整大小需要在包装中。

就我而言，.Quick-Sidebar-Wrapper

包装器需要与起始侧边栏宽度（322px）相同的宽度

.Quick-Sidebar-Wrapper{
    position: relative;
    height: 100vh;
    float:right;
    width: 322px;
}
.Quick-Sidebar{
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    outline: 1px solid #ccc;
    overflow:hidden;
    cursor: default;
}

您还没有包含jquery ui css，所以为.ui-resizable-handle ui-resizable-w添加一些自定义样式。这是用于调整侧边栏大小的helperdiv。

.ui-resizable-w{
  height:100%;
  width:5px;
  background:limegreen;
  cursor: w-resize;
}

使用以下方法运行插件：

$('.Quick-Sidebar').resizable({
  handles: 'w'
});
相关文章：