【问题标题】：How do I make a div width draggable?如何使 div 宽度可拖动？
【发布时间】：2013-07-25 04:35:53
【问题描述】：

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

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

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

【问题讨论】：

使用 jquery ui .resizable jqueryui.com/resizable 有什么问题？并发布 html 和 css 代码
问题不大，很高兴使用.resizable。我只是不确定如何为我需要的方法获取 JQuery UI 包，而不是导入整个 UI 库。
你可以只选择你想要的方法jqueryui.com/download

标签： jquery css jquery-ui draggable resizable

【解决方案1】：

我想这就是你要找的东西

句柄：哪些句柄可用于调整大小。

示例： $( ".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

【讨论】：

谢谢..我在这里有类似的东西：jsfiddle.net/boggey79/TdtMx 问题是容器在拖动时跳到左侧（Chrome 28.0.1500.72 m）
@QF_Developer 我认为你放错了小提琴。检查这个jsfiddle.net/YZX6B/11
尝试调整大小时，我让孩子在你和我的小提琴上都向左跳。我在 Chrome 和 IE 中看到了这种情况……你看到这种行为了吗？
@QF_Developer 是的，我明白了。检查这个小提琴，我想我修好了。 jsfiddle.net/YZX6B/12
看起来不错！您似乎通过定位 JQuery 1.91 和 UI 1.92 解决了这个问题。我被锁定到 JQuery 2.0，因为它是在应用程序级别定义的，我还能以 UI 1.91 为目标吗？

【解决方案2】：

可以这么说，使用 vanilla jQuery 可以很容易地实现这一点。不过，我建议使用更有效的标记布局，否则您会遇到一些相对位置/大小问题。

我会使用一个容器和两个孩子。其中一个孩子（第二个或右侧）将包含一个透明但宽度较小的手柄。对于 jQuery，您只需将鼠标按下事件附加到该句柄并相应地调整其他子项的大小。大致如下。

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

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

【讨论】：

除了在调整大小时压缩左侧 div 内容外，它还可以完美运行。我需要可调整大小的 div 与左侧大小重叠。
这个方案可以调整成连续3个div容器吗？
不是 javascript -> JQUERY
@Cryptopat 你是说 jQuery 不是 JavaScript？
稍微修改了 Javascript 和 CSS，以便在不调整大小的情况下允许复制文本：jsfiddle.net/T4St6/1244

【解决方案3】：

如评论中所述，使用 jQuery UI Resizable 交互。看看这个例子：http://jqueryui.com/resizable/#max-min

编辑： 要将其锁定为仅调整宽度大小，请将 minHeight 设置为等于 maxHeight。应该可以吧。

上例代码：

$(function() {
  $( "#resizable" ).resizable({
    minHeight: 250,
    maxHeight: 250,
    minWidth: 200,
    maxWidth: 350
  });
});

编辑 2： 对于应用手柄任何不同的方式：阅读文档http://api.jqueryui.com/resizable/#option-handles

【讨论】：

看起来不错，我只是想知道如何才能锁定仅调整宽度。
我还需要左边框上的句柄，而不是在右下角浮动。有谁知道这是否可能，我现在正在阅读 API 文档。

【解决方案4】：

试试这个代码..

$('.child').resizable({
    handles: 'w'
});

然后您可以添加最大和最小宽度

【讨论】：

【解决方案5】：

您还可以附加一个事件处理程序，如下所示，如果您想在调整大小的开始或结束时执行某些操作，这很有用。

$("#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；下载它并添加如下内容：

<link rel="stylesheet" type="text/css" href="jquery-ui-1.11.1.custom/jquery-ui.min.css" />

【讨论】：