티스토리 뷰

프로그래밍/HTML5

Drag & Drop (드래그 앤 드롭)(1)

쇠주는참이슬 2012. 3. 22. 13:38
모든 드래그 이벤트는 dataTransfer 객체를 통해서 이루어 진다.


dropEffect : 드래그가 끝나면서 사용할 효과 지정
effectAllowed (copy,move,link) : 드래그하는 동안 어떤 효과를 사용하는지 지정. (default는 move임)


clearData(type) : 주어진 유형의 데이터 삭제.
getData(type) : 주어진 유형의 데이터를 가져온다.
setData(type, data) 주어진 유형으로 데이터를 설정 

스타일은 다음에 넣는다.. 귀찮으니까..
기능만 우선 봅시다.





예제소스

<!DOCTYPE HTML>
<html>
<head>

<style>
#files
{
position:absolute;
top:10%;
lest:5%;
list-style:none;
}
#files li
{
  float:left;
  width:51px;
  height:22px;
  color:black;
  text-align:center;
 
}
#files li:hover
{
font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-weight:bold;
cursor:pointer;
}
#trash
{
position:absolute;
right:10%;
top:5%;
width:100px;
height:75px;
border:3px solid red;
background:yellow;
}
#trash li
{
display:none; // 휴지통 div에 들어갔을때 내용을 안보이게
}
</style>
    
    <script>
function drag(obj, e)
{  
e.dataTransfer.setData('Text', obj.id);// 텍스트 유형이고 타겟아이디값을 같이 가져간다.
 
}
function drop(obj, e)
{  
 
var id = e.dataTransfer.getData('Text');
obj.appendChild(document.getElementById(id));
e.preventDefault(); // event.preventDefault 메서드를 호출하면 바로 그위치에 드롭이 된다. 
trashDiv = document.getElementById("trash");
if(!trashDiv)
{
return;
}
}
 
 
</script>
<meta charset="utf-8">
<title>무제 문서</title>
</head>

<body>

<ul id="files">
<li draggable="true" id="file1" ondragstart="drag(this, event)">문서1</li>
<li draggable="true" id="file2" ondragstart="drag(this, event)">문서2</li>
<li draggable="true" id="file3" ondragstart="drag(this, event)">문서3</li>
</ul>
    
    <div id="trash" ondrop="drop(this, event)" ondragenter="return false" ondragover="return false"> 휴지통 </div>

     
</body>
</html>
 

'프로그래밍 > HTML5' 카테고리의 다른 글

div 가로 정렬하기.  (0) 2012.05.25
Drag & Drop (드래그 앤 드롭)(2)  (0) 2012.03.22
스토리지 (Storage) sessionStorage, localStorage  (0) 2012.03.22
HTML5 Canvas를 이용한 간단한 그림판 만들기.  (0) 2012.03.21
1. HTML5를 이용한 간단한 웹폼화면 만들기  (0) 2012.03.20
댓글
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함