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');
});

Answer 2

我给你一个算法：

创建一个div并设置一个边框（Big div） - ＆gt;使用position：absolute;

放置它

创建8 div（小方块） - ＆gt;使用position：absolute;

放置它们

将事件mousedown，mouseup，mouseenter，mousemove和mouseleave用于8 div

当触发mouseenter时，设置boolean var。
当mousedown被触发时，如果mouseenter等于true，则设置mousemove。
当发射mousemove时，移动悬停的小div。动态更改大div的大小和位置。
当触发mouseup时，禁用mousemove。
当触发mouseleave时，设置boolean false。

如果您在实施过程中遇到任何问题，欢迎您这样做

Answer 3

您可以从使用jquery的可调整大小的ui http://jqueryui.com/resizable/开始。

如果您希望自动调整文本大小以适合容器，请使用slabText http://freqdec.github.io/slabText/

Answer 4

Jquery UI可能会为您做到： http://jqueryui.com/resizable/

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

4 个答案:

DEMO