jQuery UI draggable events не работает

Question

Я использую jQuery и jQuery UI, чтобы сделать некоторые divs перетаскиваемыми, и это работает.

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

Однако события запуска и перетаскивания не приводят к запуску css.

Вот скрипка: https://jsfiddle.net/Lqop6ho6/

Answer 1

Ваш JQuery селекторы неправильно.

элемент вы пытаетесь предназначаться имеет класс с именем bluebox, а не идентификатор, поэтому селектор должен быть $(".bluebox"), а не $("#bluebox") - (updated example).

---

В качестве примечания, так как вы повторно выбрать .bluebox элемент в методе .draggable(), вы можете использовать this ключевое слово, так как он будет ссылаться на этот элемент:

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

Также стоит отметить что обратный вызов start не будет иметь никакого эффекта, так как он будет переопределен с помощью изменений стиля моделирования drag.