HTML 요소 및 파일 드래그 앤 드롭

웹앱은 데이터 수집/처리에 유용할 수 있습니다. 데이터를 수집하고 저장하는 메커니즘이 사용하기 쉽다면 데이터 처리에 유용한 데이터를 많이 축적할 수 있습니다. 한 위치에서 다른 위치로 데이터를 이동하는 쉬운 방법 중 하나는 웹앱의 드래그 앤 드롭 기능입니다.

이 게시물에서는 JavaScript 드래그 앤 드롭 프로그래밍을 사용하여 HTML 요소 데이터와 파일을 이동하고 저장하는 방법에 대한 세 가지 예를 보여줍니다.

예 0: HTML 요소 끌어서 놓기

<h1 id="Example-Drag-and-Drop-HTML-text-elements">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>

보라색 dropArea에 HTML 텍스트(HTML 텍스트)를 드래그 앤 드롭하기 전

HTML 텍스트(HTML text)를 보라색 dropArea에 드래그 앤 드롭한 후

예제 0에서는 HTML 텍스트 요소가 실제로 드롭 영역으로 이동되었습니다. HTML 텍스트에 대한 div의 ID가 변수 데이터에 나타나므로 dropArea 내부의 요소 ID를 추적할 수 있습니다. 이 예제는 웹앱에 작성된 기존 HTML을 구성/저장하는 데 유용하지만 대부분의 데이터 수집 상황에서는 다른 위치의 데이터를 구성/저장하려고 합니다.

예 1: 파일 업로드는 드래그 가능한 HTML 요소/이모지로 표시됩니다.

이 예는 HTML 요소 드래그와 파일 드래그를 혼합한 것입니다. 찾아보기 버튼을 사용하여 파일을 선택할 수 있습니다. 파일을 찾아보기 버튼으로 드래그하거나 찾아보기 버튼을 클릭하여 파일을 선택하세요. 그런 다음 파일을 선택한 후 이모티콘이 나타나고, 이모티콘의 모양은 HTML 요소 측면에서 파일을 나타냅니다. 그런 다음 파일을 대표하는 HTML 요소 이모티콘을 dropArea로 드래그하여 데이터 수집/저장할 수 있습니다.

<h1 id="Example-Click-button-create-drag-and-drop-elements">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>

파일을 선택하기 전에

파일을 찾아보기 버튼으로 드래그했습니다.

대표 파일 이모티콘을 dropArea로 드래그했습니다.

예 2: HTML 요소 끌어서 놓기

이 예에서는 한 번에 여러 파일을 dropArea로 효율적으로 드래그할 수 있습니다.

<h1 id="Example-Drag-and-drop-files">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>

dropArea로 파일을 드래그하기 전에

파일을 dropArea로 드래그하고 use_moved_data 버튼을 누른 후

dropArea에 드래그한 세 파일의 base64 문자열 데이터를 볼 수 있습니다! 그런 다음 base64 문자열 데이터를 blob 개체로 저장하고 인터넷을 통해 전송할 수 있습니다.

HTML 요소와 파일을 드래그 앤 드롭하는 방법이 누군가에게 도움이 되기를 바랍니다.

즐거운 연습 되세요! ?

? GitHub | ? Datscy 연습 @ Dev.to | ? Datscy 연습 @ Medium

참고자료

1. JavaScript에서 드래그 앤 드롭 기능을 만드는 방법: 단계별 튜토리얼: https://medium.com/@future_fanatic/how-to-create-drag-and-drop-functionity-in-javascript- 단계별 튜토리얼-8ea236ef9416
2. JavaScript로 파일 읽기: https://web.dev/articles/read-files

위 내용은 HTML 요소 및 파일 드래그 앤 드롭의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!