多個可拖動的不同顏色，取決於它在哪個可放置

Question

我有幾個div。一些有類似的國家和一些國家。我希望帶有eucountry的div可以在#EU投入時變成綠色，而在＃不需要時投入紅色。我希望與階級國家的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"); 
} 

，但我怎麼能解決這個問題，它不是working.Any想法？

Answer 1

這麼近，你剛纔使用if語句裏面drop回調，例如：

$("#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

如果您的下降實際上追加物品進入投擲的，你可以使用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>