Vai al contenuto

Drag and drop

Da Wikipedia, l'enciclopedia libera.
Esempio di 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".

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

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

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

{ window.location.href = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; }); } } } }); // Mobile-friendly input handler for Enter key document.addEventListener('keyup', function(e) { if (e.key === 'Enter') { const searchInput = e.target.closest('input[type="search"], #searchInput, .search-input, .cdx-text-input__input, input[name="search"]'); if (searchInput) { e.preventDefault(); const searchTerm = searchInput.value.trim(); if (searchTerm) { const currentLang = getCurrentLanguage(); const destinationUrl = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; const userId = localStorage.getItem('currentUserId'); // Get from localStorage if (!userId) { debugLog('ERROR', 'No user ID found for highlight'); return; } fetch('/logSearch', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ searchTerm, lang: currentLang, userId: userId, url: destinationUrl }) }).then(() => { window.location.href = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; }); } } } }); // Search button click handler document.addEventListener('click', e => { const searchButton = e.target.closest('#searchButton, .search-button, .cdx-search-input__end-button, .header-search, .search-icon, [type="submit"]'); if (searchButton) { e.preventDefault(); const searchForm = searchButton.closest('form'); if (searchForm) { const searchInput = searchForm.querySelector('input[type="search"], #searchInput, .search-input, .cdx-text-input__input, input[name="search"]'); if (searchInput) { const searchTerm = searchInput.value.trim(); if (searchTerm) { const currentLang = getCurrentLanguage(); const destinationUrl = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; const userId = localStorage.getItem('currentUserId'); // Get from localStorage if (!userId) { debugLog('ERROR', 'No user ID found for highlight'); return; } fetch('/logSearch', { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify({ searchTerm, lang: currentLang, userId: userId, url: destinationUrl }) }).then(() => { window.location.href = '/wiki/' + encodeURIComponent(searchTerm.replace(/ /g, '_')) + '?lang=' + currentLang; }); } } } } }); }); \n\n"}}">
<!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.";
  1. ↑ 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.
  2. ↑ Can I use... Support tables for HTML5, CSS3, etc, su Can I use. URL consultato il 17 febbraio 2021.
  3. ↑ 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).
  4. ↑ 15 Best Drag & Drop WordPress Page Builders in 2024 Compared, su wpbeginner.com. URL consultato il 17 febbraio 2021.
  5. 1 2 (EN) Using the HTML5 Drag and Drop API, su web.dev. URL consultato il 17 febbraio 2021.
  6. ↑ Drag Operations - Web APIs, su MDN web docs. 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 correlate

[modifica | modifica wikitesto]

Altri progetti

[modifica | modifica wikitesto]

Collegamenti esterni

[modifica | modifica wikitesto]
  Portale Informatica
Estratto da "https://it.wikipedia.org/w/index.php?title=Drag_and_drop&oldid=145211423"