ドラッグ可能| 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位置を変更したくありませんでした。