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

为了澄清一点：让我说我有2个正方形，一个黄色和一个红色。如果黄色方块放在左侧框中，则应显示错误。否则应出现刻度符号（不是那种问题）。红色也一样。如果红色的那个被丢弃在右侧框中，它应该抛出一个错误......你明白了。

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

我可以拖放我的图片，但它总是提醒＆＃34; true＆＃34;。

Answer 1

使用drag元素和drop元素的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"
        });
    }
});

}）;

Answer 2

我已经通过使用dropable div中的data-attribute解决了这个问题，如here所述。您可以使用jQuery（例如this）检查数据值。可以根据可拖动div上的data-attribute检查data-attribute。如果相等，则可能是正确的。

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

2 个答案: