라이브러리는 다음 사이트에서 내려받을 수 있다.
prototype.js : http://prototypejs.org
scriptaculous.js : http://script.aculo.us
1. 우선. 라이브러리를 로드한다.
<script type="text/javascript" src="${CONTEXT }/lib/prototype.js"></script>
<script type="text/javascript" src="${CONTEXT }/lib/scriptaculous/scriptaculous.js? effects,dragdrop"></script>
2. 드래그 가능한 아이템을 객체 생성(instant화) 시킨다.
이것만으로 화면에서는 해당 아이템이 드래그 되는걸 확인할 수 있다. 오오!
new Draggable($('DRAG_ITEM_ID'));
그러나, 대개 이렇게 id 마다 지정은 안할 테고 뭉탱구리로 드래그 가능한 아이템을 등록할거다.
$$('.draggable').each(function(item) {
new Draggable(item);
});
자, 이제 'draggable' 이라는 클래스를 가지는 모든 element 가 드래그 가능하게 되었다.
3. 특정한 드래그 가능한 아이템을 특정 구역에 떨구었을(drop) 경우, 액션을 취하고 싶다면 다음을 추가한다.
여기서 accept 속성은 받아들일 아이템의 클래스명이다.
Droppables.add('shopping_cart', {
accept: 'product',
onDrop: function(element) {
alert(element.innerHTML);
}
});
이제 shopping_cart 라는 id 를 가진 element 위에 product 클래스를 가진 element 을 드랍시키면 그 내용이 출력된다.
아래는 이 예제를 테스트할 수 있는 전문이다.
<html>
<head>
<title>File Upload Exmaple Using Prototype Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>DND Test</title>
<script type="text/javascript" src="${CONTEXT }/lib/prototype.js"></script>
<script type="text/javascript" src="${CONTEXT }/lib/scriptaculous/scriptaculous.js?dragdrop"></script>
<script type="text/javascript">
document.observe("dom:loaded", function() {
// drop 영역 구현
Droppables.add('shopping_cart', {
accept: 'product',
onDrop: function(element) {
alert(element.innerHTML);
}
});
// drag item 등록
$$('.draggable').each(function(item) {
new Draggable(item);
});
});
</script>
<style type="text/css">
#shopping_cart {width:200px;height:200px;border:4px solid red;}
.product {border:2px solid blue;display:inline;}
</style>
</head>
<body>
<div id="shopping_cart">
<h2>여기는 쇼핑 카트입니다. 제품을 올려놓으세요</h2>
</div>
<div id="products">
<div class="product draggable">제품1</div>
<div class="product draggable">제품2</div>
<div class="product draggable">제품3</div>
</div>
</body>
</html>
