jQuery Draggable / Droppable 定位组件

Question

我有一个可拖动/可放置的库存设置。它基本上是一个拼图，但是是一个简单的拼图，正确的碎片会卡在正确的区域。我把折断和拼图碎片都放下来了。然而，当我将片段 1 拖到位置 2 上时，它并没有显示为无效。如何区分目标区域？

HTML：

<div id="drag">
    <div id="piece-drag">
        <div id="piece1">
            <img src="anim/hoffmann3-anklebridge/pin 1.png" />
        </div>
        <div id="piece2">
            <img src="anim/hoffmann3-anklebridge/pin 2.png" />
        </div>
    </div>
    <div id="place-drop" style="background:url(puzzleshape.png) no-repeat;">
        <div id="piece1drop" style="width:103px; height:36px; position:absolute; z-index:50; top:346px; left:241px;"></div>
        <div id="piece2drop" style="width:103px; height:36px; position:absolute; z-index:50; top:333px; left:228px;"></div>
    </div>
</div>

JQuery：

$(function(){
            $("#piece1").draggable({ revert: "invalid" });
            $("#piece1drop").droppable({
                drop: function() { 
                    $('#piece1').hide();
                    $('#piece1drop').css('background-image', 'url("piece1placed.png")');
                }
            });
            $("#piece2").draggable({ revert: "invalid" });
            $("#piece2drop").droppable({
                drop: function() { 
                    $('#piece2').hide();
                    $('#pin2drop').css('background-image', 'url("piece2placed.png")');
                }
            });
        });

Answer 1

添加 accept: "#selector" 作为 droppable 插件的选项：

$(function(){
            $("#piece1").draggable({ revert: "invalid" });
            $("#piece1drop").droppable({
                drop: function() { 
                    $('#piece1').hide();
                    $('#piece1drop').css('background-image', 'url("piece1placed.png")');
                },
                accept: "#piece1"
            });
            $("#piece2").draggable({ revert: "invalid" });
            $("#piece2drop").droppable({
                drop: function() { 
                    $('#piece2').hide();
                    $('#pin2drop').css('background-image', 'url("piece2placed.png")');
                },
                accept: "#piece2"
            });
    });

这是 jQuery 演示