複数のドロップ可能な異なる色でドラッグ可能

Question

私はいくつかのdivを持っています。いくつかのクラスeucountryといくつかのクラスの国と。 ＃euでドロップ可能になっているときはeucountryのクラスを緑色に、#nuでないときは赤にする必要があります。私はクラスの国とdivs反対を行うことができます。ここで

は、私が使用しようとした

$(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"); 
     } 
    }); 
}); 

私のJSコードでif文という。

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

が、それは私がこの問題を解決する方法はないworking.Anyのアイデアですか？

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

ドロップが実際にドロップ可能にアイテムを追加します場合は、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>