2012-07-30 2 views
1

jquery UI를 사용하여 드래그 가능한 슬라이딩 도어의 효과를 만들려고합니다. HTML은 다음과 같습니다jQuery UI 제한적으로 드래그 가능

<div id ="home-elev-door" class="elev-door-wrap">   
     <div class="elev-door"></div> 
</div> 

내가 현재 가지고있는 코드는 이것이다 :

var elevWrap = $('.elev-door-wrap') 

$(function() { 
    $(".elev-door").draggable({ 
     cursor: 'pointer', 
     axis: 'x', 
     drag : function(event, ui) { ui.position.left = onDragElev(ui.position.left); }, 
     }); 
}); 

function onDragElev(left){ 
    if (left > 0) { left = 0; } 
    else if ((elevWrap.width()+left) < 27) { left = 27-elevWrap.width(); } 
    return left; 
} 

이 기본적으로 다시 왼쪽으로 문을 밀어 내게 활성화 방법으로 27px 제한을 설정한다 무엇을 부모 div 내에서 드래그 할 수 있습니다. 그러나, 내가 원하는 것은 한계를 오른편에만 맞추기 위해서입니다. 나는 '왼쪽'의 모든 인스턴스를 '오른쪽'으로 변경하려고 시도했지만 이것이 효과가없는 것 같습니다. 대신 양쪽 부모 div에서 바로 드래그합니다.

이 문제에 도움을 주시면 매우 감사하겠습니다. 미리 감사드립니다.

업데이트 : 나는 무슨 뜻인지 설명하는 데 도움이되는 js 바이올린 링크가 있습니다. 잘하면 도움이됩니다. http://jsfiddle.net/metallikat79/RCGDH/

답변

1

Sussed it out. 모든 것을 처리하는 데는 한 줄의 코드가 포함되어 있었고 좌표 배열을 제한으로 전달했습니다. http://jsfiddle.net/metallikat79/RCGDH/2/

: 여기
containment: [0, 0, 200, 0] 

은 JS 바이올린 내 업데이트 작업 예에 대한 링크입니다
관련 문제