jQuery UIのドラッグ可能なイベントが機能しない

Question

jQueryとjQuery UIを使用して一部のdivをドラッグ可能にしていますが、これは機能しています。

$(".bluebox").draggable({ 
    revert: true, 
    start: function() { 
    $("#bluebox").css("background-color", "#43c8d4"); 
    }, 
    drag: function() { 
    $("#bluebox").css("background-color", "green"); 
    } 
}); 

ただし、startイベントとdragイベントは、cssの実行を引き起こしていません。ここで

はフィドルです：https://jsfiddle.net/Lqop6ho6/

Answer 1

あなたのjQueryのセレクタが間違っています。 (updated example) -

あなたがターゲットにしようとしている要素はblueboxという名前のクラスではなく、IDを持っている、したがって、セレクタは$(".bluebox")いうより$("#bluebox")でなければなりません。

側の注意点として

---

に、あなたはそれがその要素を参照しますので、あなたがthisキーワードを使用することができます.draggable()方法、内.bluebox要素を再選択されているので：

$(".bluebox").draggable({ 
    revert: true, 
    start: function(){ 
    $(this).css("background-color", "#43c8d4"); 
    }, 
    drag: function(){ 
    $(this).css("background-color", "green"); 
    } 
}); 

また指して価値がありますstartコールバックは、dragメソッドのスタイリングの変更によってオーバーライドされるため、何の効果もありません。