Drag and Drop API์ ๋ํด์ ์ ๋ฆฌ ํด๋ณด๊ฒ ์ต๋๋ค.
์ ๊ฐ ๊ณต๋ถํ๊ณ ์ ๋ฆฌํ ๋ด์ฉ์ด๊ธฐ ๋๋ฌธ์ ๋ค์ ์ฅํฉํ๊ณ , ํ๋ฆฐ ๋ถ๋ถ์ด ์์ ์ ์์ต๋๋ค :D
Drag and Drop API
<div class = "div-class" ... draggable="true" ondragstart="ondragstart(event)" ondragover="ondragover_handler(event)" ondragend="ondragend(event)" ondrop="ondrop(event)"
draggable = 'true'
ํด๋น div ์์ญ์ด ๋๋๊ทธ๋ฅผ ํ ์ ์๋๋ก ํ๊ธฐ์ํด draggable ์์ฑ์ true๋ก ์ค์ ํด์ค๋๋ค.
<div class="pocket-item" id="pocket-item-1" draggable="true">
์๋ ๊ทธ๋ฆผ ์ฒ๋ผ ๋๋๊ทธ๋ฅผ ํ ์ ์๊ฒ ๋ฉ๋๋ค.
draggable ์์ฑ๋ง ์ถ๊ฐํ๋ค๊ณ ํด์ ๋๋๊ฒ ์๋๋ผ์, ์ด์ Drag and Drop API ์ ๋ํด์ ์๋์ ์ด๋ฒคํธ๋ฅผ ๊ตฌํํด๋ณด๊ฒ ์ต๋๋ค.
- ondragstart
- ondragend
- ondragover
- ondrop
ondragstart
๋๋๊ทธ๊ฐ ์์๋์ ๋, ์ฒ๋ฆฌํ ์ด๋ฒคํธ
dataTransfer ๊ฐ์ฒด์ setData๋ก ๋ฐ์ดํฐ๋ฅผ ์ ์ฅํ ์ ์์ต๋๋ค.
๋๋๊ทธ ์ค์ css ์์ฑ์ด๋ ํด๋์ค๋ฅผ ์ถ๊ฐํ ์ ์์ต๋๋ค.
function ondragstart_handler(event) {
dataTransfer.setData('text/plain', event.target.id);
$('#' + event.target.id).addClass('placeholder'); // ํด๋์ค ๊ฐ์ ์ฃผ๊ธฐ
// ๋๋, ๋ณ์ ์๋ก ๋ฐ์์ ์ฌ์ฉํ๊ธฐ.
// var pocketItem = document.getElementById(event.target.id);
}
ondragend
๋๋๊ทธ๊ฐ ๋๋ฌ์ ๋, ์ฒ๋ฆฌํ ์ด๋ฒคํธ
์๋ฅผ ๋ค์ด, ์๊น dragstart์ ์ฃผ์๋ ํด๋์ค๋ฅผ ์ญ์ ํ๋ ์ด๋ฒคํธ๋ฅผ ์์ฑ ํด๋ณด์์ต๋๋ค.
function ondragend_handler(event) {
$('#' + event.target.id).removeClass('placeholder');
}
ondragover
๋๋๊ทธ ์ค ์ฒ๋ฆฌํ ์ด๋ฒคํธ
* ๋ธ๋ผ์ฐ์ ์์ ๊ธฐ๋ณธ์ ์ผ๋ก drop ๋์์ ๋ฐฉ์งํ๊ณ ์์ด์, ondragover์์ drop ๋์ ๋ฐฉ์งํ์ง ๋ชปํ๋๋ก ์ฒ๋ฆฌํด์ค์ผ ํ๋ค.
function ondragover_handler(event) {
event.preventDefault(); // important!
}
์๋ฅผ ๋ค์ด.. ondragover์์๋ ์ด๋ ๊ฒ ์ฒ๋ฆฌํ ์๋ ์์ต๋๋ค.
์ฒซ ๋ฒ์งธ ํฌ์ผ์ -> ๋ ๋ฒ์งธ ํฌ์ผ๊ณผ ์์น๋ฅผ ์ฎ๊ธธ ๋, ๋๋๊ทธ ์ค์ ํด๋น ์์ญ์ ondragover๊ฐ ์คํ์ด ๋ ๋, ์๊ฐ์ ์ผ๋ก ํํ์ ์ํค๋ ๊ฒ์ ๋๋ค.
์ฝ๋๋ ์๋์ ๊ฐ์ด ์์ฑํ ์ ์์ต๋๋ค.
function ondragover_handler(e) {
e.preventDefault(); // drop ๋ฐฉ์ง ์ฒ๋ฆฌ
if (e.target.className === 'pocket-item') {
const parent = document.getElementById(e.target.id);
const child = document.getElementById(draggable); // dragstart ํจ์์์ ์ค์ ํ draggable ๋ณ์
parent.after(child); // ํฌ์ผ2 ๋ค์์ ํฌ์ผ1์ ์ถ๊ฐ
}
}
ondrop
ํด๋น ์์ญ์ ๋๋์ด ๋์์ ๋, ์ด๋ฒคํธ ์ฒ๋ฆฌ
์ด์ ์ ondragstart์์ ์ค์ ํด์คฌ๋ dataTransfer ๊ฐ์ฒด์ ๋ฐ์ดํฐ๋ฅผ ๋ฐ์์ ์ฌ์ฉํ ์ ์์ต๋๋ค.
function ondrop_handler(event) {
const id = event.dataTransfer.getData('text'); // ondragstart์์ ์ค์ ํ๋ ๋ฐ์ดํฐ
const dragItem = document.getElementById(id);
const dropzone = event.target.id;
// .. ์๋๋ ๋๋ํ์ ๋ ์ฒ๋ฆฌ..
}
REFERENCES