일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- Flutter
- php 프로그래밍 입문
- 페이코 친구코드
- 한정 분기
- php 프로그래밍 입문 3판
- php 프로그래밍 입문 예제
- 페이코 추천인
- 스프링
- C언어
- C
- php
- Java
- 페이코 추천인코드
- JAVA SPRING
- 페이코 초대코드
- 플러터
- 자바 스프링
- SWEA
- 백준
- 자바
- php 프로그래밍
- spring
- 최단 경로
- php 프로그래밍 입문 연습문제
- programmers
- php 프로그래밍 입문 솔루션
- 배열
- php 프로그래밍 입문 문제풀이
- 플러터 개발환경 설정
- 파이썬
- Today
- Total
ImJay
[JavaScript] 간단한 드래그 앤 드롭 예제 (Drag&Drop) 본문
[JavaScript] 간단한 드래그 앤 드롭 예제 (Drag&Drop)
See the Pen Untitled by Jay (@ijkgit) on CodePen.
이 코드는 HTML Drag and Drop API를 사용하여 화면 어디든지 드래그하여 <div> 요소를 놓을 수 있는 간단한 예제입니다.
이 HTML 코드는 드래그 가능한 <div> 요소를 생성하고, 해당 요소를 드래그할 때 실행될 JavaScript 함수를 호출하는 구조를 가지고 있습니다.
function drag(ev) {
// 드래그하는 요소의 ID를 데이터로 설정
ev.dataTransfer.setData("text", ev.target.id);
}
drag 함수는 드래그가 시작될 때 호출되는 함수입니다.
이 함수에서는 ev.dataTransfer.setData("text", ev.target.id);를 사용하여 드래그하는 요소의 ID를 데이터로 설정합니다.
document.addEventListener("dragover", function (event) {
// 기본 동작 막기
event.preventDefault();
});
dragover 이벤트는 드래그 중인 요소가 드롭 가능한 영역 위로 이동할 때 발생합니다. 이 이벤트에서는 event.preventDefault();를 호출하여 브라우저의 기본 동작을 막아주고, 이를 통해 드래그된 요소를 어디든지 이동할 수 있도록 합니다.
document.addEventListener("drop", function (event) {
// 기본 동작 막기
event.preventDefault();
// 드래그된 요소의 ID 가져오기
var data = event.dataTransfer.getData("text");
// ID를 사용하여 드래그된 요소 가져오기
var draggedElement = document.getElementById(data);
// 마우스 좌표 가져오기
var mouseX = event.clientX;
var mouseY = event.clientY;
// 드래그된 요소를 마우스 좌표에 위치시키기
draggedElement.style.left = mouseX - draggedElement.offsetWidth / 2 + "px";
draggedElement.style.top = mouseY - draggedElement.offsetHeight / 2 + "px";
// 드래그된 요소를 body에 추가하기
document.body.appendChild(draggedElement);
});
drop 이벤트는 드래그된 요소를 놓았을 때 발생합니다. 이 이벤트에서는 event.preventDefault();를 호출하여 브라우저의 기본 동작을 막고, 드래그된 요소를 마우스의 좌표에 위치시키고, 해당 좌표에 해당하는 위치에 드래그된 요소를 추가합니다.
- event.clientX 및 event.clientY는 현재 마우스의 브라우저 창에서의 X 및 Y 좌표를 나타냅니다.
- draggedElement.offsetWidth 및 draggedElement.offsetHeight는 드래그된 요소의 너비와 높이를 나타냅니다.
- draggedElement.style.left 및 draggedElement.style.top은 드래그된 요소의 CSS left 및 top 속성을 설정합니다.
위의 좌표 계산은 마우스가 클릭된 지점에 따라 드래그된 요소를 마우스의 중심 위치에 배치합니다. offsetWidth와 offsetHeight를 사용하여 드래그된 요소의 크기를 고려하여 정확한 위치로 배치하고 있습니다.
이렇게 함으로써, 사용자는 페이지 어디든지 드래그된 요소를 놓을 수 있게 됩니다. 코드에서는 간단한 예시로 드래그된 요소를 화면 중앙에 놓았습니다.
'프론트 > JavaScript' 카테고리의 다른 글
[HTML/CSS/JavaScript] pointer-events: none; 처리 시 주의할 점 (1) | 2023.12.06 |
---|---|
[JavaScript/jQuery] show() 메소드 사용법 (0) | 2023.04.14 |
[JavaScript/jQuery] hide() 메소드 사용법 (0) | 2023.04.14 |