이미지 출처 : http://caniuse.com/#feat=dragndrop
"can I use.." 에 따르면, 강력한 드래그 앤 드롭 기능을 지원하는 녀석들이 많이 보이는 군요. IE 가 9.0 까지는 부분지원하지만, 10.0 부터는 제대로 지원할 예정이고, 주력 브라우저들인 파폭, 크롬, 사파리, 오페라는 모두 지원합니다. 아쉽게도, 모바일 단말들의 브라우저는 현재 모두 지원하지 않는군요.. 모바일 브라우저들도 빨리 지원하길 기대해봅니다.
드래그 앤 드롭 API 살펴보기
- draggable : true/false
<div id="draggable3" draggable="true"/>
- ondragenter : drag 하는 element 가 target에 처음 닿는 순간 이벤트 발생
- ondragover : drag 하는 element 가 target 위에서 움직일 떄 발생
- ondrop : drag 한 element 가 target element 위에서 drop 되는 순간 발생
<div id="target1"
ondragenter="return enter(event)"
ondragover="return over(event)"
ondrop="return drop(event">
- ondragstart : drag 하는 element 가 drag 시작할 떄 발생
- ondragend : drag 하는 element 의 drag 가 끝났을 떄 발생
<div id="draggable1", draggable="true"
ondragstart="return start(event)"
ondragend="return end(event)">
dataTransfer 객체
- dataTransfer 객체는 HTML5 가 드래그 앤 드롭 동작을 지원하기 위해 HTML5 안에 추가한 이벤트 객체로, 이 객체를 이용하기 위해서는 드래그 앤 드롭 동작을 시작할 떄 전달된 이벤트 객체를 통해 이 객체에 접근할 수 있다.
- dataTransfer.effectAllowed 는 어떤 형태의 드래그 앤 드롭을 지원할지를 명시.
- dataTransfer.setData() 와 dataTransfer.getData() 는 드래그와 드롭시 필요한 데이터를 명시하는 데 사용된다.
- dataTransfer.setDragImage() 는 드래그될 요소의 이미지를 명시할 떄 사용한다.
e.dataTransfer.effectAllowed = "move";
e.dataTransfer.setData( "Data", e.target.getAttribute( "id" ) );
e.dataTransfer.setFragImage( e.target, 0, 0 );
예제 코드
<!DOCTYPE HTML>
<html>
<head>
<title>
Drag and Drop Example
</title>
<style type="text/css">
#target1, #target2, #target3
{
float : left;
width : 250px;
height : 250px;
padding : 10px;
margin : 10px;
background-color : cyan;
}
#draggable1, #draggable2, #draggable3
{
width : 75px;
height : 70px;
padding : 5px;
margin : 5px;
background-color : orange;
}
</style>
<script type="text/javascript">
function start( e )
{
e.dataTransfer.effectAllowed="move";
e.dataTransfer.setData( "Data", e.target.getAttribute( "id" ) );
e.dataTransfer.setDragImage( e.target, 0, 0 );
return true;
}
function enter( e )
{
return true;
}
function over( e )
{
var iddraggable = e.dataTransfer.getData( "Data" );
var id = e.target.getAttribute( "id" );
if ( id == "target1" )
return false; // false -> drop ok, true -> drop no.
if ( id == "target2" && iddraggable == "draggable3" )
return false;
else if ( id == "target3" &&
( iddraggable == "draggable1" || iddraggable == "draggable2" ) )
return false;
else
return true;
}
function drop( e )
{
var iddraggable = e.dataTransfer.getData( "Data" );
e.target.appendChild( document.getElementById( iddraggable ) );
e.stopPropagation();
return false;
}
function end( e )
{
e.dataTransfer.clearData( "Data" );
return true;
}
</script>
</head>
<body>
<h1>Drag and Drop Example</h1>
<div id="target1"
ondragover="return over(event)"
ondragenter="return enter(event)"
ondrop="return drop(event)">
<div id="draggable1" draggable="true"
ondragstart="return start(event)"
ondragend="return end(event)">
1
</div>
<div id="draggable2" draggable="true"
ondragstart="return start(event)"
ondragend="return end(event)">
2
</div>
<div id="draggable3" draggable="true"
ondragstart="return start(event)"
ondragend="return end(event)">
3
</div>
</div>
<div id="target2"
ondragover="return over(event)"
ondragenter="return enter(event)"
ondrop="return drop(event)">
</div>
<div id="target3"
ondragover="return over(event)"
ondragenter="return enter(event)"
ondrop="return drop(event)">
</div>
</body>
</html>
<결과1. 최초 실행>
<결과2. draggable1 은 target3 에, draggable3 은 target2 에 drop >
drag_and_drop.html'프로그래밍 놀이터 > Web' 카테고리의 다른 글
| [HTML5] 인라인 편집 - 기초, Tutorial, Sample Code (3) | 2012.09.08 |
|---|---|
| [HTML5] 웹 폼 컨트롤( Web form control ) - 기초, Tutorial, Sample Code (0) | 2012.09.07 |
| [HTML5] Canvas 요소로 그림 그리기 - 기초, Tutorial, Sample Code (0) | 2012.09.07 |
| [HTML5] HTML5 개요 ( 기본 ) (2) | 2012.09.05 |
| [xHTML] xHTML Tutorial. #2 (xHTML 해부) (0) | 2012.02.28 |
댓글