JQuery перетащить вопрос

Question

У меня есть два div на моей странице, div1 содержит 3 сбрасываемых изображения (p1, p2, p3) и div2 содержит 3 перетаскиваемых изображения (g1, g2, g3): каждый ги может быть сброшен на любом пи, он должен придерживатьсяверхний левый угол предмета.Если он не упал на пи, он должен вернуться в исходное положение.После сброса на пи ги можно снова перетащить и сбросить на другой пи.Тем не менее, каждый сбрасываемый может хранить только один сбрасываемый за раз.

Мой код:

    <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>

Моя проблема: когда я бросаю ги на пи, ги исчезает (ипоэтому я не могу перетащить его на другой элемент, он не прилипает к левому углу соответствующего пи).Как я могу предотвратить его исчезновение?И прикрепить его к объекту сброса?

(Если я удаляю «$ (drop) .detach (). Css ({top: 0, left: 0}). AppendTo (dropOn);» и «helper:клон », 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});

Спасибо.