Question

我有draggable / droppable的库存设置。它基本上是一个拼图，但是一个简单的拼图正确的区域。我有噼啪声和拼图碎片。但是，当我将第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"
            });
    });

Here's the jQuery Demo

jQuery Draggable / Droppable目标组件

1 个答案: