개발자의 길

[jquery] draggable 예제..가운데를 기준으로 움직이도록 본문

2. JS

[jquery] draggable 예제..가운데를 기준으로 움직이도록

자르르 2011. 11. 4. 13:51



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
 </HEAD>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.5.custom.min.js"></script>
 <style type="text/css">
    #draggable { width: 100px; height: 70px; background: silver; }
  </style>
  <script type="text/javascript">
  $(document).ready(function(){
    $("#draggable").draggable({
  axis:"x",
  containment:"#test",
  //revert:true,
  //revertDuration:100,
  stop:function(e){
   var pleft=$(this).css("left").replace("px","");
   //if(e.pageX>120) alert('1');
   //alert(e.pageY+":"+e.pageX);

   if(pleft==400){
    alert('오른쪽딱');
   }else if(pleft==0){
    alert('왼쪽딱');
   }else{
    if(pleft>200){
     $(this).animate({
      left:400,
      duration:1000
     },function(){
      alert('오른쪽딱');
     });
    
    }else{
     $(this).animate({
      left:0,
      duration:1000
     },function(){
      alert('왼쪽딱');
     });
    }
   }
  }
 });
  });
  </script>


 <BODY>
 <div id="test" style="width:500px;">
<div id="">Drag me</div>  <div id="">Drag me</div><div id="draggable">Drag me</div><div id="">Drag me</div><div id="">Drag me</div>
<div id="">Drag me</div>
<div id="">Drag me</div>
<div id="">Drag me</div>
</div>

 </BODY>
</HTML>

저작자표시

'2. JS' 카테고리의 다른 글

[jquery]165가지의 jQuery Slider, Slideshow and jQuery Carousel Effects  (0) 2011.11.17
[jquery] 설명  (0) 2011.11.09
[자바스크립트](Ajax) 서버 시간 가져오기  (0) 2011.09.08
[jquery]jQuery 빠른 처리를 위한 CSS 셀렉터 사용팁  (0) 2011.08.29
[자바스크립트] 이벤트 적용 및 발생  (0) 2011.07.29


이 포스팅은 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.
공유하기 링크
'2. JS' Related Articles more
Comments