Comment créer des éléments HTML redimensionnables à l'aide de JavaScript pur ?

Création d'éléments HTML redimensionnables avec du JavaScript pur

De nombreuses bibliothèques existent pour permettre le redimensionnement des éléments, mais pour ceux qui recherchent une solution JavaScript pure, ce qui suit les étapes peuvent être utilisées :

1. Écouteur d'événement : Joindre un événement de clic écouteur de l'élément HTML souhaité. Cela lancera le processus de redimensionnement.
2. Ajout de classe : Ajoutez une classe CSS à l'élément, par exemple « redimensionnable », pour indiquer visuellement qu'il est entré en mode redimensionnement.
3. Création d'un élément Resizer : Créez un nouvel élément HTML, tel qu'un
   , et donnez-lui la classe "redimensionner." Cet élément servira de poignée de déplacement.
4. Écouteurs d'événements pour le redimensionneur : Ajoutez un écouteur d'événement mousedown au redimensionneur, ce qui déclenchera le début du processus de glissement.
5. Initiation par glisser : Stockez la position initiale de la souris, les dimensions de l'élément et redimensionnez le element.
6. Fonction Drag : Ajoutez un écouteur d'événement mousemove au document pour mettre à jour les dimensions de l'élément lorsque la souris est déplacée.
7. Terminaison par glisser : Au mouseup, supprimez les écouteurs d'événements mousemove et mouseup, complétant ainsi le redimensionnement. processus.

Voici un exemple d'extrait de code qui implémente cette approche :

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

Gardez à l'esprit que cette approche peut ne pas être compatible avec tous les navigateurs et avec Internet Explorer sous la version 9 est spécifiquement connu pour avoir des problèmes.