HTML 요소 및 파일 드래그 앤 드롭-JS 튜토리얼-php.cn

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

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

예 0: 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>

로그인 후 복사

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

Drag and Drop HTML elements and files

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

Drag and Drop HTML elements and files

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

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

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

<!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>

로그인 후 복사

파일을 선택하기 전에

Drag and Drop HTML elements and files

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

Drag and Drop HTML elements and files

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

Drag and Drop HTML elements and files

예 2: HTML 요소 끌어서 놓기

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

<!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>

로그인 후 복사

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

Drag and Drop HTML elements and files

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

Drag and Drop HTML elements and files

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

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

즐거운 연습 되세요! ?

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

참고자료

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

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