2011년 5월 23일 월요일

HTML5 - an example of drag and drop

본 Example은 "Your currently avaliable resources"에 있는 IT 장비를 "Firewall"로 구분된 "Blue zone", "Red zone"으로 드래그앤드롭으로 배치하는 것 입니다. 본 Example 역시 Firefox 3.5 이상에서 정상적으로 동작 합니다.
Key Code
<script>
function dragIt(target, e) {
e.dataTransfer.setData('SpanImg', target.id);
}
function dropIt(target, e) {
var id = e.dataTransfer.getData('SpanImg');
target.appendChild(document.getElementById(id));
e.preventDefault();
}
function trashIt(target, e) {
var id = e.dataTransfer.getData('SpanImg');
removeElement(id);
e.preventDefault();
}
function removeElement(id) {
var d_node = document.getElementById(id);
d_node.parentNode.removeChild(d_node);
}
</script>


- Function "dragIt(target, e)"은 "draggable" 속성이 부여된 image에 사용되며, 사용자가 image을 클릭한 상태로 옮길때 호출 됩니다.
- Function "dropIt(target, e)"은 Drag된 image가 Drop되는 위치에서 발생합니다. 본 Example에서는 "Blue zone", "Red zone", "Your currently available resources" 영역에 설정 되어 있습니다.
<td width="40%" align="center" id="blue" ondrop="dropIt(this, event)" ondragenter="return false" ondragover="return false">
<span draggable="true" id="hub" ondragstart="dragIt(this, event)"><img src="https://www.ibm.com/developerworks/mydeveloperworks/blogs/bobleah/resource/n_hub.jpg"></span>
</td>


- Function "transhIt(target, e)"은 Drag된 아이템이 휴지통에 Drop 될때 호출 됩니다.
Example Code는 아래 Link에서 Down받으실수 있습니다.
You can download the complete HTML of my d&d example by clicking here.

댓글 없음:

댓글 쓰기

블록체인 개요 및 오픈소스 동향

블록체인(block chain) 블록체인은 공공 거래장부이며 가상 화폐로 거래할때 발생할때 발생할 수 있는 해킹을 막는 기술. 분산 데이터베이스의 한 형태로, 지속적으로 성장하는 데이터 기록 리스트로서 분산 노드의 운영자에 의한 임의 조작이 불가...