Question

我有几个div。有些人有阶级国家，有些有阶级国家。我希望带有eucountry的div作为类，当它在#EU的droppable中时变成绿色，当它在#not时变成红色。我希望与班级国家的div相反。

这是我的js代码

$(document).ready(function() {
    $(".eucountry").draggable();


    $("#EU").droppable({
        drop: function(event, ui) {

            $(ui.draggable).css("background-color", "green");
        }
    });

    $("#not").droppable({
        drop: function(event, ui) {

            $(ui.draggable).css("background-color", "red");
        }
    });
});

我尝试使用if语句：

if($("div").hasClass("eucountry){
    $(ui.draggable).css("background-color", "red"); 
}

但是它没有用。任何想法我怎么能解决这个问题？

Answer 1

如此接近，您只需在drop回调中使用if语句，例如：

$("#EU").droppable({
   drop: function(event, ui) {
       if( $(ui.draggable).hasClass("eucountry") ){
           $(ui.draggable).css("background-color", "green"); 
       } 

       if( $(ui.draggable).hasClass("country") ){
           $(ui.draggable).css("background-color", "red"); 
       } 
   }
});

$("#not").droppable({
   drop: function(event, ui) {
       if( $(ui.draggable).hasClass("eucountry") ){
           $(ui.draggable).css("background-color", "red"); 
       } 

       if( $(ui.draggable).hasClass("country") ){
           $(ui.draggable).css("background-color", "green"); 
       } 
   }
});

希望这有帮助。

Answer 2

如果您将drop实际附加到droppable中，则可以使用CSS声明：

$(document).ready(function() {
  $(".draggable").draggable();
  $(".droppable").droppable({
    drop: function(event, ui) {
      ui.draggable.css({
        top: 0,
        left: 0
      }).appendTo(this);
    }
  });
});

div {
  display: inline-block;
  vertical-align: top;
  margin: 5px;
}
.droppable {
  width: 100px;
  min-height: 100px;
  color: #fff;
  background-color: grey;
}
.draggable {
  width: 70px;
  height: 50px;
  background-color: dodgerblue;
}
#EU .eucountry {
  background-color: green;
}
#EU .country {
  background-color: red;
}
#not .eucountry {
  background-color: red;
}
#not .country {
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="draggable country">Country</div>
<div class="draggable eucountry">EU country</div>
<br>
<div id="EU" class="droppable">EU</div>
<div id="not" class="droppable">NOT</div>

多个可拖动的不同颜色取决于它所在的可丢弃

2 个答案: