Comment puis-je rendre les éléments HTML redimensionnables en utilisant uniquement JavaScript Vanilla ?-tutoriel CSS-php.cn

Comment puis-je rendre les éléments HTML redimensionnables en utilisant uniquement JavaScript Vanilla ?

Mary-Kate Olsen

Libérer： 2024-12-08 07:51:15

original

921 Les gens l'ont consulté

How Can I Make HTML Elements Resizable Using Only Vanilla JavaScript?

Création d'éléments HTML redimensionnables à l'aide de Vanilla JavaScript

La tâche de créer des éléments HTML, tels que

Les balises, redimensionnables lorsque vous cliquez dessus peuvent être obtenues sans recourir à des bibliothèques externes comme jQuery. Voici comment y parvenir en utilisant du JavaScript pur :

var p = document.querySelector('p'); // element to make resizable

p.addEventListener('click', function init() {
    p.removeEventListener('click', init, false);
    p.className = p.className + ' resizable';
    var resizer = document.createElement('div');
    resizer.className = 'resizer';
    p.appendChild(resizer);
    resizer.addEventListener('mousedown', initDrag, false);
}, false);

var startX, startY, startWidth, startHeight;

function initDrag(e) {
   startX = e.clientX;
   startY = e.clientY;
   startWidth = parseInt(document.defaultView.getComputedStyle(p).width, 10);
   startHeight = parseInt(document.defaultView.getComputedStyle(p).height, 10);
   document.documentElement.addEventListener('mousemove', doDrag, false);
   document.documentElement.addEventListener('mouseup', stopDrag, false);
}

function doDrag(e) {
   p.style.width = (startWidth + e.clientX - startX) + 'px';
   p.style.height = (startHeight + e.clientY - startY) + 'px';
}

function stopDrag(e) {
    document.documentElement.removeEventListener('mousemove', doDrag, false);
    document.documentElement.removeEventListener('mouseup', stopDrag, false);
}

Copier après la connexion

Ce code ajoute une classe « redimensionnable » à l'élément cible et ajoute un

avec la classe 'resizer' à l'élément. Lorsque vous cliquez sur le "resizer", les événements glisser-déposer de la souris sont capturés pour ajuster dynamiquement la largeur et la hauteur de l'élément cible en fonction des mouvements de la souris.

Gardez à l'esprit que cette solution peut ne pas être compatible avec tous les navigateurs. Pour une implémentation plus robuste, pensez à utiliser une bibliothèque JavaScript dédiée au redimensionnement des éléments.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

source：php.cn

Article précédent：Pourquoi mon SVG a-t-il un espace supplémentaire en dessous dans une division et comment puis-je y remédier ? Article suivant：Comment centrer un logo de marque dans une barre de navigation Bootstrap 3 ?

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2226

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2371

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

1980

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...