如何使div宽度可拖动？ [英] How do I make a div width draggable?

问题描述

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

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，其中左边框的位置，这样可以拖动和位置重新计算动态调整子divs width属性？

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?

我宁愿坚持使用vanilla JQuery，而不是依赖JQuery UI。

I'd rather stick to vanilla JQuery if possible rather than relying on JQuery UI.

推荐答案

我认为这是你寻找

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

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： b

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

请检查此 JSFiddle

EDIT：解决了css问题， 更新了小提示

Solved the css issue, Updated fiddle

这篇关于如何使div宽度可拖动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！