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

Collegamenti esterni

Storia

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

Descrizione

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>

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

Collegamenti esterni

Storia

Descrizione

Esempio

Note

Voci correlate

Altri progetti

Collegamenti esterni

Wikiwand in your browser!

Storia

Descrizione

Esempio

Note

Voci correlate

Altri progetti

Collegamenti esterni

Wikiwand in your browser!