Почему мой addClass не работает?

Question

Ссылка Код здесь

http://jsfiddle.net/sagesony/ryG6Z/

$(document).ready(function(){ 
    $("#box").draggable({ revert:"invalid" }); 
    $("#box2").draggable({ revert:"invalid" }); 
    $("#target").droppable({ 
     accept: "#box2", 
     drop: function(event,ui) { 
     accept: "#box2", 
      $("#target").addClass("changecolor"); } 

    }); 
}); 

Мой addClass не работает, когда я двигаю # BOX2 над #target.

Пожалуйста, помогите мне.

Заранее спасибо.

Answer 1

У вас есть несколько проблем здесь:

$(document).ready(function(){ 
    $("#box").draggable({ revert:"invalid" }); 
    $("#box2").draggable({ revert:"invalid" }); 
    $("#target").droppable({ 
     accept: "#box2", 
     drop: function(event,ui) { 
      //accept: "#box2", <- This is wrong and won't run 
      $(event.target).addClass("changecolor"); 
     } 
    }); 
}); 

Снимите accept: "#box2",
Вы можете получить цель с помощью $(event.target) или $(this)

проблема CSS:
То, как CSS работает , Идентификаторы имеют более высокий приоритет, чем Классы, поэтому, когда вы добавляете класс changecolor, t переопределяет CSS.

Вы можете это исправить, изменив следующим образом:

.changecolor{ 
    border: 1px solid white; 
} 

в

#target.changecolor{ 
    border: 1px solid white; 
} 

Here is a JSFiddle where it works

Answer 2

Добавить important правило к вашему стилю, потому что есть еще стили, определенные для границы такой же div. Чтобы дать наивысший приоритет вашему классу changeColor, вы должны использовать важное правило.

.changecolor{ 
    border: 2px solid white !important; 

} 

DEMO