Maison >interface Web >tutoriel CSS >Comment puis-je rendre les éléments HTML redimensionnables en utilisant uniquement JavaScript Vanilla ?

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

Mary-Kate Olsenoriginal: 2024-12-08 07:51:15922parcourir

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

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!

JavaScript jquery html for using class this

Déclaration：

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

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：Pourquoi mon SVG a-t-il un espace supplémentaire en dessous dans une division et comment puis-je y remédier ?

Articles Liés

Voir plus