넵 저번 포스팅에서 drag and drop 에 대해서 정말 간단하게만 작성 하였는데
drop까지는 못했던것 같습니다.
그 마무리 작업을 하도록 하겠습니다.
// 자바스크립트를 이용한 드래그 앤 드롭 1탄!
우선 저번 코드에서 해줘야 할 작업이 있습니다.
객체를 이동할건데요 이동하기 위해서 객체의 최상단에 id값을 하나 주도록 하겠습니다.
<div class="dragtarget" id="newTargetID">
<div class="dragInner" draggable="true" ondragstart="dragStart_(event)" ondrag="drag_(event)">
Drag Target
</div>
</div>
자 새롭게 id를 추가하였구요
dragStart부분에서
해당 id값을 던지기로 합니다.
function dragStart_(e){
console.warn('drag Start');
var parentNode = e.target.parentElement;
e.dataTransfer.setDragImage(parentNode,0,0);
e.dataTransfer.setData('targetId',e.target.parentElement.id);
}
event.dataTransfer에 있는 setData로 데이터를 set하고 drop에서 getData로 받아 와서 사용 가능합니다.
** 드래그 이벤트는 보라색 영역만 받기 때문에 전체 태그가 드래그 하기 위해서 parentElement.id로 부모의 id를 넘기도록 합니다. id도 부모에 설정 하였구요
그리고 dropzone에 droppable ="true"는 설정 된상태겠죠? drop 이벤트에
e.preventDefault() 추가와
해당 id값을 가져와서 dropzone에 붙이도록 하겠습니다.
function drop_(e){
console.warn("drop");
e.preventDefault();
var targetId = e.dataTransfer.getData('targetId');
// e.target ( 현재 dropzone 태그 )
// e.target.appendChild (해당 dropzone 태그에 )
// document.getElementById(targetId) 드래그 하였던 타겟 (setData로 id를 넘김)
// 을 붙이도록 합니다.
e.target.appendChild(document.getElementById(targetId));
}
이 작업이 완료 될 시
드롭시!
깔끔하게 드롭된 점이 확인되네요
미천한 글 읽어주셔서 감사합니다.~
전체 소스코드
<!DOCTYPE html>
<html>
<head>
<title> 드래그앤드롭 </title>
<meta charset="utf-8">
<style>
.dragtarget{
width:100px;
height:100px;
background-color:tomato;
}
.dragInner{
width:inherit;
height:30px;
background-color:slateblue;
color:white;
}
.dropzone{
position:absolute;
width:500px;
height:500px;
background-color:yellowgreen;
left:300px;
top:300px;
}
</style>
</head>
<body>
<div class="dragtarget" id="newTargetID">
<div class="dragInner" draggable="true" ondragstart="dragStart_(event)" ondrag="drag_(event)">
Drag Target
</div>
</div>
<div class ="dropzone" droppable="true" ondragover="dragOver_(event)" ondrop="drop_(event)"> Drop Zone </div>
<script>
function dragStart_(e){
console.warn('drag Start');
var parentNode = e.target.parentElement;
e.dataTransfer.setDragImage(parentNode,0,0);
e.dataTransfer.setData('targetId',e.target.parentElement.id);
}
function drag_(e){
console.log("drag");
}
function dragOver_(e){
e.preventDefault();
}
function drop_(e){
var targetId = e.dataTransfer.getData('targetId');
console.warn("drop");
e.preventDefault();
e.target.appendChild(document.getElementById(targetId));
}
</script>
</body>
</html>
