检查可拖放对象是否在正确的可拖放容器中

我有一些可以拖放的项目。现在，在我放下Item之后，我想要检查我的对象是否在正确的容器中。

实现这一目标的最佳方法是什么?

这是我对它的函数:

$(function () {
    $("#draggable").draggable();
    $(".item").droppable({
        drop: function (event, ui) {
            var $this = $(this);
            $this.append(ui.draggable);
            var draggableWidth = $('#draggable').width();
            var draggableHeight = $('#draggable').height();
            var width = $this.width();
            var height = $this.height();
            var cntrLeft = (width / 2) - (ui.draggable.width() / 2);
            var cntrTop = (height / 2) - (ui.draggable.height() / 2);
            ui.draggable.animate({width: draggableWidth * 1.1, height: draggableHeight * 1.1});
            ui.draggable.animate({width: draggableWidth, height: draggableHeight});
            ui.draggable.css({
                left: cntrLeft + "px",
                top: cntrTop + "px"
            });
            // this here is still hard-coded, but it should trigger on the element I'm holding (image)
            console.log($('#draggable4').data('image'));
            console.log($(this).data('target'));
        }
    });
});

如果你看一下这个例子:JSFiddle你可以看到，我实际上卡住了什么。您可以移动方框中的黄色方块，但如果它是正确的，则没有反馈。

更明确一点:假设我有两个正方形，一个黄色的和一个红色的。如果把黄色的方块放到左边的方框上，它应该会显示一个错误。否则会出现一个滴答符号(不是那种问题)。红色的也一样。如果红色的放在右边的盒子里，它应该会抛出一个错误……你懂的。

<div class="item" data-target="1"></div>
<div class="item2" data-target="2"></div>
<div class="item3" data-target="3"></div>
<div class="item4" data-target="4"></div>
<div style="position: relative; height: 100%;">
    <img src="folie1/img1.png" width="153" height="124" id="draggable" style="z-index: 200;" data-image="1"/>
    <img src="folie1/img2.png" width="153" height="124" id="draggable2" style="z-index: 201;" data-image="2"/>
    <img src="folie1/img3.png" width="153" height="124" id="draggable3" style="z-index: 202;" data-image="3"/>
    <img src="folie1/img4.png" width="153" height="124" id="draggable4" style="z-index: 203;" data-image="4"/>
</div>

我想检查当前对象(假设data-image="1")是否被放置在容器data-target="1"中。

更新2

这是我现在的HTML:

<div class="item" id="item" data-target="1"></div>
<div class="item" id="item2" data-target="2"></div>
<div class="item" id="item3" data-target="3"></div>
<div class="item" id="item4" data-target="4"></div>
<div style="position: relative; height: 100%;">
    <img src="folie1/img1.png" width="153" height="124" id="draggable" class="draggable"
         style="z-index: 200;" data-image="1"/>
    <img src="folie1/img2.png" width="153" height="124" id="draggable2" class="draggable"
         style="z-index: 201;" data-image="2"/>
    <img src="folie1/img3.png" width="153" height="124" id="draggable3" class="draggable"
         style="z-index: 202;" data-image="3"/>
    <img src="folie1/img4.png" width="153" height="124" id="draggable4" class="draggable"
         style="z-index: 203;" data-image="4"/>
</div>

…来自Rajen Ranjith的JS

$(function () {
    var result = {};
    $(".draggable").draggable({
        start: function (e) {
            result.drag = e.target.id.split("_")[1];
        }
    });
    $(".item").droppable({
        drop: function (event, ui) {
            var $this = $(this);
            result.drop = event.target.id.split("_")[1];
            if (result.drag == result.drop)
                alert("true");
            else
                alert("false");
            $this.append(ui.draggable);
            var width = $this.width();
            var height = $this.height();
            var cntrLeft = (width / 2) - (ui.draggable.width() / 2);
            var cntrTop = (height / 2) - (ui.draggable.height() / 2);
            ui.draggable.css({
                left: cntrLeft + "px",
                top: cntrTop + "px"
            });
        }
    });
});

我可以拖放我的图像，但它总是提示"true"