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類，出於某種原因，類正在被添加，但它不想更改滑塊球的X位置，除非我在類中使用'transformX'而不是'left'。