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

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

javascript jquery css

在javascript中使用鼠标调整文本/div大小,javascript,jquery,css,resize,size,Javascript,Jquery,Css,Resize,Size,我希望创建一个非常简单的方法，允许用户能够调整文本大小。我希望在单词或段落周围有一个带手柄的框，允许用户调整框的大小。然后，框内的文本将自动调整大小以适应新框如何创建类似于下面屏幕的句柄我能找到的唯一例子是VistaPrints网站截图这是一个链接：我给你一个算法：创建一个div并设置一个边框（大div）->使用position:absolute放置它创建8个div（小正方形）->使用position:absolute放置它们对8 div使用事件、和当鼠标指针被触发时，设置布

我希望创建一个非常简单的方法，允许用户能够调整文本大小。我希望在单词或段落周围有一个带手柄的框，允许用户调整框的大小。然后，框内的文本将自动调整大小以适应新框

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

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

截图

这是一个链接：

我给你一个算法：

创建一个div并设置一个边框（大div）->使用position:absolute放置它

创建8个div（小正方形）->使用position:absolute放置它们

对8 div使用事件、和

当鼠标指针被触发时，设置布尔变量
当mousedown被激发时，如果mouseenter等于true，则设置mousemove
当mousemove被触发时，移动你的小div，它被悬停。动态更改大分区大小和8分区的位置
当启动mouseup时，禁用mousemove
触发mouseleave时，将布尔值设置为false

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

我给您一个算法：

创建一个div并设置一个边框（大div）->使用position:absolute放置它

创建8个div（小正方形）->使用position:absolute放置它们

对8 div使用事件、和

当鼠标指针被触发时，设置布尔变量
当mousedown被激发时，如果mouseenter等于true，则设置mousemove
当mousemove被触发时，移动你的小div，它被悬停。动态更改大分区大小和8分区的位置
当启动mouseup时，禁用mousemove
触发mouseleave时，将布尔值设置为false

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

Jquery UI可能会为您这样做：

Jquery UI可能会为您提供：

如果您正在寻找“简单”的东西，那么我会尝试jQuery UI。它同时提供和小部件

下面是一个示例，说明如何将两者结合起来，并使用一些自定义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>

.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;
}

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

JS:

<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>

.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;
}

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

如果您正在寻找一些“简单”的东西，那么我会尝试jQueryUI。它同时提供和小部件

下面是一个示例，说明如何将两者结合起来，并使用一些自定义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>

.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;
}

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

JS:

<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>

.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;
}

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

您可以从使用jquery的可调整大小的ui开始

如果您想让文本自动调整大小以适应容器，那么可以使用slabText，您可以从使用jquery的可调整大小的ui开始

如果要自动调整文本大小以适应容器，请在卡住的具体部位使用slabText

？HTML，CSS，JavaScript。。。你的尝试走了多远？向我们展示您的代码，您将获得帮助是什么阻止您在浏览器中打开Inspector并查看它在此处显示的页面上的实际制作情况？您到底在哪一部分卡住了？HTML，CSS，JavaScript。。。你的尝试走了多远？向我们显示您的代码，您将获得帮助是什么阻止了您在浏览器中打开Inspector并查看它在此处显示的页面上的实际制作方式？如果您单击文本末尾（调整我的大小）并开始按delete键，它将删除调整大小处理程序的div。有什么方法可以停止吗？如果您在文本末尾单击（调整我的大小）并开始按delete键，它将删除调整大小处理程序的div。有没有办法阻止这一切？