javascript 에서 drag & drop 사용하기 / 드래그 앤 드랍 / 드롭 / drag&drop 기능 구현하기
html/js 에서 draggable 사용하기
list item 에서 drag 해서 item의 위치를 변경
ref. 1 에 내용이 잘 설명되어 있다.
draggable="true"attribute 를 추가ondragstart에서event.dataTransfer를 set 해준다. drag 하는 녀석이 옮겨질 것이기 때문에 이 옮겨질 녀석의 정보(event.currentTaget)를event.dataTransfer에 넣으면 된다.ondragover에서는 drag 를 하는 동안 drag 하면서 다른 element 위에 갔을 때 다른 event 가 발생하지 않도록 막는다. (event.preventDefault())ondropevent 에서는 놓여지는 위치에 있는 녀석이 내가 처음에 있던 위치로 갈 것이다. 그래서 innerHTML 을 변경한다.
drag 한 item 을 특정위치로 옮기기
이것은 특정 item 을 특정 위치로 insert 하고, 기존의 item 을 지우면 된다. 지우고, insert 하는 것은 splice 를 이용하면 된다.
onDragStartListItem(evt, index) {
this.dragSrcIndex = index;
evt.dataTransfer.effectAllowed = "move";
},
onDragOverListItem(evt, index) {
evt.preventDefault();
//specify operation
evt.dataTransfer.dropEffect = "move";
},
onDropListItem(evt, index) {
evt.preventDefault();
evt.stopPropagation();
// delete dragged one
const temp = this.items[this.dragSrcIndex];
this.items.splice(this.dragSrcIndex, 1);
// add dragged one to new position
this.items.splice(index, 0, temp);
},full source
ref 1 의 내용과 같은 source code 이다. 긁어서 local 에서 한번 돌려보면 이해가 잘 될 것이다.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
body,
[draggable] {
user-select: none;
}
ul {
margin: auto;
text-align: center;
}
li {
list-style-type: none;
margin: 2px;
width: 300px;
background-color: #ececec;
border: 2px double #eeeeee;
}
</style>
<script type="text/javascript">
var source;
function onDragStartLi(evt) {
source = evt.currentTarget;
evt.dataTransfer.setData("text/plain", evt.currentTarget.innerHTML);
evt.dataTransfer.effectAllowed = "move";
}
function onDragOverLi(evt) {
evt.preventDefault();
evt.dataTransfer.dropEffect = "move";
}
function onDropLi(evt) {
evt.preventDefault();
evt.stopPropagation();
source.innerHTML = evt.currentTarget.innerHTML;
evt.currentTarget.innerHTML = evt.dataTransfer.getData("text/plain");
}
</script>
</head>
<body>
<p>
아래 box 들을 드래그 해보자
</p>
<ul>
<li draggable="true" ondragstart="onDragStartLi(event)"
ondragover="onDragOverLi(event)" ondrop="onDropLi(event)">
Galaxy S </li>
<li draggable="true" ondragstart="onDragStartLi(event)"
ondragover="onDragOverLi(event)" ondrop="onDropLi(event)">
iPhone</li>
<li draggable="true" ondragstart="onDragStartLi(event)"
ondragover="onDragOverLi(event)" ondrop="onDropLi(event)">
Hwawei</li>
<li draggable="true" ondragstart="onDragStartLi(event)"
ondragover="onDragOverLi(event)" ondrop="onDropLi(event)">
LG</li>
</ul>
</body>
</html>
댓글 없음:
댓글 쓰기