HTML5에서의 드래그 앤 드롭은 사용자가 웹 페이지에서 요소를 마우스로 끌어다가 다른 위치로 이동시키는 기능을 말합니다. 이를 구현하기 위해서는 HTML, CSS, 그리고 JavaScript를 사용할 수 있습니다. 아래에는 간단한 HTML5 드래그 앤 드롭 예제를 제공합니다.

기본 드래그 앤 드롭: 이 예제는 간단한 드래그 앤 드롭 동작을 구현합니다.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Basic Drag and Drop</title>
  <style>
    #draggable {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      cursor: move;
    }
  </style>
</head>
<body>

<div id="draggable" draggable="true" ondragstart="drag(event)">Drag me</div>

<script>
  function drag(event) {
    // 드래그 시작 시 데이터 전달
    event.dataTransfer.setData("text/plain", event.target.id);
  }
</script>

</body>
</html>

드롭 영역에 아이템 드롭: 이 예제는 드래그한 아이템을 특정 영역에 드롭하면 해당 위치에 아이템이 생성되는 기능을 보여줍니다.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Drop Zone</title>
  <style>
    #draggable {
      width: 100px;
      height: 100px;
      background-color: lightblue;
      cursor: move;
    }

    #dropzone {
      width: 300px;
      height: 300px;
      border: 2px dashed gray;
    }
  </style>
</head>
<body>

<div id="draggable" draggable="true" ondragstart="drag(event)">Drag me</div>
<div id="dropzone" ondrop="drop(event)" ondragover="allowDrop(event)">Drop here</div>

<script>
  function allowDrop(event) {
    event.preventDefault();
  }

  function drag(event) {
    event.dataTransfer.setData("text/plain", event.target.id);
  }

  function drop(event) {
    event.preventDefault();
    var data = event.dataTransfer.getData("text/plain");
    var draggedElement = document.getElementById(data);

    var dropzone = document.getElementById("dropzone");
    dropzone.appendChild(draggedElement.cloneNode(true));
  }
</script>

</body>
</html>

이러한 예제들을 통해 드래그 앤 드롭을 구현하는 기본적인 아이디어를 이해할 수 있을 것입니다. 원하는 동작에 맞게 수정하여 사용할 수 있습니다.