JQuery Draggable 도우미가 포함되어 있지 않습니다.

Question

다음 코드를 사용하여 draggable을 초기화하고 헬퍼를 사용하여 여유 효과를 만듭니다. 그러나 도우미를 사용하면 포함을 해제하고 드래그 할 수있는 요소를 컨테이너에서 나갈 수 있습니다. 헬퍼를 컨테이너에 어떻게 제한시킬 수 있습니까?

일부 추가 정보 : 요소는 왼쪽 및 위쪽 테두리 안에 포함되며 오른쪽 및 아래쪽 테두리는 포함되지 않습니다.

JSFiddle :

 $(".drag").draggable({ 
      containment: con_outer, 
      scroll: false, 
      helper: function(){ 
       return $('<div></div>').css('opacity',0); 
      }, 
      drag: function(event, ui){ 
       $(this).stop().animate({ 
        top: ui.helper.position().top, 
        left: ui.helper.position().left 
       },200,'easeOutCirc'); 
      }, 
      start: function() { 
       //Make the dragged item the top-most 
       zindex ++; 
       $(this).css("z-index",zindex); 
      } 
     }).each(function(index, value) { 
      var $this = $(this); 
      $this.click(function() { 
       //Click only registers if the object isn't being as dragged 
       if($this.is(".ui-draggable-dragging")) { 
        return; 
       } 
       clickPhoto(index); 
      }); 
     }); 

Answer 1

http://jsfiddle.net/qmkVR/12/는 아래의 코드를 사용하여 <div class="drag"></div>으로 도우미를 정의합니다.

helper: function(){ 
      return $('<div class="drag"></div>').css('opacity',0); 
    }, 

JS 바이올린

http://jsfiddle.net/qmkVR/13/