DataTransfer: items 속성

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

읽기 전용 DataTransfer의 items 속성은 드래그 작업에서 데이터 전송 항목의 목록입니다. 목록은 작업의 각 항목에 대해 하나의 항목이 포함되며 작업에 항목이 없으면 목록은 비어 있습니다.

값

드래그 작업에서 드래그되는 항목을 나타내는 DataTransferItem 객체를 포함하는 DataTransferItemList 객체입니다. 드래그되는 각 객체에 대해 하나의 목록 항목이 있습니다. 드래그 작업에 데이터가 없으면 목록은 비어 있습니다.

예제

드래그된 항목 로깅

이 예제는 드래그된 항목에 대한 정보를 기록하기 위해 items를 사용합니다.

HTML

html
<ul>
  <li id="source1" draggable="true">Drag Item 1 to the Drop Zone</li>
  <li id="source2" draggable="true">Drag Item 2 to the Drop Zone</li>
</ul>
<div id="target">Drop Zone</div>

<button id="reset">Reset</button>

CSS

css
div {
  margin: 0em;
  padding: 2em;
}

#target {
  border: 1px solid black;
}

JavaScript

js
function dragstartHandler(ev) {
  console.log(`dragstart: target.id = ${ev.target.id}`);
  // 요소의 id를 드래그 페이로드에 추가합니다.
  // 그러면 드롭 핸들러가 트리에 추가할 요소를 알 수 있습니다.
  ev.dataTransfer.setData("text/plain", ev.target.id);
  ev.dataTransfer.effectAllowed = "move";
}

function dropHandler(ev) {
  ev.preventDefault();
  // 대상의 id를 가져오고 이동된 요소를 대상의 DOM에 추가합니다.
  const data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
  // 각 항목의 "kind"와 "type"을 출력합니다.
  if (ev.dataTransfer.items) {
    for (const item of ev.dataTransfer.items) {
      console.log(`kind = ${item.kind}, type = ${item.type}`);
    }
  }
}

function dragoverHandler(ev) {
  ev.preventDefault();
  // 이동할 dropEffect를 설정합니다.
  ev.dataTransfer.dropEffect = "move";
}

const source1 = document.querySelector("#source1");
const source2 = document.querySelector("#source2");
const target = document.querySelector("#target");

source1.addEventListener("dragstart", dragstartHandler);
source2.addEventListener("dragstart", dragstartHandler);
target.addEventListener("dragover", dragoverHandler);
target.addEventListener("drop", dropHandler);

const reset = document.querySelector("#reset");
reset.addEventListener("click", () => document.location.reload());

결과

명세서

Specification
HTML Standard
# dom-datatransfer-items-dev

브라우저 호환성

BCD tables only load in the browser

같이 보기