HTML5 마스터Q&A는 HTML CSS JavaScript 개발자들의 질문과 답변을 위한 커뮤니티 사이트입니다.

html5 드래그 앤 드롭, 드롭 영역 지정 질문..

0 추천
<!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;"> &nbsp;&nbsp;1층&nbsp;&nbsp; </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>&nbsp;입구</p>
 </div>
 <div class="draggable">
  <p>카운터</p>
 </div>
 <div class="draggable">
  <p>&nbsp;계단</p>
 </div> 
 <div class="draggable">
  <p>탈의실</p>
 </div>
 
</body>
</html>

현재 파란색 네모, 즉 입구 카운터 계단 탈의실을 왼쪽 하늘색 구역에만 드롭 가능하게 하고 싶은데 제가 코드를 수정하면

하늘색 공간 말고도 전체공간에 드롭이 될 수 있다거나, 아예 드래그가 안되게 되버린다거나 그렇게 됩니다..

하늘색 공간에만 저 파란색 네모들을 옮길 수 있게 가르쳐주세요~

익명사용자 님이 2014년 3월 10일 질문

답변 달기

· 글에 소스 코드 보기 좋게 넣는 법
· 질문에 대해 추가적인 질문이나 의견이 있으면 답변이 아니라 댓글로 달아주시기 바랍니다.
표시할 이름 (옵션):
개인정보: 당신의 이메일은 이 알림을 보내는데만 사용됩니다.
스팸 차단 검사:
스팸 검사를 다시 받지 않으려면 로그인하거나 혹은 가입 하세요.
...