Redimensionner le texte/div à l'aide de la souris en javascript

Je suis à la recherche pour créer un moyen très simple pour permettre aux utilisateurs d'être en mesure de redimensionner le texte. Je veux une boîte autour d'un mot ou d'un paragraphe avec des poignées qui permettent à l'utilisateur de redimensionner la boîte. Puis le texte à l'intérieur de la boîte de redimensionner automatiquement pour s'adapter à la nouvelle boîte.

Comment puis-je créer les poignées similaire à l'écran ci-dessous?

Le seul exemple que je peux trouver est sur VistaPrints site web.

Capture d'écran

Ici est un lien à la page:

Dans quelle partie exactement vous êtes bloqué? HTML, CSS, JavaScript... dans Quelle mesure vous avez obtenu avec votre tentative? Montrez-nous votre code et vous allez obtenir de l'aide
Ce qui empêche l'ouverture d'Inspecteur dans votre navigateur et en regardant la façon dont il est effectivement fait sur la page dont vous faites preuve ici?

InformationsquelleAutor Kathy Judd | 2014-08-28

1

Vous pouvez commencer avec l'aide de jquery ui resizable http://jqueryui.com/resizable/.

Si vous voulez avoir le texte de l'auto ajuster la taille du conteneur, puis utiliser slabText http://freqdec.github.io/slabText/

InformationsquelleAutor

Si vous êtes à la recherche de quelque chose de "simple", alors je voudrais essayer de jQuery UI. Il offre à la fois redimensionnable et déplaçable widgets.

DÉMO

Voici un exemple de comment vous pouvez combiner les deux et utiliser un CSS personnalisé pour obtenir le comportement que vous voulez. L'ajout de contenteditable="true" va permettre aux utilisateurs de modifier le contenu en tant que bien, mais vous allez avoir besoin de javascript supplémentaire pour supprimer le "déplaçable" lors de l'édition.

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

si vous cliquez à la fin du texte (redimensionner moi) et commencez à appuyer sur supprimer il va supprimer la div pour la redimensionner les gestionnaires. Est-il un moyen pour éviter cela?

InformationsquelleAutor jme11

2

Je vais vous en donner un algorithme:

Créer un div et de définir une frontière (Big div) -> Placez-le à l'aide de position: absolute;

Créer 8 div (petite place) -> Placez-les à l'aide de position: absolute;

Utiliser les événements mousedown, mouseup, mouseenter, mousemove et mouseleave à l'8 div
- Lorsque le mouseenter est tiré, ensemble booléen var.
- Lorsque le mousedown est tiré, si mouseenter est égale à true, ensemble mousemove.
- Quand mousemove est tiré, déplacez vos div qui planait. Modifier dynamiquement la grande div taille et la position de l'8 div.
- Quand mouseup est activé, désactiver mousemove.
- Quand mouseleave est tiré, définissez une valeur booléenne false.
Gl de le faire, si vous avez un quelconque problème lors de la mise en œuvre, vous êtes les bienvenus

InformationsquelleAutor Grégory NEUT
0

Jquery UI serait probablement le faire pour vous:
http://jqueryui.com/resizable/

InformationsquelleAutor user2346536

Vous devez vous connecter pour publier un commentaire.