recherche

Maison >interface Web >js tutoriel >Glissez et déposez des éléments et des fichiers HTML

Glissez et déposez des éléments et des fichiers HTML

王林
王林original
2024-09-12 10:31:20521parcourir

Les applications Web peuvent être utiles pour la collecte/l'ingestion de données. Si le mécanisme de collecte et de stockage des données est facile à utiliser, de nombreuses données utiles peuvent être accumulées pour le traitement des données. Un moyen simple de déplacer des données d’un emplacement à un autre est la fonctionnalité glisser-déposer sur les applications Web.

Dans cet article, je montre trois exemples sur la façon de déplacer et de stocker des données et des fichiers d'éléments HTML à l'aide de la programmation glisser-déposer JavaScript.

Exemple 0 : glisser-déposer un élément HTML 

<!DOCTYPE html>
<html>
<head></head>
<body>

<h1>Example 0: Drag and Drop HTML text/elements</h1>
<div id="HTML_text" draggable="true" class="dragElement">HTML text</div>

<br><br>

<div id="dropArea" class="dropArea"> Drop for Example 0 & 1</div>

<style>
.dropArea { height: 200px;
    width: 200px;
    border-radius: 15px;
    border: 0.25px solid black;
    background-color: #7084c4;
}

.HTML_text { cursor: move; }
</style>
<script>
var example;
var other_data_related_to_dragEvent = {};
var html_element_drag_list_metaData = [];


// ----------------------------------------------------
// Drag functionality: Example 0
// ----------------------------------------------------
document.getElementById("HTML_text").addEventListener("dragstart", processEvent_drag_example0, false);
// document.getElementById("HTML_text").addEventListener("dragend", processEvent_drag_example0, false); // to stop

function processEvent_drag_example0(event) {
    example = 0;
    event.dataTransfer.setData('text/plain', event.target.id);
}
// ----------------------------------------------------

// ----------------------------------------------------
// Drop functionality: Example 0 and 1
// ----------------------------------------------------
document.getElementById("dropArea").addEventListener("drop", processEvent_drop, false);
document.getElementById("dropArea").addEventListener("dragover", processEvent_dragover, false);

function processEvent_drop(event) {

    // Stop defaults and allow drop events
    event.preventDefault();

    // Detects files dragged from pc 
    html_element_drag_list_metaData.push(event.dataTransfer.files);
    console.log('html_element_drag_list_metaData: ', html_element_drag_list_metaData);

    // Detects html elements dragged from the html page
    const data = event.dataTransfer.getData('text/plain');
    console.log('data: ', data);
    if (data.length != 0) {
      // find the draggable element based on the data
      const dragElement = document.getElementById(data);
      console.log('dragElement: ', dragElement);

      // Append the draggable element 
      event.target.appendChild(dragElement);

    }
}

function processEvent_dragover(event) {
  // Stop defaults and allow drop events
  event.preventDefault();
}
// -------------------------------------------------

</script>
</body>
</html>

Avant de glisser-déposer le texte HTML (texte HTML) vers la dropArea violette

Drag and Drop HTML elements and files

Après avoir glissé et déposé le texte HTML (texte HTML) vers la dropArea violette

Drag and Drop HTML elements and files

Dans l'exemple 0, l'élément de texte HTML a en fait été déplacé dans la zone de dépôt. L'identifiant du div pour le texte HTML est apparu dans les données variables, on peut ainsi garder une trace des identifiants des éléments à l'intérieur de la dropArea. Cet exemple est utile pour organiser/stocker du code HTML existant écrit sur une application Web, mais dans la plupart des situations d'ingestion de données, on souhaite organiser/stocker des données à partir de différents endroits.

Exemple 1 : un téléchargement de fichier est représenté sous la forme d'un élément HTML/emoji déplaçable

Cet exemple est un croisement entre le glisser-déposer d'un élément HTML et le glisser-déposer d'un fichier. On peut sélectionner un fichier en utilisant le bouton Parcourir ; faites glisser un fichier vers le bouton Parcourir ou cliquez sur le bouton Parcourir pour sélectionner un fichier. Ensuite, un emoji apparaît après la sélection du fichier, l'apparence de l'emoji représente le fichier en termes d'élément HTML. L'emoji de l'élément HTML, représentatif d'un fichier, peut ensuite être glissé vers la dropArea pour l'ingestion/le stockage des données.

<!DOCTYPE html>
<html>
<head></head>
<body>

<h1>Example 1: Click button create drag and drop elements</h1>
<input type="file" id="upload_file" accept="audio/*" style="display:block" multiple>
<div id="file_name" style="display:none"></div>
<div id="base64_string" style="display:none"></div>
<div id="base64_string_icon" draggable="true" class="dragElement" style="display:none">?</div>

<br><br>

<div id="dropArea" class="dropArea"> Drop for Example 0 & 1</div>

<style>
.dropArea { height: 200px;
    width: 200px;
    border-radius: 15px;
    border: 0.25px solid black;
    background-color: #7084c4;
}

.HTML_text { cursor: move; }
</style>

<script>
var example;
var other_data_related_to_dragEvent = {};
var html_element_drag_list_metaData = [];

// ----------------------------------------------------
// Drag functionality: Example 1
// ----------------------------------------------------
// The eventlistener needs to be always running, to detect which file the user selected with browse
document.getElementById("upload_file").addEventListener("change", previewInput_drop, false);

async function previewInput_drop(event) {

    // Take the first file
    const file = event.target.files[0];  // first file in the list of selected files, better for selecting multiple files at one time
    // console.log("file :", file);

    document.getElementById("file_name").innerHTML = file.name;

    // ---------------------

    const reader = new FileReader();

    reader.onload = async function(e){
        document.getElementById("base64_string").innerHTML = e.target.result;
        document.getElementById("base64_string_icon").style.display = "block";
    }

    reader.readAsDataURL(file);
}


document.getElementById("base64_string_icon").addEventListener("dragstart", processEvent_drag_example1, false);

function processEvent_drag_example1(event) {
    example = 1;
    event.dataTransfer.setData('text/plain', event.target.id);
}

// ----------------------------------------------------

// ----------------------------------------------------
// Drop functionality: Example 0 and 1
// ----------------------------------------------------
document.getElementById("dropArea").addEventListener("drop", processEvent_drop, false);
document.getElementById("dropArea").addEventListener("dragover", processEvent_dragover, false);

function processEvent_drop(event) {

    // Stop defaults and allow drop events
    event.preventDefault();

    // Detects files dragged from pc 
    html_element_drag_list_metaData.push(event.dataTransfer.files);
    console.log('html_element_drag_list_metaData: ', html_element_drag_list_metaData);

    // Detects html elements dragged from the html page
    const data = event.dataTransfer.getData('text/plain');
    console.log('data: ', data);
    if (data.length != 0) {
      // find the draggable element based on the data
      const dragElement = document.getElementById(data);
      console.log('dragElement: ', dragElement);

      // Append the draggable element 
      event.target.appendChild(dragElement);

    }
}

function processEvent_dragover(event) {
  // Stop defaults and allow drop events
  event.preventDefault();
}
// -------------------------------------------------

</script>
</body>
</html>

Avant de sélectionner un fichier

Drag and Drop HTML elements and files

J'ai fait glisser un fichier vers le bouton Parcourir

Drag and Drop HTML elements and files

J'ai fait glisser l'emoji du fichier représentatif vers la dropArea

Drag and Drop HTML elements and files

Exemple 2 : glisser-déposer un élément HTML

Dans cet exemple, on peut faire glisser efficacement plusieurs fichiers vers la dropArea en même temps.

<!DOCTYPE html>
<html>
<head></head>
<body>

<h1>Example 2: Drag and drop files</h1>
<input type="file" id="upload_file_dragdrop" style="display:block" class="dropArea1" multiple>

<br><br>

<button id="use_moved_data" onclick="use_moved_data()">use_moved_data</button>

<!-- ---------------------------------------- -->
<!-- CSS -->
<style>
.dropArea1 { height: 200px;
    width: 200px;
    border-radius: 15px;
    border: 0.25px solid black;
    background-color: #56b06e;
}
</style>
<!-- ---------------------------------------- -->

<script>
var other_data_related_to_dragEvent = {};
var html_element_drag_list_metaData = [];

// ----------------------------------------------------
// Drag and Drop functionality: Example 2
// ----------------------------------------------------
document.getElementById("upload_file_dragdrop").addEventListener("change", previewInput, false);

async function previewInput(event) {

    // For multiple files
    const allFiles = event.target.files;
    // console.log("allFiles :", allFiles);

    var i = 0;
    while (i < allFiles.length) {

        const file = allFiles[i];
        // console.log("file :", file);

        await obtain_fileInfo(file)
            .then(base64str => { other_data_related_to_dragEvent[file.name] = base64str; })
            .catch(error => console.error(error));

        i = i + 1;
    }

    // ---------------------
}

async function obtain_fileInfo(file) {
    var base64_string = await new Promise((resolve) => {
        const reader = new FileReader();
        reader.onload = async function(e){ 
            resolve(e.target.result); // inside resolve is the value that the function returns
        };
        reader.readAsDataURL(file);
    });
     return base64_string;
}

// ----------------------------------------------------

async function use_moved_data() {
    console.log('html_element_drag_list_metaData: ', html_element_drag_list_metaData);
    console.log('other_data_related_to_dragEvent: ', other_data_related_to_dragEvent);
}

</script>
</body>
</html>

Avant de faire glisser des fichiers dans la dropArea

Drag and Drop HTML elements and files

Après avoir fait glisser les fichiers dans la dropArea et appuyé sur le bouton use_moved_data

Drag and Drop HTML elements and files

Nous pouvons voir les données de chaîne base64 des trois fichiers qui ont été glissés dans la dropArea ! Les données de chaîne base64 peuvent ensuite être enregistrées en tant qu'objet blob et transférées sur Internet.

J'espère que ces façons de glisser-déposer des éléments et des fichiers HTML aideront quelqu'un.

Bon entraînement ! ?

? GitHub | ? Pratiquer Datscy @ Dev.to | ? Pratiquer le Datscy @ Medium

Références

  1. Comment créer une fonctionnalité glisser-déposer en JavaScript : un didacticiel étape par étape : https://medium.com/@future_fanatic/how-to-create-drag-and-drop-functionality-in-javascript- un tutoriel-étape par étape-8ea236ef9416
  2. Lire les fichiers en JavaScript : https://web.dev/articles/read-files

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript html String Object if for select using Collection this location github https
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：AbortController avec récupérationArticle suivant：AbortController avec récupération

Articles Liés

Voir plus