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
MouseEvent.clientX - Web API | MDN
MouseEvent.clientX {{{APIRef("DOM ์ด๋ฒคํธ")}} MouseEvent} ์ธํฐํ์ด์ค์ clientX ์ฝ๊ธฐ ์ ์ฉ ์์ฑ์ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ์ ํ๋ฆฌ์ผ์ด์ viewport}} ๋ด์ ์ํ ์ขํ๋ฅผ ์ ๊ณตํ๋ค(ํ์ด์ง ๋ด์ ์ขํ์๋ ๋ฐ๋). ์๋ฅผ ๋ค์ด
developer.mozilla.org
HTML Drag and Drop API
HTML Drag and Drop API In HTML, any element can be dragged and dropped. Example Drag the W3Schools image into the rectangle. Drag and Drop Drag and drop is a very common feature. It is when you "grab" an object and drag it to a different location. Browser
www.w3schools.com
How To Create Drag and Drop Elements with Vanilla JavaScript and HTML | DigitalOcean
In this tutorial, we will build a drag-and-drop example using the HTML Drag and Drop API with vanilla JavaScript to use the event handlers.
www.digitalocean.com