div의 'left'속성이 지정된 숫자를 초과하는 것을 허용하지 않으려면 어떻게해야합니까?

Question

this 작은 드래그 플러그인을 사용하여 div.container에서 div.slider를 가로 방향으로 드래그합니다. div.slider가 경계를 넘어 서기를 원하지 않습니다 (div.container를 종료하지 않으려 고합니다). 그래서 div.slider가 컨테이너 div.container의 가장 오른쪽에 도달하면 사용자가 더 이상 오른쪽으로 드래그하지 못하게하여 컨테이너 내부에 머물도록하고 싶습니다. 내가 MouseMove 이벤트에 "와 mouseUp"변경하면 그때는 못해 모든 픽셀 이동 확인 이후 당신도 드래그 할 수 있도록,

$(".slider").mouseup(function() { 
     var leftStyleValue = $('div.slider').css('left'); 
     $('.display_value').html(leftStyleValue); 

     if (parseInt($('.slider').css('left')) > 100) { 
      $('#completion').text("YOU DID IT!"); 
     } 
     else { 
      $(".slider").animate({left: 0 
      }, 500); 
     } 

    }); 

:

여기 내 jQuery의. 지금 당장 div.slider를 div.container 외부로 드래그 할 수 있으며 div.container에서 mouseup을 수행하지 않으므로 mousebutton을 놓아도 아무 것도하지 않습니다.

플러그인 코드를 보려면 위의 사이트로 이동하여 압축 된 플러그인 코드를 복사 한 다음 http://jsbeautifier.org/으로 이동하여 압축되지 않은 버전을 확인하십시오.

Answer 1

jQuery UI의 draggable은 containment 속성을 통해이를 지원합니다. 플러그인의 소스 코드를 수정하지 못하도록 체크 아웃 할 수 있습니다.

드래그 가능한 것 외에 다른 것이 필요하지 않은 경우 jQuery UI의 사용자 정의 다운로드 패키지를 수행 할 수 있습니다.

편집은 어떤 생각 후에, 나는 당신이 일부 수정하여 방법으로 그것을 만들 수 있습니다 같아요. 위치 어디 감지 이벤트를 MouseMove 이벤트하는

계산 최대 왼쪽 위치를 드래그의 시작 (및 기타 필요한 경우)

바인딩을 캡처

1. 바인드 .slider 요소의 mousedown 이벤트에 기능 : 당신은에 있습니다 요소가 지금 한계를 초과하는지 확인하십시오. 최대 왼쪽 위치로 CSS를 조정하십시오.

문제는 3 단계 안에 있습니다. 플러그인이 mousemove 이벤트에 바인딩되어 요소의 끊임없이 CSS를 실행하십시오. 두 개의 mousemove 함수가 다른 값으로 CSS를 편집하려고 할 때 깜박 거리거나 이상한 행동으로 변합니다. 이것이 플러그인 자체를 편집 할 것을 제안한 이유입니다.

$(".slider").mousedown(function() {  
    var $slider = $(this); 

    // Get maximum x-position. 
    // The max_x position is equal to the sliders width from the container's right side. 
    var max_x = $slider.parent().offset().left + $slider.parent().width() - $slider.width(); 

    // Track mouse position 
    $().mousemove(function(e) { 
     if(e.pageX > max_x) { 
      $slider.css({ 
       left: max_x 
      }); 
     } 
    }); 

    // Unbind events to $() to prevent multiple bindings 
    $().one('mouseup', function() { 
     $().unbind(); 
    }); 
}); 

주 플러그인의 소스 코드를 검사하지 않고, 나는이 작품을 보장 할 수 없습니다 :

은 어쨌든, 여기 어느 정도 수용 가능한 작업을해야 코드의 수정 된 버전입니다. 따라서 플러그인 내부에서이 동작을 구현하는 것이 현명한 방법입니다.

일반적으로 mousemove 및 mousedown 이벤트 후 브라우저 동작을 방지하는 것이 현명합니다. 그러나 플러그인 자체와 관련이 있는지 여부는 확실하지 않습니다.

이 함수는 올바른 경계 만 고려하므로 요소가 컨테이너의 다른면을 통과 할 수 있습니다. 하지만 필요한 경우 구현할 수있을 것입니다.