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>
$(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\")\');
}
});
});
没有找到相关结果
已邀请:
1 个回复
才脊烽馈低
作为选项添加到可放置插件中：$(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\" }); });