<style>
.box {
float: left;
width:200px;
height:50px;
padding: 20px;
margin: 30px;
text-align:center;
border: 3px solid gray;
}
</style>
<div class="box" ondragenter="dragenterHZ(event)" ondragleave="dragleaveHZ(event)" ondrop="dropHZ(event)" ondragover="dragoverHZ(event)">
<p ondragstart="dragstartHZ(event)" ondrag="dragHZ(event)" ondragend="dragendHZ(event)" draggable="true" id="hz">홈짱닷컴 Homzzang.com</p>
</div>
<div class="box" ondragenter="dragenterHZ(event)" ondragleave="dragleaveHZ(event)" ondrop="dropHZ(event)" ondragover="dragoverHZ(event)"></div>
<p style="clear:both;" id="demo"></p>
<script>
function dragstartHZ(event) {
event.dataTransfer.setData("Text", event.target.id);
document.getElementById("demo").innerHTML = "p요소 drag 시작";
}
function dragHZ(event) {
document.getElementById("demo").innerHTML = "p요소 drag 중";
}
function dragendHZ(event) {
document.getElementById("demo").innerHTML = "p요소 drag 완료";
}
function dragenterHZ(event) {
if ( event.target.className == "box" ) {
event.target.style.borderColor = "red";
document.getElementById("demo").innerHTML = "드롭박스 진입";
}
}
function dragoverHZ(event) {
event.preventDefault(); // 드롭 허용
}
function dragleaveHZ(event) {
if ( event.target.className == "box" ) {
event.target.style.borderColor = "";
document.getElementById("demo").innerHTML = "드롭박스 이탈";
}
}
function dropHZ(event) {
event.preventDefault();
var data = event.dataTransfer.getData("Text");
event.target.appendChild(document.getElementById(data));
document.getElementById("demo").innerHTML = "드롭 완료";
}
</script>
결과보기
