j JavaScript

[js] JS - Drag & Drop (= Draggable) - 요소이동 (= 요소끌어이동 = 드래그앤드롭 = 드래거블)

6,391

Drag & Drop 예제

<style>

#hz {

position: absolute;

z-index: 9;

text-align: left;

border: 1px solid silver;

}

#hz p {padding:5px;}

#hzheader {

padding: 10px;

cursor: move;

z-index: 10;

background-color: #2196F3;

color: #fff;

}

</style>

<div id="hz">

<div id="hzheader">이동하려면 여기 클릭</div>

<p>홈짱닷컴</p>

<p>Homzzang.com</p>

<p>홈페이지 제작관리강의</p>

</div>

<script>

// 드래그 가능한 요소 생성

dragElement(document.getElementById("hz"));

function dragElement(elmnt) {

var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;

// 이동 목적지

if (document.getElementById(elmnt.id + "header")) {

document.getElementById(elmnt.id + "header").onmousedown = dragMouseDown;

} else {

elmnt.onmousedown = dragMouseDown;

}

function dragMouseDown(e) {

e = e || window.event;

e.preventDefault();

// 시작지점 마우스좌표 얻기

pos3 = e.clientX;

pos4 = e.clientY;

document.onmouseup = closeDragElement;

// 이동지점 마우스좌표 얻기

document.onmousemove = elementDrag;

}

function elementDrag(e) {

e = e || window.event;

e.preventDefault();

// 이동지점 커서좌표 계산

pos1 = pos3 - e.clientX;

pos2 = pos4 - e.clientY;

pos3 = e.clientX;

pos4 = e.clientY;

// 요소의 새 위치 설정

elmnt.style.top = (elmnt.offsetTop - pos2) + "px";

elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";

}

function closeDragElement() {

/* 마우스버튼 풀렸을 때, 이동 멈춤 */

document.onmouseup = null;

document.onmousemove = null;

}

}

</script>

결과보기