728x90
반응형
<!-- src/main/webapp/20220401/mouseex3.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>마우스로 이미지 옮기기</title>
<style type="text/css">
.droptarget {
float : left;
min-width : 400px;
min-height: 35px;
margin : 15px;
padding : 10px;
border : 1px solid #aaaaaa;
overflow : auto; } /* 스크롤바 자동 생성*/
</style>
</head>
<body>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
<img src="icon01.png" ondragstart="dragStart(event)"
ondragend="dragEnd(event)"
draggable="true" id="dragtarget1">
<img src="icon01.png" ondragstart="dragStart(event)"
ondragend="dragEnd(event)"
draggable="true" id="dragtarget2">
<p ondragstart="dragStart(event)" ondragend="dragEnd(event)"
draggable="true" id="dragtarget3"> 이동해 주세요</p>
<h ondragstart="dragStart(event)" ondragend="dragEnd(event)"
draggable="true" id="dragtarget4"> 이동해 주세요</h>
</div>
<div class="droptarget" ondrop="drop(event)" ondragover="allowDrop(event)">
</div>
<p id="demo1"></p>
<p id="demo2"></p>
<script type="text/javascript">
function dragStart(event) { //event : drag 이벤트 객체
//event.target : 이벤ㅌ트 대상이 되는 객체
//Text 이름으로 event.target 객체의 id를 저장.
event.dataTransfer.setData("Text",event.target.id);
//getElementById : 문서중 id=demo1인 태그 선택
//document.querySelector('#demo1') 같은 의미
//innerHTML : 내부에 html 문장 저장
document.getElementById("demo1").innerHTML = "이동시작합니다."
}
function dragEnd(event) {
document.getElementById("demo1").innerHTML = "이동 하였습니다."
}
function allowDrop(event) {
event.preventDefault(); //기본적으로 설정된 이벤트를 취소. (ex:드레그선택)
document.getElementById("demo2").innerHTML = "drag over 시작입니다."
}
function drop(event) {
event.preventDefault(); //기본적으로 설정된 이벤트를 취소.
var data = event.dataTransfer.getData("Text") //이동할객체의 id값
//event.target : 이벤트가 발생된 객체 div 태그
//appendChild : 선택된 태그를 div태그의 하위태그로 추가
event.target.appendChild(document.getElementById(data));
document.getElementById("demo2").innerHTML = "drag drop 입니다."
}
</script>
</body>
</html>
728x90
반응형