jQuery 如何使 div 宽度可拖动？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17855401/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I make a div width draggable?
提问by QFDev
I have a div nested inside another div which is used to display a settings console. The nested div has a fixed positioned inside the parent as follows:
我有一个 div 嵌套在另一个 div 中，用于显示设置控制台。嵌套的 div 在父级中有一个固定的定位，如下所示：
I'd like to add a draggable handle to the child div's left border so that the child div can be resized on the width. Do I need to add another very narrow div where the left hand border is positioned so that this can be dragged and the position recalculated to dynamically resize the child divs width property?
我想为子 div 的左边框添加一个可拖动的句柄，以便可以在宽度上调整子 div 的大小。我是否需要在左侧边框所在的位置添加另一个非常窄的 div，以便可以拖动它并重新计算位置以动态调整子 divs 宽度属性的大小？
I'd rather stick to vanilla JQuery if possible rather than relying on JQuery UI.
如果可能的话，我宁愿坚持使用 vanilla JQuery 而不是依赖 JQuery UI。
采纳答案by Praveen
I think this is what you're looking for
我想这就是你要找的
handles:Which handles can be used for resizing.
handles：哪些句柄可用于调整大小。
Example:$( ".selector" ).resizable({ handles: "n, e, s, w" });
例子：$( ".selector" ).resizable({ handles: "n, e, s, w" });
HTML:
HTML：
<div class="parent">
<div class="child"></div>
</div>
CSS:
CSS：
.parent {
position: relative;
width: 800px;
height: 500px;
background: #000;
}
.child {
position: absolute;
right: 0;
top: 0;
width: 200px;
height: 100%;
background: #ccc;
}
JS:
JS：
$('.child').resizable({
handles: 'n,w,s,e',
minWidth: 200,
maxWidth: 400
});
check this JSFiddle
检查这个JSFiddle
EDIT:Solved the css issue, Updated fiddle
编辑：解决了 css 问题，更新了小提琴
回答by Austin Brunkhorst
This can be achieved pretty easily with vanilla jQuery so to speak. I suggest using a more efficient markup layout however, or you'll run in to some relative position/size issues.
可以这么说，使用 vanilla jQuery 可以很容易地实现这一点。但是，我建议使用更有效的标记布局，否则您会遇到一些相对位置/大小问题。
I would use one container, and 2 children. In one of the children (the second one, or right side) will contain a handle that's transparent but a small width. For the jQuery, you'll just attach a mouse down event to that handle and adjust the sizes of the other children accordingly. Here's roughly how that will look.
我会用一个容器和 2 个孩子。在其中一个孩子（第二个，或右侧）中将包含一个透明但宽度很小的手柄。对于 jQuery，您只需将鼠标按下事件附加到该句柄并相应地调整其他子项的大小。这是大致的样子。
HTML
HTML
<div id="container">
<!-- Left side -->
<div id="left"> This is the left side's content! </div>
<!-- Right side -->
<div id="right">
<!-- Actual resize handle -->
<div id="handle"></div> This is the right side's content!
</div>
</div>
JavaScript
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;
});
});
回答by AntonNiklasson
Use the jQuery UI Resizable interaction, as mentioned in comment. Take a look at this example: http://jqueryui.com/resizable/#max-min
使用 jQuery UI Resizable 交互，如评论中所述。看看这个例子：http: //jqueryui.com/resizable/#max-min
EDIT:To lock it down to only resizing the width, set the minHeight equal to maxHeight. That should probably do it.
编辑：要将其锁定为仅调整宽度大小，请将 minHeight 设置为等于 maxHeight。那应该可以做到。
Code from above example:
上面例子中的代码：
$(function() {
$( "#resizable" ).resizable({
minHeight: 250,
maxHeight: 250,
minWidth: 200,
maxWidth: 350
});
});
EDIT 2:For aplying handles any different ways: read the doc http://api.jqueryui.com/resizable/#option-handles
编辑 2：对于应用处理任何不同的方式：阅读文档http://api.jqueryui.com/resizable/#option-handles
回答by Sbml
Try this code ..
试试这个代码..
$('.child').resizable({
handles: 'w'
});
You can add then a max and min Width
您可以添加最大和最小宽度
回答by paulo62
You can also attach an event handler as shown below, which is useful if you want to do something at the start or end of the 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);
});
Remember that you need to include jQuery UI too; download it and add something like this:
请记住，您还需要包含 jQuery UI；下载它并添加如下内容：
<link rel="stylesheet" type="text/css" href="jquery-ui-1.11.1.custom/jquery-ui.min.css" />
