javascript 在javascript中使用鼠标调整文本/div的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25542634/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Resize text/div using mouse in javascript
提问by Kathy Judd
I'm looking to create a very simple way to allow users to be able to resize text. I want a box around a word or paragraph with handles that will allow the user to resize the box. Then the text inside the box auto resize to fit the new box.
我正在寻找一种非常简单的方法来允许用户调整文本大小。我想要一个带有句柄的单词或段落周围的框，允许用户调整框的大小。然后框内的文本自动调整大小以适应新框。
How can I create the handles similar to the screen below?
如何创建类似于下面屏幕的手柄？
The only example I can find is on VistaPrints web site.
我能找到的唯一例子是在 VistaPrints 网站上。
Screenshot
截屏
Here is a linkto the page:
这是该页面的链接：
回答by jme11
If you're looking for something "simple", then I would try jQuery UI. It offers both resizableand draggablewidgets.
如果您正在寻找“简单”的东西，那么我会尝试 jQuery UI。它提供可调整大小和可拖动的小部件。
DEMO
演示
Here's a sample of how you can combine the two and use some custom CSS to get the behavior you want. Adding contenteditable="true"will allow users to edit the contents as well, but you'll need some additional javascript to remove the 'draggable' while editing.
下面是一个示例，说明如何将两者结合起来并使用一些自定义 CSS 来获得所需的行为。添加contenteditable="true"也将允许用户编辑内容，但您需要一些额外的 javascript 来删除编辑时的“可拖动”。
HTML:
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:
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:
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');
});
回答by Grégory NEUT
I am giving you an algorithm:
我给你一个算法：
Create a div and set a border (Big div) -> Place it using position: absolute;
创建一个 div 并设置一个边框（大 div）-> 使用 position: absolute 放置它；
Create 8 div (little square) -> Place them using position: absolute;
创建 8 个 div（小方块）-> 使用 position: absolute 放置它们；
Use events mousedown, mouseup, mouseenter, mousemoveand mouseleaveto the 8 div
使用事件mousedown, mouseup, mouseenter, mousemove和mouseleave到 8 div
When the mouseenter is fired, set boolean var.
When the mousedown is fired, if mouseenter is equals to true, set mousemove.
When mousemove is fired, move your little div which is hovered. Dynamically change big div size and position of the 8 div.
When mouseup is fired, disable mousemove.
When mouseleave is fired, set boolean false.
当 mouseenter 被触发时，设置布尔变量。
当 mousedown 被触发时，如果 mouseenter 等于 true，则设置 mousemove。
当 mousemove 被触发时，移动你悬停的小 div。动态改变大 div 的大小和 8 div 的位置。
当 mouseup 被触发时，禁用 mousemove。
当 mouseleave 被触发时，设置布尔值 false。
Gl doing it, if you get any problem during the implementation, you are welcome
gl 这样做，如果您在实施过程中遇到任何问题，欢迎您
回答by Grégory NEUT
You can start with using jquery's resizable ui http://jqueryui.com/resizable/.
您可以从使用 jquery 的可调整大小的 ui http://jqueryui.com/resizable/ 开始。
If you want to have the text auto sized to fit the container then use slabText http://freqdec.github.io/slabText/
如果您想让文本自动调整大小以适合容器，请使用slabText http://freqdec.github.io/slabText/
回答by user2346536
Jquery UI would probably do it for you: http://jqueryui.com/resizable/
Jquery UI 可能会为你做：http: //jqueryui.com/resizable/
