왼쪽 select 박스와 오른쪽 select 박스의 option들을 서로 이동 시키기
2012.09.10 -> 현재 fire fox에서만 drag & drop이 가능하다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
/* 2012.09.10 현재 fire fox에서만 실행 가능하다. */
function onDragStart(event) {
document.getElementById("msg").innerHTML += "<br/>onDragStart->";
// 드래그 대상 요소(event.target.tagName)가 option일 경우에만 가능토록 한다.
// 드래그 대상 요소를 소문자로 바꿔서 option인지 아닌 지 비교 하였다.
if (event.target.tagName.toLowerCase() == "option") {
// dataTransfer 가 객체에 이동할 요소의 id를 "selectOption"이라는 이름으로 등록한다.
// event.target.id -> option태그 안의 select 태그의 id값
//alert(event.target.id);
event.dataTransfer.setData("selectOption", event.target.id);
} else {
// 만일 드래그 대상 요소가 option이 아닐 경우 취소한다.
event.preventDefault();
}
}
function onDragEnter(event) {
document.getElementById("msg").innerHTML += "onDragEnter->";
// 드래그 대상에 selectOption일 경우에만 드롭 가능하도록 설정한다.
var types = event.dataTransfer.types;
for (var i=0; i<types.length; i++) {
if (types[i] == "selectOption") {
event.preventDefault();
return;
}
}
}
function onDragOver(event) {
// 특별히 하는 일은 없다.
document.getElementById("msg").innerHTML += "onDragOver->";
// 드롭이 가능하도록 기본 상태를 취소한다.
event.preventDefault();
}
function onDrop(event) {
document.getElementById("msg").innerHTML += "onDrop";
// dataTransfer 객체로부터 데이터를 꺼내온다.
var id = event.dataTransfer.getData("selectOption");
// 현재 문서 객체에서 해당 요소를 가져온다.
var optionElement = document.getElementById(id);
// 데이터가 존재하고 드래그 이상과 드롭 대상이 같지 않을 경우 실행한다.
// optionElement가 null이 아니거나 현재 타겟과 같지 않다면 다음 구문을 실행한다.
if (optionElement && optionElement.parentNode != event.currentTarget) {
// 드래그 대상에서 이동할 데이터 삭제
optionElement.parentNode.removeChild(optionElement);
// 드롭 대상에 데이터 추가
event.currentTarget.appendChild(optionElement);
}
// 드롭 완료 후 이벤트 버블링을 막기 위해 호출한다.
event.stopPropagation();
}
</script>
</head>
<body>
<!-- 드래그 대상 요소 -->
<select size="4" id="select1" ondragenter="onDragEnter(event)" ondragover="onDragOver(event)" ondrop="onDrop(event)" ondragstart="onDragStart(event)">
<option id="option1_1" draggable="true">옵션1</option>
<option id="option1_2" draggable="true">옵션2</option>
<option id="option1_3" draggable="true">옵션3</option>
</select>
<!-- 드롭 대상 요소 -->
<select size="4" id="select2" ondragenter="onDragEnter(event)" ondragover="onDragOver(event)" ondrop="onDrop(event)" ondragstart="onDragStart(event)">
<option id="option2_1" draggable="true">옵션2_1</option>
<option id="option2_2" draggable="true">옵션2_2</option>
<option id="option2_3" draggable="true">옵션2_3</option>
</select>
<br/><br/>
<div id="msg"></div>
</body>
</html>
'Study > HTML5,CSS,JQuery' 카테고리의 다른 글
| [HTML5/CSS3/JQUERY] message event (0) | 2019.05.22 |
|---|---|
| [HTML5/CSS3/JQUERY] 현재 시간을 가져와 이미지 시계 나타내기 (0) | 2019.05.22 |
| [HTML5/CSS3/JQUERY] audio와 video 예제 (0) | 2019.05.21 |
| [HTML5/CSS3/JQUERY] canvas (0) | 2019.05.21 |
| [HTML5/CSS3/JQUERY] HTML5에서 새로 지원하는 폼태그 경험하기 (0) | 2019.05.21 |
