소스
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="generator" content="editplus" />
<meta name="author" content="김종현" />
<script type="text/javascript" src="jquery-1.7.1.js"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<style type="text/css">
#div1 {
width:100px;
height:100px;
background-color:yellow;
z-index:1;
}
#zone {
width:150px;
height:150px;
background-color:yellow;
position:absolute;
left:300px;
top:100px;
}
</style>
<script type="text/javascript">
//문서가 로드될떄..div1을 드래그할 수 있도록...
$(document).ready(
function () {
$("#div1").draggable();
//$("#div1").draggable({ axis:"x" } );
//$("#div1").draggable({ axis:"y" } );
$("#zone").droppable(
{
drop: function () {
alert("네모 안으로 쏙 들어왔군요~!");
}
}
);
}
)
</script>
</head>
<body>
<!-- Ex22_ui.htm -->
<!-- <div id="div1">하하하</div> -->
<img src="images/angry.png" id="div1" />
<div id="zone"></div>
</body>
</html>
결과
이미지를 마우스로 드래그해 네모안에 넣으면 다음과 같이 alert 창이 나온다.
