Drag and drop

Drag and drop (tradotto in italiano con trascinamento)^[1] nel lessico informatico, indica una successione di tre azioni, consistenti nel cliccare su un oggetto virtuale (quale una finestra o un'icona) per trascinarlo (in inglese: drag) in un'altra posizione, dove viene rilasciato (in inglese: drop). Generalmente nella lingua italiana tale azione viene indicata semplicemente con "trascina" oppure con "clicca e trascina", anche se la traduzione letterale è "trascina e rilascia".

Storia

Fu introdotto per la prima volta dalla Apple con il sistema Macintosh 128K e in seguito evoluto con il sistema operativo System 7.

Grazie a HTML5, il drag and drop è oggi disponibile in maniera nativa anche sui browser che lo supportano (Nel 2021 Opera 12, Mozilla Firefox 4, Safari, Google Chrome e, anche se non completamente, Internet Explorer 9 e 10 [obsoleti] ed Edge^[2]) attraverso una semplice interfaccia JavaScript^[3].

Descrizione

In genere, questo tipo di azione crea un qualche tipo di associazione tra due oggetti: se per esempio un'icona corrispondente a un documento viene trascinata sul cestino, questo provoca la cancellazione del documento.

Spesso ad azioni di drag and drop corrispondono alternative via tastiera (scorciatoie o shortcut) o via comandi testuali da inserire in una console; ad esempio in un sistema Microsoft Windows lo spostamento di un file nel cestino corrisponde alla pressione del tasto di cancellazione.

Molti plugin drag and drop sono disponibili per vari CMS tra cui WordPress^[4].

Esempio

In HTML un drag and drop base si può creare come di seguito^[5]:

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
  width: 350px;
  height: 70px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);
}

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body>

<p>Trascina l'immagine nel rettangolo</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">

</body>
</html>

Il trascinamento della selezione HTML utilizza DOM event model e drag events ereditato da mouse events. Durante le operazioni di trascinamento, vengono attivati diversi tipi di eventi JavaScript^[6]:

Evento	Sul gestore di eventi	Si attiva quando ...
`drag`	`ondrag`	… viene trascinato un elemento (elemento o selezione di testo).
`dragend`	`ondragend`	... un'operazione di trascinamento termina (come il rilascio di un pulsante del mouse o il tasto Esc).
`dragenter`	`ondragenter`	... un elemento trascinato entra in un obiettivo di rilascio valido.
`dragexit`	`ondragexit`	... un elemento non è più l'obiettivo di selezione immediata dell'operazione di trascinamento.
`dragleave`	`ondragleave`	... un elemento trascinato lascia un obiettivo di rilascio valido.
`dragover`	`ondragover`	... un elemento trascinato viene trascinato su un obiettivo di rilascio valido, ogni poche centinaia di millisecondi.
`dragstart`	`ondragstart`	... l'utente inizia a trascinare un elemento.
`drop`	`ondrop`	... un elemento viene rilasciato su un obiettivo di rilascio valido.

Esempio di utilizzo:

function dragstart_handler(ev) {
  let img = new Image();
  img.src = 'example.gif';
  ev.dataTransfer.setDragImage(img, 10, 10);
}

Esempio di formattazione con i CSS^[5]:

#drop_file_zone {
    background-color: #EEE;
    border: #999 5px dashed;
    width: 290px;
    height: 200px;
    padding: 8px;
    font-size: 18px;
}
#drag_upload_file {
  width:50%;
  margin:0 auto;
}
#drag_upload_file #selectfile {
  display: none;
}

Esempio di caricamento di un file da parte di un utente su un server attraverso PHP^[7]:

<?php
$arr_file_types = ['image/png', 'image/gif', 'image/jpg', 'image/jpeg'];
 
if (!(in_array($_FILES['file']['type'], $arr_file_types))) {
    echo "false";
    return;
}
 
if (!file_exists('uploads')) {
    mkdir('uploads', 0777);
}
 
move_uploaded_file($_FILES['file']['tmp_name'], 'uploads/' . time() . '_' . $_FILES['file']['name']);
 
echo "File uploaded successfully.";

Note

^ Esempi:
Trascinamento, su informaticapertutti.com.
Trascinare con il mouse, su pcdazero.it.
Trascinare le cartelle, su docs.alfresco.com. URL consultato il 31 marzo 2020 (archiviato dall'url originale il 26 settembre 2020).
Creare un collegamento a una pagina web sul Desktop, su support.mozilla.org.
^ Can I use... Support tables for HTML5, CSS3, etc, su Can I use. URL consultato il 17 febbraio 2021.
^ Il drag and drop facile e nativo con HTML5 e JavaScript, su HTML5 Today. URL consultato il 20 maggio 2016 (archiviato dall'url originale il 27 maggio 2016).
^ 15 Best Drag & Drop WordPress Page Builders in 2024 Compared, su wpbeginner.com. URL consultato il 17 febbraio 2021.
^ ^a ^b (EN) Using the HTML5 Drag and Drop API, su web.dev. URL consultato il 17 febbraio 2021.
^ Drag Operations - Web APIs, su MDN web docs. URL consultato il 17 febbraio 2021.
^ (EN) Sajid, Drag And Drop File Upload Using JavaScript And PHP, su Artisans Web, 23 maggio 2017. URL consultato il 17 febbraio 2021.