如何使div宽度可拖动？
我有一个div嵌套在另一个div中，用于显示设置控制台。 嵌套div有一个固定位于父级内部，如下所示：
我想为子div的左边框添加一个可拖动的句柄，以便可以在宽度上调整子div的大小。 我是否需要添加另一个非常窄的div，左边框位于此处，以便可以拖动它并重新计算位置以动态调整子divs width属性的大小？
如果可能的话，我宁愿坚持使用vanilla JQuery，而不是依赖于JQuery UI。
我想这就是你要找的东西
handle：哪些句柄可用于resize。
示例： $( ".selector" ).resizable({ handles: "n, e, s, w" });
HTML：
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问题， 更新了小提琴
使用vanilla jQuery可以很容易地实现这一点。 我建议使用更有效的标记布局，否则您将遇到一些相对位置/大小问题。
我会用一个容器和两个孩子。 在其中一个孩子（第二个或右侧）将包含一个透明但宽度较小的手柄。 对于jQuery，您只需将鼠标按下事件附加到该句柄，并相应地调整其他子项的大小。 这大致是看起来如何。
HTML
This is the left side's content! This is the right side's content!
JavaScript的
var isResizing = false, lastDownX = 0; $(function () { var container = $('#container'), left = $('#left'), right = $('#right'), handle = $('#handle'); handle.on('mousedown', function (e) { isResizing = true; lastDownX = e.clientX; }); $(document).on('mousemove', function (e) { // we don't want to do anything if we aren't resizing. if (!isResizing) return; var offsetRight = container.width() - (e.clientX - container.offset().left); left.css('right', offsetRight); right.css('width', offsetRight); }).on('mouseup', function (e) { // stop resizing isResizing = false; }); });
的jsfiddle
如评论中所述，使用jQuery UI Resizable交互。 看一下这个例子： http ： //jqueryui.com/resizable/#max-min
编辑：要将其锁定为仅调整宽度，请将minHeight设置为maxHeight。 应该这样做。
以上示例中的代码：
$(function() { $( "#resizable" ).resizable({ minHeight: 250, maxHeight: 250, minWidth: 200, maxWidth: 350 }); });
编辑2：对于aplying处理任何不同的方式：阅读文档http://api.jqueryui.com/resizable/#option-handles
试试这个代码..
$('.child').resizable({ handles: 'w' });
您可以添加最大和最小宽度
您还可以附加一个事件处理程序，如下所示，如果您想在resize的开头或结尾处执行某些操作，这将非常有用。
$("#resizeableElementId").resizable({handles: 'n,w,s,e', minWidth: 200, maxWidth: 600}); $("#resizeableElementId").on( "resizestop", function( event, ui ) { console.log('resize ended'); console.dir(event); });
请记住，您还需要包含jQuery UI; 下载并添加如下内容：