<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=EUC-KR">
<title>Insert title here</title>
<script type="text/javascript" src="js/jquery-1.8.2.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>
<style type="text/css">
/*드롭 영역 정의*/
#boxA{
float:left; width:653px; height:373px; padding:10px; margin:205px 25px 25px 25px;
}
#boxA{background-color: skyblue;}
div.draggable {
float: left;
width: 100px;
height: 100px;
margin : 330px 0px 0px 0px;
padding: 6px 0px 0px 10px;
background: url(images/post.png) no-repeat;
}
div.invert {
background:url(images/post2.png) no-repeat;
}
p {
font-size: 12px;
padding : 0px 25px
}
</style>
<script type="text/javascript">
$(function(){
// 클래스가 draggable인 요소에 드래그 기본 함수를 적용한다.
$(".draggable").draggable({
// cursor옵션은 드래그 하는 동안 마우스 포인터의 모양을 변화시킴
cursor: "move",
// stack옵션은 드래그 대상이 되는 요소들을 자동으로 깊이 설정을 해줌
// 드래그 되는 요소가 가장 위에 올라온다
stack: ".draggable",
// 드래그 하는 동안 불투명도는 0.7
opacity: 0.7
});
// dragtest이벤트는 드래그가 시작하면 발생
$(".draggable").bind("dragstart",function(event, ui){
// invert 클래스가 적용되어 배경 이미지가 변경됨
$(this).addClass("invert");
});
// dragstop이벤트는 드래그가 멈추면 발생
$(".draggable").bind("dragstop", function(event, ui){
// invert 클래스가 제거되어 원래 배경이미지로 돌아감
$(this).removeClass("invert");
});
});
</script>
</head>
<body>
<table style="position:absolute; top:60px; left:500px" width='300' height='100'>
<tr bgcolor='#D2EAF0' align='center'>
<th width='300'> <span style="font-family:맑은 고딕; font-size:30px;"> 매장 맵 그리기 </span></th>
</tr>
</table>
<table style="position:absolute; top:170px; left:30px" width='90' height='40' border='2' bordercolor='black'>
<tr bgcolor='#CCFF33' align='center'>
<th width='300'> <span style="font-family:맑은 고딕; font-size:15px;"> 1층 </span></th>
</tr>
</table>
<table style="position:absolute; top:210px; left:30px" width='680' height='400' border='2' bordercolor='black'>
<div id="boxA" ondragenter="return false;" ondragover="return true;"></div>
</table>
<table style="position:absolute; top:280px; left:730px" width='100' height='50'>
<tr bgcolor='#D2EAF0' align='center'>
<th width='300'> <span style="font-family:맑은 고딕; font-size:12px;"> 위치 지정 </span></th>
</tr>
</table>
<div class="draggable">
<p> 입구</p>
</div>
<div class="draggable">
<p>카운터</p>
</div>
<div class="draggable">
<p> 계단</p>
</div>
<div class="draggable">
<p>탈의실</p>
</div>
</body>
</html>
현재 파란색 네모, 즉 입구 카운터 계단 탈의실을 왼쪽 하늘색 구역에만 드롭 가능하게 하고 싶은데 제가 코드를 수정하면
하늘색 공간 말고도 전체공간에 드롭이 될 수 있다거나, 아예 드래그가 안되게 되버린다거나 그렇게 됩니다..
하늘색 공간에만 저 파란색 네모들을 옮길 수 있게 가르쳐주세요~
