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.

댓글 없음:

댓글 쓰기

ETL 솔루션 환경

ETL 솔루션 환경 하둡은 대용량 데이터를 값싸고 빠르게 분석할 수 있는 길을 만들어줬다. 통계분석 엔진인 “R”역시 하둡 못지 않게 관심을 받고 있다. 빅데이터 역시 데이터라는 점을 볼때 분산처리와 분석 그 이전에 데이터 품질 등 데이...