jQuery draggable + droppable:如何将drop元素捕捉到drop-on元素

Question

我的屏幕分为两个DIV.在左边DIV我有几个50x50像素DIVs,在右边DIV我有一个80x80 LI秒的空网格.DIV左边的s是可拖动的,一旦落在a上LI,它们应该对齐到中心LI.

听起来很简单吧？我只是不知道如何完成这件事.我尝试通过操纵已删除DIV的top和leftCSS属性来匹配LI它们被放入的属性,但是left和top属性是相对于左边的DIV.

我怎样才能最好地将掉落的元素捕捉到它所放入的元素的中心？这一定很简单吧？

编辑:我正在使用jQuery UI 1.7.2和jQuery 1.3.2.

编辑2:对于其他有这个问题的人,这是我修复它的方法:

我使用Keith的解决方案来删除拖动的元素并将其放置drop在droppable插件的回调中的drop-on元素中:

function gallerySnap(droppedOn, droppedElement)
{
    $(droppedOn).html('<div class="drop_styles">'+$(droppedElement).html()+'</div>' );
    $(droppedElement).remove();
}

我不会将被删除的元素再次拖动,但如果你这样做,只需将draggable再绑定到它.

对我来说,这个方法也解决了我在定位掉落的元素(相对于左边DIV)和在第二个内部滚动时遇到的问题DIV.(元素将保持固定在页面上,现在它们滚动).

我确实玩了快照选项,使其在拖动时看起来很好,所以感谢karim79的建议.

我可能不会用这个赢得任何Awesome Code奖品,所以如果你看到改进的空间,请分享!

Answer 1

我发现基思的方法适合我.由于他的答案不包括示例实现,我将发布我的:

$('.dropTarget').droppable({
    drop: function(ev, ui) {
        var dropped = ui.draggable;
        var droppedOn = $(this);
        $(dropped).detach().css({top: 0,left: 0}).appendTo(droppedOn);
    }
});

或者,更简洁:

$('.dropTarget').droppable({
    drop: function(ev, ui) {
        $(ui.draggable).detach().css({top: 0,left: 0}).appendTo(this);
    }
});

Answer 2

我有一个类似的问题 - 我通过手动从其旧父母中删除拖动的元素并将其添加到drop on元素来解决它.

Answer 3

感谢您的帖子 - 它帮助我朝着正确的方向前进.我发现设置可拖动对象的位置属性而不是弄乱HTML代码有点干净.这droppable会将位置设置为对象的左上角,但您也可以进行修改以使其居中.

drop: function(event, ui) {
   $(ui.draggable).css('top', $(this).position().top);
   $(ui.draggable).css('left', $(this).position().left);
}