Redazione
a- a+

Drag & Drop con HTML5: trascinare gli elementi

Vediamo come funziona il Drag & Drop con un esempio pratico.

Il “drag and drop” rappresenta una delle tante novità introdotte dal linguaggio di markup HTML5. Di base, il drag and drop è una funzione operativa molto conosciuta: consiste nel selezionare e trascinare un elemento da un punto A a un punto B.

Il drag and drop HTML5 è uno standard che al momento ha problemi di compatibilità in Internet Explorer 9, Apple Safari e Opera:  i primi due supportano in modo parziale lo standard, Opera invece ancora non accetta pagine e porzioni di pagina marcate con questa codifica. Mozilla Firefox e Google Chrome sono al momento gli unici due browser pienamente compatibili.

In HTML5, le API drag and drop operano grazie a dei set di “drag and drop events” e “data transfer object”, in pratica un mix di HTML5 e JavaScript che permette di compiere operazioni prima fattibili solo tramite quest’ultimo linguaggio.

Per capire meglio come funziona, faremo un piccolo esempio pratico. Creiamo una figura che può essere spostata e posizionata in uno spazio (un canvas ad esempio). Per fare questo ci serviremo della libreria JavaScript “Kinetic”.

<script src="http://www.tuositoweb.it/cartella-script/kinetic2d-v1.0.2.js">
</script>
<script>
    function writeMessage(context, message){
        context.font = "18pt Calibri";
        context.fillStyle = "black";
        context.fillText(message, 10, 25);
    }
 
    window.onload = function(){
        var kin = new Kinetic_2d("myCanvas");
        var canvas = kin.getCanvas();
        var context = kin.getContext();
        var rectX = canvas.width / 2 - 50;
        var rectY = canvas.height / 2 - 25;
        var draggingRect = false;
        var draggingRectOffsetX = 0;
        var draggingRectOffsetY = 0;
        var message = "Seleziona e trascina la figura in un punto desiderato...";
 
        kin.setDrawStage(function(){
            var mousePos = kin.getMousePos();
 
            if (draggingRect) {
                rectX = mousePos.x - draggingRectOffsetX;
                rectY = mousePos.y - draggingRectOffsetY;
            }
 
            kin.clear();
            writeMessage(context, message);
 
            kin.beginRegion();
 
            context.beginPath();
            context.rect(rectX, rectY, 100, 50);
            context.lineWidth = 4;
            context.strokeStyle = "black";
            context.fillStyle = "#00D2FF";
            context.fill();
            context.stroke();
            context.closePath();
 
            kin.addRegionEventListener("mousedown", function(){
                draggingRect = true;
                var mousePos = kin.getMousePos();
 
                draggingRectOffsetX = mousePos.x - rectX;
                draggingRectOffsetY = mousePos.y - rectY;
            });
            kin.addRegionEventListener("mouseup", function(){
                draggingRect = false;
            });
            kin.addRegionEventListener("mouseover", function(){
                document.body.style.cursor = "pointer";
            });
            kin.addRegionEventListener("mouseout", function(){
                document.body.style.cursor = "default";
            });
 
            kin.closeRegion();
        });
    };
</script>

Perfetto: abbiamo creato un evento drag che risponde solo ai comandi input/output del mouse. Una codifica elaborata in questo modo aumenta il livello d’usabilità della porzione di pagina interessata (nonché dell’intero sito).



Ti potrebbe interessare anche

commenta la notizia

C'è 1 commento
Francesco
Hai dubbi su questo articolo?