在javascript中使用鼠标调整文本/ div的大小

Question

我正在寻找一种非常简单的方法来让用户能够调整文本大小.我想要一个带有句柄的单词或段落的框,允许用户调整框的大小.然后框内的文本自动调整大小以适应新框.

如何创建类似于下面屏幕的手柄？

我能找到的唯一例子是VistaPrints网站.

截图

这是该页面的链接:

Answer 1

如果你正在寻找"简单"的东西,那么我会尝试jQuery UI.它提供可调整大小和可拖动的小部件.

DEMO

下面是一个如何将两者结合起来并使用一些自定义CSS来获得所需行为的示例.添加contenteditable="true"也允许用户编辑内容,但是在编辑时你需要一些额外的javascript来删除'draggable'.

HTML:

<div class='resizable draggable'>
    <h1 contenteditable="true">Resize Me</h1>
    <div class="ui-resizable-handle ui-resizable-nw"></div>
    <div class="ui-resizable-handle ui-resizable-ne"></div>
    <div class="ui-resizable-handle ui-resizable-sw"></div>
    <div class="ui-resizable-handle ui-resizable-se"></div>
    <div class="ui-resizable-handle ui-resizable-n"></div>
    <div class="ui-resizable-handle ui-resizable-s"></div>
    <div class="ui-resizable-handle ui-resizable-e"></div>
    <div class="ui-resizable-handle ui-resizable-w"></div>
</div>

CSS:

.draggable {
    cursor: move;
}
.resizable {
    border: 1px dashed #000000;
    position: relative;
}
.ui-resizable-nw, .ui-resizable-ne, .ui-resizable-sw, .ui-resizable-se, .ui-resizable-n, .ui-resizable-e, .ui-resizable-s, .ui-resizable-w {
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 1px solid #000000;
    position: absolute;
}
.ui-resizable-nw {
    left: -5px;
    top: -5px;
    cursor: nw-resize;
}
.ui-resizable-ne {
    top: -5px;
    right: -5px;
    cursor: ne-resize;
}
.ui-resizable-sw {
    bottom: -5px;
    left: -5px;
    cursor: sw-resize;
}
.ui-resizable-se {
    bottom: -5px;
    right:-5px;
    cursor: se-resize;
}
.ui-resizable-n {
    top: -5px;
    left:50%;
    cursor: n-resize;
}
.ui-resizable-s {
    bottom: -5px;
    left: 50%;
    cursor: s-resize;
}
.ui-resizable-w {
    left:-5px;
    top:calc(50% - 5px);
    cursor: w-resize;
}
.ui-resizable-e {
    right:-5px;
    top:calc(50% - 5px);
    cursor: e-resize;
}

JS:

$('.resizable').resizable({
    handles: {
        'nw': '.ui-resizable-nw',
        'ne': '.ui-resizable-ne',
        'sw': '.ui-resizable-sw',
        'se': '.ui-resizable-se',
        'n': '.ui-resizable-n',
        'e': '.ui-resizable-e',
        's': '.ui-resizable-s',
        'w': '.ui-resizable-w'
    }
});
$( '.draggable' ).draggable().on('click', function(){
    if ( $(this).is('.ui-draggable-dragging') ) {
        return;
    }
    $(this).draggable( 'option', 'disabled', true );
    $(this).prop('contenteditable','true');
})
.on('blur', function(){
    $(this).draggable( 'option', 'disabled', false);
    $(this).prop('contenteditable','false');
});