jquery拖放问题

Question

我的页面中有两个div，div1包含3个可放置图像(p1，p2，p3)，div2包含3个可拖动图像(g1，g2，g3):每个gi可以放置在任何pi上，它应该坚持可放置项目的左上角。如果它没有落在 pi 上，它应该返回到原来的位置。 gi 被放到一个 pi 上后，可以再次拖动并放到另一个 pi 上。然而，每个 droppable 一次只能保留一个 droggable。

我的代码是:

    <style>
        #div1, #div2 {
            position:relative;
            width:500px;
            height:500px;
            border:3px solid black;
        }
        .drag,.drop,.over {
        position:absolute;
        width:30px;
        height:30px;
        }
        .drop {
            border:1px solid green;
        }
        .over { 
            border:1px solid gray;
        }
    </style>

<script>
$(document).ready(function () {
   $(function() {
    $('.drag').draggable({
        cursor: 'move',
        helper:'clone'
    });
    $('.drop').droppable({
        over: function() {
            $(this).removeClass('.drop').addClass('over');
        },
        out: function() {
            $(this).removeClass('over').addClass('drop');
        },
        drop: function(ev, ui) {
            var dropped = ui.draggable;
            var droppedOn = $(this);
            if ($(this).children().length > 0) return false;//each droppable just keep one draggable
            $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);//stick to the left corner of droppable
            //$(this).append($(ui.draggable).clone());
            $(this).removeClass('over').addClass('drop');
        }
    });
   });
   $('body').append("<div id='div1'></div>");
   $('body').append("<div id='div2'></div>");
   $('#div1').append("<img id='p1'class='drop' style='width:50; height:50; top: 50px; left:50px;' src='images/1.jpg'></img>");
   $('#div1').append("<img id='p2'class='drop' style='width:50; height:50; top:250px; left:50px;' src='images/2.jpg'></img>");
   $('#div1').append("<img id='p3'class='drop' style='width:50; height:50; top:350px; left:50px;' src='images/3.jpg'></img>");

   $('#div2').append("<img id='g1'class='drag' style='width:50; height:50; top: 50px; left:50px;' src='images/11.jpg'></img>");
   $('#div2').append("<img id='g2'class='drag' style='width:50; height:50; top:250px; left:50px;' src='images/12.jpg'></img>");
   $('#div2').append("<img id='g3'class='drag' style='width:50; height:50; top:350px; left:50px;' src='images/13.jpg'></img>");
});

</script>

我的问题:当我将 gi 放在 pi 上时，gi 消失了(因此，我无法将其拖放到另一个项目上，它不会粘在相应 pi 的左角)。怎样才能防止它消失呢？并将其粘贴到可放置的物体上？

(如果我删除“$(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);”和“helper:clone”，gi在被删除后不会消失，但它可以自由移动。)

Answer 1

我刚刚通过转换解决了问题

 $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);

到

$(ui.draggable).detach().appendTo('#div1').css({top: $(this).position().top,left: $(this).position().left,width:30,height:30});

谢谢。