드래그 앤 드롭
개념
- 파일을 웹 브라우저에 마우스로 직접 끌어다 놓으면 파일이 업로드 된다.
- 웹 브라우저에 있는 파일을 로컬에 끌어다 놓으면 파일이 다운로드 된다.
드래그 앤 드롭 API
draggable 속성
- 드래그 앤 드롭 API에서 지원하는 속성으로 draggable이 있다.
- 속성값은 true/false가 있다. true는 드래그 가능, false는 드래그 불가능
<style>
#box1
{
width: 75px;
height: 70px;
padding: 5px;
margin: 5px;
background-color: red;
}
#box2
{
width: 75px;
height: 70px;
padding: 5px;
margin: 5px;
background-color: green;
} #box3
{
width: 75px;
height: 70px;
padding: 5px;
margin: 5px;
background-color: blue;
}
</style>
</head>
<body>
<h2>draggable 속성 설정 테스트</h2>
<div id="box1" draggable="true"></div>
<div id="box2"></div>
<div id="box3"></div>
</body>
관련 이벤트
- draggable 속성을 통해 드래그 앤 드롭 시 다음과 같은 이벤트들이 발생한다.
<body>
<h2>draggable 속성 설정 테스트</h2>
<div id="box1" draggable="true"
ondragstart="dragstart(event)"
ondrag="dragging(event)"
ondragend="dragend(event)"
>
</div>
<div id="box2"></div>
<div id="box3"></div>
<div id="result"></div>
<script>
function dragstart(e)
{
document.getElementById("result").innerHTML= "드래그 시작";
}
function dragging(e)
{
document.getElementById("result").innerHTML= "드래그 중";
}
function dragend(e)
{
document.getElementById("result").innerHTML= "드래그 끝";
}
</script>
target 영역에서 발생하는 이벤트
- 요소를 드래그하여 target 영역에 진입하면 dragenter 이벤트 발생
- 요소를 드래그하여 target 위에서 움직일 때 dragover 이벤트 발생
- 요소를 드래그하여 target 영역에 드롭하는 순간 drop 이벤트 발생
<div id="target"
ondragenter="dragenter(event)"
ondragover="dragover(event)"
ondragleave="dragleave(event)">
</div>
<div id="result"></div>
<script>
function dragenter(e) {
document.getElementById("result").innerHTML= "target 영역에 진입";
}
function dragover(e) {
document.getElementById("result").innerHTML= "target 영역 위에 있음";
}
function dragleave(e) {
document.getElementById("result").innerHTML= "target 영역을 벗어났습니다.";
}
드롭 관련 이벤트
-
drop 이벤트는 드래그 하는 요소가 아닌 드롭하는 대상 영역에서 정의해야 한다.
-
드롭 대상에서는 dataTransfer 객체를 통해 데이터를 드롭 대상에 넣었다 뺐다 하는 작업을 할 수 있다.
-
드래그 요소가 되는 세 개의 박스를 포함하는 영역을 추가 생성한다. 왜냐하면 원래 영역으로 돌아갔을 때 드롭되기 위한 자신의 영역이 필요하기 때문이다.
-
드래그 앤 드롭 대상이 되는 요소에 모두 drop 이벤트를 정의하였다.
-
dragstart, dragover - 데이터의 키와 데이터 id를 전달한다.
-
dragover - preventDefault()는 드래그 중 다른 이벤트에 방해받지 않도록 보호 기능
-
drop - 키와 데이터를 얻어서 appendChild() 메소드를 이용하여 드롭 대상 영역에 추가
<body>
<h2>draggable 속성 설정 테스트</h2>
<div id="box" ondrop="drop(event)" ondragover="dragover(event)">
<div id="box1" draggable="true" ondragstart="dragstart(event)"></div>
<div id="box2" draggable="true"></div>
<div id="box3"></div>
</div>
<div id="target" ondragover="dragover(event)" ondrop="drop(event)"></div>
<div id="result"></div>
<script>
function dragover(e) {
document.getElementById("result").innerHTML= "target 영역 위에 있음";
e.preventDefault();
}
function dragstart(e)
{
console.log(e);
e.dataTransfer.setData("Text", e.target.id);
}
function drop(e)
{
var targetid = e.target.getAttribute("id")
var boxid = e.dataTransfer.getData("Text");
e.target.appendChild(document.getElementById(boxid))
if(targetid == 'target')
{
alert("target에 드롭됨")
}
else
{
alert("원래 영역에 드롭됨")
}
}
</script>
dataTransfer 객체
- dataTransfer 객체 속성 및 메소드
- effectAllowed 속성 - 드래그 앤 드롭 시 동작 형태의 종류 설정
- files 속성 - 외부 파일을 웹페이지로 드롭 시 드래그되는 파일 리스트를 반환
- File API인 FileReader()를 이용하여 객체 생성
- dataTransfer 메소드들 - getData(), setData(), clearData(), setDragImage() 등의 메소드가 있다.
<body>
<h2>이미지 요소 드래그 앤 드롭</h2>
<h3>베스트 셀러 리스트</h3>
<div id="itemlist" ondrop="drop(event)" ondragover="dragover(event)">
<img id="MFC" src="mfc.jpg" width="100" height="150" hspace="20"
draggable="true" ondragstart="dragstart(event)">
<img id="API" src="api.jpg" width="100" height="150" hspace="20"
draggable="true" ondragstart="dragstart(event)">
<img id="CPLUS" src="c++.jpg" width="100" height="150" hspace="20"
draggable="true" ondragstart="dragstart(event)">
</div>
<p></p>
<h3>쇼핑카트</h3>
<div id="cart" ondragover="dragover(event)" ondrop="drop(event)"></div>
<script>
function dragstart(e) {
var id = e.dataTransfer.setData("books", e.target.id);
}
function dragover(e) {
e.preventDefault();
}
function drop(e)
{
var targetid = e.target.getAttribute("id")
var bookid = e.dataTransfer.getData("books");
e.target.appendChild(document.getElementById(bookid))
if(targetid == 'cart')
{
alert("카트에 도서를 담았습니다.")
}
else
{
alert("도서를 카트에서 꺼냈습니다.")
}
e.preventDefault();
}
</script>
</body>
외부 파일을 웹 페이지로 드래그 앤 드롭하기
FileReader() 객체의 속성과 메소드
- Onload 속성을 통해 파일을 읽어들일 때 이벤트 핸들러를 호출
- readAsDataURL(file) 코드에 의해 파일 정보를 읽어온다.
<body>
<h1>이미지 요소 드래그 앤 드롭</h1>
<div id="droparea" ondragover="dragover(event)" ondrop="drop(event)"></div>
<script>
var droparea = document.getElementById("droparea");
var dropImage = document.createElement("img");
function dragover(e) {
e.preventDefault();
}
function drop(e)
{
var file = e.dataTransfer.files[0];
var reader = new FileReader();
reader.onload = (function(thefile) {
return function(e) {
alert("ondrop");
dropImage.src = e.target.result;
droparea.appendChild(dropImage);
}
})(file);
reader.readAsDataURL(file);
e.preventDefault();
}
</script>
알고 쓰자!