HTML 드래그 앤 드롭 API
2301 단어 javascripthtmlwebdev
이 API는 사용자가 클릭으로 허용한 요소를 선택하고 사용자가 허용하는 놓기 가능한 인터페이스로 끌어다 놓을 수 있도록 합니다. 이것은 모두 사용자 정의할 수 있으므로 어떤 요소를 끌어서 놓을 수 있는지 나타낼 수 있습니다. 몇 가지 기본 기능을 가진 몇 가지 간단한 기능만큼 쉽게.
텍스트를 드래그 앤 드롭하는 간단한 방법을 단계별로 설명하겠습니다.
<script>
function dragstart_handler(el) {
el.dataTransfer.setData("text/plain", el.target.id);
}
window.addEventListener('DOMContentLoaded', () => {
// Reference to the element we will drag
const element = document.getElementById("draggable");
// Add the handler to the div to make it draggable
element.addEventListener("dragstart", dragstart_handler);
});
</script>
<div id="draggable" draggable="true">You can drag this element.</div>
드래그한 개체를 놓기 가능한 영역에 복사합니다.
드래그한 개체를 이동하면 놓기 가능한 영역으로 이동합니다.
링크는 소스와 드롭 위치 사이에 어떤 형태의 관계 또는 연결이 생성될 것임을 나타냅니다.
내 예에서는 다음과 같이 move dropEffect를 사용합니다.
function dragover_handler(el) {
el.preventDefault();
el.dataTransfer.dropEffect = "move";
}
<script>
function drop_handler(el) {
el.preventDefault();
const data = ev.dataTransfer.getData("text/plain");
el.target.appendChild(document.getElementById(data));
}
</script>
<p id="target" ondrop="drop_handler(event)" ondragover="dragover_handler(event)">Drop Zone</p>
모든 단계를 결합하면 this codePen 테스트 및 완료 방법을 확인하기 위해 만든 코드와 같은 코드로 끝납니다. 테스트하려면 텍스트를 드래그해야 합니다. 이 요소를 드래그할 수 있습니다. 이동하려면 텍스트 드롭 영역으로 이동합니다.
마치기 위해 이것이 이 API를 사용하는 방법에 대한 작은 예라고 덧붙이겠습니다. 예를 들어 이미지를 드래그하여 텍스트뿐만 아니라 놓기 가능한 영역에 놓을 수도 있습니다.
Reference
이 문제에 관하여(HTML 드래그 앤 드롭 API), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/producthackers/html-drag-and-drop-api-5b81텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)