Question

代码链接在这里

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

    });
 });

当我将＃box2移到#target上时，我的addClass无效。

请帮帮我。

提前致谢。

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的工作方式，ID的优先级高于Classes，因此当你添加changecolor类时，它不会覆盖CSS。

您可以通过更改此内容来解决此问题：

.changecolor{
    border: 1px solid white;
}

到

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

<强> Here is a JSFiddle where it works

Answer 2

将important规则添加到您的样式中，因为为相同的边框定义了另一种样式 DIV。要优先考虑changeColor课程，您应该使用！important规则。

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

}

DEMO

为什么我的addClass不起作用？

2 个答案: