jQuery Draggable / Droppable定位组件

如何解决jQuery 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\")\');
                }
            });
        });

    

解决方法

将

accept: \"#selector\"

作为选项添加到可放置插件中：

$(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演示