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 viene oppure con "clicca e trascina", anche se la traduzione letterale è "trascina e rilascia".

Esempio di drag and drop

Cenni storiciModifica

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

DescrizioneModifica

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

EsempioModifica

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 modele drag eventsereditato 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.";

NoteModifica

  1. ^ Esempi:
    Trascinamento, su informaticapertutti.com.
    Trascinare con il mouse, su pcdazero.it.
    Trascinare le cartelle, su docs.alfresco.com.
    Creare un collegamento a una pagina web sul Desktop, su support.mozilla.org.
  2. ^ Can I use... Support tables for HTML5, CSS3, etc, su caniuse.com. URL consultato il 17 febbraio 2021.
  3. ^ Il drag and drop facile e nativo con HTML5 e JavaScript, HTML5 Today. URL consultato il 20 maggio 2016 (archiviato dall'url originale il 27 maggio 2016).
  4. ^ www.wpbeginner.com, https://www.wpbeginner.com/beginners-guide/best-drag-and-drop-page-builders-for-wordpress/. URL consultato il 17 febbraio 2021.
  5. ^ a b (EN) Using the HTML5 Drag and Drop API, su web.dev. URL consultato il 17 febbraio 2021.
  6. ^ Drag Operations - Web APIs | MDN, su developer.mozilla.org. URL consultato il 17 febbraio 2021.
  7. ^ (EN) Sajid, Drag And Drop File Upload Using JavaScript And PHP, su Artisans Web, 23 maggio 2017. URL consultato il 17 febbraio 2021.

Voci correlateModifica

Altri progettiModifica