我希望创建一种非常简单的方法来允许用户调整文本大小。我想要一个带有句柄的单词或段落框,允许用户调整框的大小。然后框内的文本会自动调整大小以适应新框。
如何创建类似于下面屏幕的 handle ?
我能找到的唯一示例是在 VistaPrints 网站上。
截图
这是一个link到页面:
最佳答案
如果您正在寻找“简单”的东西,那么我会尝试 jQuery UI。它同时提供 resizable和 draggable小部件。
DEMO
下面是一个示例,说明如何将两者结合起来并使用一些自定义 CSS 来获得所需的行为。添加 contenteditable="true"
也将允许用户编辑内容,但您需要一些额外的 javascript 来在编辑时删除“可拖动”。
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');
});
关于javascript - 在javascript中使用鼠标调整文本/div的大小,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25542634/