<!DOCTYPE HTML>
<HTML>
<HEAD>
<TITLE> 드래그 & 드랍 예제 </TITLE>
<style type = "text/css">
#target1, #target2, #target3
{
float: left; width: 250px; height: 250px;
padding: 10px; margin: 10px;
}
#draggable1, #draggable2, #draggable3
{
width: 75px; height: 70px; padding: 5px;
margin: 5px;
}
#target1 {background-color: cyan;}
#target2 {background-color: cyan;}
#target3 {background-color: cyan;}
#draggable1 {background-color: orange;}
#draggable2 {background-color: orange;}
#draggable3 {background-color: orange;}
</style>
< type = "text/">
function start(e)
{
e.dataTransfer.effectAllowed = \'move\';
e.dataTransfer.setData("Data", e.target.getAttribute(\'id\'));
e.dataTransfer.setDragImage(e.target,0,0);
return true;
}
function enter(e)
{
return true;
}
function over(e)
{
var iddraggable = e.dataTransfer.getData("Data");
var id = e.target.getAttribute(\'id\');
if(id == \'target1\')
return false;
if(id == \'target2\' && iddraggable == \'draggable3\')
return false;
else if((id == \'target3\') && (iddraggable == \'draggable1\' || iddraggable == \'draggable2\'))
return false;
else
return true;
}
function drop(e)
{
var iddraggable = e.dataTransfer.getData("Data");
e.target.appendChild(document.getElementById(iddraggable));
e.stopPropagation();
return false;
}
function end(e)
{
e.dataTransfer.clearData("Data");
return true;
}
</>
</HEAD>
<BODY>
<h1>Drag and Drop Ex</h1>
ondragenter = "return enter(event)"
ondragover = "return over(event)"
ondrop = "return drop(event)">
<div id = "draggable1" draggable = "true"
ondragstart = "return start(event)"
ondragend = "return end(event)">1
</div>
<div id = "draggable2" draggable = "true"
ondragstart = "return start(event)"
ondragend = "return end(event)">2
</div>
<div id = "draggable3" draggable = "true"
ondragstart = "return start(event)"
ondragend = "return end(event)">3
</div>
</div>
ondragenter = "return enter(event)"
ondragover = "return over(event)"
ondrop = "return drop(event)">
</div>
ondragenter = "return enter(event)"
ondragover = "return over(event)"
ondrop = "return drop(event)">
</div>
</BODY>
</HTML>
과연 그대로 나올 것인가 ㅡㅡ;;;
댓글 영역
획득법
① NFT 발행
작성한 게시물을 NFT로 발행하면 일주일 동안 사용할 수 있습니다. (최초 1회)
② NFT 구매
다른 이용자의 NFT를 구매하면 한 달 동안 사용할 수 있습니다. (구매 시마다 갱신)
사용법
디시콘에서지갑연결시 바로 사용 가능합니다.