Drag and drop

metodo di spostamento di un contenuto nelle interfacce grafiche utente mediante trascinamento Da Wikipedia, l'enciclopedia libera

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

Thumb
Esempio di drag and drop

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

Riepilogo
Prospettiva

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

Ulteriori informazioni Evento, Sul gestore di eventi ...
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.
Chiudi

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

Voci correlate

Altri progetti

Collegamenti esterni

Wikiwand - on

Seamless Wikipedia browsing. On steroids.