如何使 div 宽度可拖动?

问题描述

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

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

如果可能的话，我宁愿坚持使用普通的 JQuery，而不是依赖 JQuery UI.

解决方案

我想这就是你要找的

句柄:哪些句柄可用于调整大小.

示例: $( ".selector" ).resizable({ handles: "n, e, s, w" });

HTML:

<div class="child"></div>

CSS:

.parent {位置:相对；宽度:800px；高度:500px；背景:#000；}.孩子 {位置:绝对；右:0；顶部:0；宽度:200px；高度:100%；背景:#ccc;}

JS:

$('.child').resizable({句柄:'n,w,s,e',最小宽度:200，最大宽度:400});

检查这个JSFiddle

解决了 css 问题，更新了小提琴

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:

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?

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

解决方案

I think this is what you're looking for

Example: $( ".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
});

check this JSFiddle

EDIT: Solved the css issue, Updated fiddle

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