javascript - 如果条件不起作用，则 ondrop 检查条件

Question

我正在尝试在检查条件时放置一个拖动项 box2，在检查条件后，如果条件是truedrop 应该发生，但条件不起作用。我也试图在成功放置后加载另一个图像来代替拖动项。如何实现呢？

$(document).ready(function() {
  $(".box").click(function() {
    $(this).css('background-color', 'none');
    $(this).css('opacity', '0.0');
  });
});

$(function () {

	$(".box2").draggable({
		revert: "valid",
		drag: function (event, ui) {
			$("").html(");
		}
	});
	
	$(".box").droppable({
  
		var id = ui.draggable.attr("id");
		var id2 = ui.droppable.attr("id");

    	if(id % id2 === 10) {
                           
		drop: function (event, ui) {
			$(this).css("background-color", "lightgreen")
		},
		out: function (event, ui) {
			$(this).css("background-color", "")
    	)
		}
	});
});

.box {
    width: 30%;
    height:100px;
    display:inline-block;
    border-radius: 5px;
    border:1px solid black;
    border-radius: 10%;
    background-color: #006600;
}

.box002 {
        float: left;
        width: 50px;
        height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box" id="10">
    <div class="text">8.40</div>
</div>
<div class="box" id="20">
    <div class="text">12.25</div>
</div>

<div class="box2" id="2">
   <img src="https://picsum.photos/200/300"  draggable="true" id="1" style="width:200px; height:200px; border-radius: 50%;" border="rounded"/>
</div>

标签： javascript