问题描述
|
我有可拖动/可放置的股票设置。它基本上将是一个拼图,但是很容易,将正确的片段捕捉到正确的区域。我把啪啪啪的东西和拼图碎片放下来了。但是,当我将片段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演示