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

Question

我有项目，我可以拖放它们。现在，在我放下 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你可以看到，我实际上坚持的是什么。您可以移动框中的黄色方 block ，但如果正确则没有反馈。

再澄清一点:假设我有 2 个正方形，一个黄色和一个红色。如果黄色方 block 落在左侧框上，则应显示错误。否则应该出现一个勾号(不是那种问题)。 红色的也一样。如果红色的落在正确的盒子里，它应该会抛出一个错误……你明白了。

更新 1:

我的 HTML

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

我可以拖放我的图像，但它总是提示“真”。

Answer 1

对拖动元素和放置元素都使用 id 或属性 http://jsfiddle.net/rajen_ranjith/F3sD3/285/

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

});