Question

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

我的代码是：

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

我的问题：当我在一个pi上放一个gi时，gi就消失了（因此，我不能将它拖放到另一个项目上，它不会粘在相应pi的左下角）。我怎样才能防止它消失？并把它贴在可放置的物体上？

（如果我删除“$（已删除）.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});

感谢。

jquery拖放问题

1 个答案: