• Programmazione » HTML 5 » Guida HTML5

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).