Draggable | Jquery UI. 드래그 이벤트에 클래스를 추가하는 방법

Question

사용자가 슬라이더 볼을 드래그하도록 슬라이더를 만들려고하고 볼을 드래그하면 포함 요소의 끝으로 스냅하고 콜백 함수가 발생합니다 (IOS를 7 슬라이더를 드래그하여 화면 잠금을 해제 할 때 슬라이더와 화면 잠금을 드래그하십시오. 이 작업을 수행하는 가장 간단한 방법은 슬라이더 볼의 x 축을 해당 컨테이너의 끝으로 업데이트하는 클래스를 추가하는 것입니다.

그래서 나는 관련 봉쇄 요소와 축과 드래그로 요소를 설정하고 그 용기에 따라 완벽하게 드래그.

sliderBall.draggable({ 
      containment: $('div.slider-line'), 
      axis: "x" 
      }); 

가 그럼 난 그렇게처럼 '드래그'이벤트 'addClass를'바인딩 것처럼 간단 할 것이라고 생각 : 이상한 것은이 선택이 개체로 인식되고있는 것을

sliderBall.on('drag',function() { 
    $(this).addClass('slider-toggle'); 
}); 

및 DOM 요소가 아닌가?

아무도 도와 줄 수 있습니까?

당신은이 코드를 사용할 수 있습니다

Answer 1

:

HTML

<div class="sliderBall" data-count="1">drag me!</div> 
<div id="divDrop"></div> 

JS

$(".sliderBall").draggable(); 

$("#divDrop").droppable({ 
    drop: function(event, ui) {  
    ui.draggable.addClass("dropped") 
    } 
}); 

Online demo (jsfiddle)

Answer 2

을

나는 문제를 해결했으나 다른 사람이 같은 문제를 가지고있는 경우 질문을 남기기로 결정했다. 문제는 제가 추가 한 CSS 클래스였습니다. 어떤 이유로 클래스가 추가되고 있었지만 'left'와 반대되는 클래스에서 'transformX'를 사용하지 않으면 슬라이더 볼의 X 위치를 변경하고 싶지 않았습니다.