JavaScript

Draggable elements

by Andrea Spera

Rendere trascinabile un elemento
La funzione dragElement definita in questo esempio, rende un elemento trascinabile aggiornando la sua posizione a ogni movimento del mouse e interrompe il drag al rilascio del tasto.
  • Le variabili pos1, pos2, pos3, e pos4 memorizzano le posizioni del mouse e dell'elemento mentre viene trascinato.
  • elmnt.onmousedown = dragMouseDown:
    Quando si preme il mouse sull'elemento (elmnt), viene chiamata la funzione dragMouseDown.
  • dragMouseDown:
    Viene catturato l'evento del mouse (e = window.event) e prevenuto il comportamento predefinito (e.preventDefault()).
    Vengono memorizzate le coordinate iniziali del mouse (pos2 e pos4).
    Si attivano gli eventi di mouseup e mousemove per gestire il trascinamento.
  • elementDrag:
    Questa funzione viene eseguita ogni volta che il mouse si muove (mentre รจ premuto). Calcola la differenza tra la posizione precedente e quella corrente del mouse, aggiornando la posizione dell'elemento (elmnt.style.left e elmnt.style.top) per spostarlo sullo schermo.
  • closeDragElement:
    Quando si rilascia il pulsante del mouse (onmouseup), si disabilitano gli eventi di trascinamento (onmousemove) e rilascio (onmouseup), fermando il drag.
Codice 
<!DOCTYPE html>
<html>
<head>
<script>
function dragElement(elmnt) {
    let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;

    // Aggiungi gli eventi di inizio
    elmnt.onmousedown = dragMouseDown;
    elmnt.ontouchstart = dragMouseDown; // Per touchscreen

    function dragMouseDown(e) {
        e = e || window.event;
        e.preventDefault();

        // Ottieni le coordinate iniziali
        if (e.type === "touchstart") {
            pos2 = e.touches[0].clientX;
            pos4 = e.touches[0].clientY;
        } else {
            pos2 = e.clientX;
            pos4 = e.clientY;
        }

        // Aggiungi eventi per il movimento e il rilascio
        document.onmouseup = closeDragElement;
        document.onmousemove = elementDrag;
        document.ontouchend = closeDragElement; // Per touchscreen
        document.ontouchmove = elementDrag; // Per touchscreen
    }

    function elementDrag(e) {
        e = e || window.event;
        e.preventDefault();

        let clientX, clientY;

        if (e.type === "touchmove") {
            clientX = e.touches[0].clientX;
            clientY = e.touches[0].clientY;
        } else {
            clientX = e.clientX;
            clientY = e.clientY;
        }

        // Calcola la nuova posizione
        pos1 = pos2 - clientX;
        pos2 = clientX;
        pos3 = pos4 - clientY;
        pos4 = clientY;

        // Aggiorna la posizione dell'elemento
        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
        elmnt.style.top = (elmnt.offsetTop - pos3) + "px";
    }

    function closeDragElement() {
        // Rimuovi gli eventi di movimento e rilascio
        document.onmouseup = null;
        document.onmousemove = null;
        document.ontouchend = null;
        document.ontouchmove = null;
    }
}
</script>
<style>
div#drag_container{position:relative;}
div#draggable{position:relative; display:block; width:100px; height:100px; border:1px solid #aaa; color:#333; font-family:Verdana; font-size:13px; font-weight:bold; line-height:100px; text-align:center; background-color:#ddd; cursor:pointer;}
</style>
</head>
<body>
<div id="drag_container">
	<div id="draggable">
		Drag me!
	</div>
</div>
<script>
dragElement(document.getElementById("draggable"));
</script>
</body>
</html>
Output
Drag me!