jquery - 如何使 div 宽度可拖动？

Question

我有一个 div 嵌套在另一个 div 中，用于显示设置控制台。嵌套的 div 在父级内部有一个固定的定位，如下所示:

我想向子 div 的左边框添加一个可拖动的 handle ，以便可以调整子 div 的宽度。我是否需要在左侧边框所在的位置添加另一个非常窄的 div，以便可以拖动它并重新计算位置以动态调整子 div 宽度属性的大小？

如果可能的话，我宁愿坚持使用 vanilla JQuery 而不是依赖 JQuery UI。

Answer 1

我想这就是你要找的

handles: Which handles can be used for resizing.

示例: $( ".selector").resizable({ handles: "n, e, s, w"});

HTML:

<div class="parent">
    <div class="child"></div>
</div>

CSS:

.parent {
    position: relative;
    width: 800px;
    height: 500px;
    background: #000;
}
.child {
    position: absolute;
   right: 0;
    top: 0;
    width: 200px;
    height: 100%;        
    background: #ccc;
}

JS:

$('.child').resizable({
    handles: 'n,w,s,e',
    minWidth: 200,
    maxWidth: 400
});

检查这个JSFiddle

编辑: 解决了 css 问题，Updated fiddle