如何使一个div宽度可拖动？

Question

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

```html

```

我想在子div的左边框上添加可拖动的手柄，以便可以调整子div的宽度。 我需要在左边缘位置添加另一个非常窄的div，以便可以拖动该div并重新计算位置，从而动态调整子div的宽度属性吗？

我宁愿使用普通的JQuery而不是依赖于JQuery UI。

- QFDev

---

使用jquery ui .resizable http://jqueryui.com/resizable/ 有什么问题？请贴出HTML和CSS代码。 - Sbml

这不是什么大问题，很高兴使用.resizable。我只是不确定如何获取仅包含所需方法而不是导入整个UI库的JQuery UI包。 - QFDev

你可以选择你想要的方法 http://jqueryui.com/download/ - Sbml

Answer 1

我认为这就是你正在寻找的内容。

handles：可以用于调整大小的手柄。

示例：$( ".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问题，更新的fiddle

- Praveen

---

谢谢。我这里有类似的东西：http://jsfiddle.net/boggey79/TdtMx/ 问题是容器在拖动时会向左跳（Chrome 28.0.1500.72 m）。 - QFDev

@QF_Developer 我认为你附加了错误的fiddle。请检查这个链接http://jsfiddle.net/YZX6B/11/。 - Praveen

当尝试调整大小时，我在您的小提琴和我的小提琴中都看到了子元素向左跳动的情况。我在Chrome和IE中都看到了这种行为，您也看到了吗？ - QFDev

@QF_Developer 是的，我看到了。看看这个fiddle，我想我修复了它。http://jsfiddle.net/YZX6B/12/ - Praveen

看起来不错！ 你似乎通过针对JQuery 1.91和UI 1.92进行修复。 我被锁定在JQuery 2.0上，因为它是在应用程序级别上定义的，我是否仍然可以针对UI 1.91进行调整？ - QFDev

Answer 2

这可以很容易地通过使用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

- Austin Brunkhorst

---

除了在调整大小时压缩左侧div内容之外，它的功能完美无误。我需要可调整大小的div重叠到左侧。 - QFDev

这个解决方案可以调整一下，让每行有3个div容器吗？ - Anuket

NOT javascript -> JQUERY - NVRM

我认为如果没有JavaScript的参与，jQuery并不能帮你走得太远。我理解你的观点，但它并不是一个非常有力的论据。 - Austin Brunkhorst

稍微修改了Javascript和CSS，以便允许复制文本，只要您不调整大小：http://jsfiddle.net/T4St6/1244/ - Paul Pehrson

Answer 3

使用jQuery UI Resizable交互，如评论中所述。可以查看以下示例：http://jqueryui.com/resizable/#max-min 编辑： 要将其限制为仅调整宽度，请将minHeight设置为maxHeight。那应该就可以了。

来自上面示例的代码：

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

第二次编辑： 对于不同的处理方式，请阅读文档http://api.jqueryui.com/resizable/#option-handles

- AntonNiklasson

---

看起来不错，我只是在想如何将其锁定为仅限宽度调整。 - QFDev

另外，我需要左边框的句柄而不是漂浮在右下角。有人知道这是否可能，我现在正在阅读API文档。 - QFDev

Answer 4

尝试这段代码...

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

您可以添加最大和最小宽度。

- Sbml

Answer 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" />

- paulo62