jQuery 可拖动 + 可放置 : how to snap dropped element to dropped-on element

Question

我将屏幕分为两个 DIV。在左侧的 DIV 中，我有一些 50x50 像素的 DIV，在右侧的 DIV 中，我有一个由 80x80 LI 组成的空网格 。左侧的 DIV 是可拖动的，一旦放到 LI 上，它们就会捕捉到该 LI 的中心。

听起来很简单，对吧？我只是不知道如何完成这件事。我尝试通过操作删除的 DIV 的 top 和 left CSS 属性来匹配 LI 它们的属性重新放入，但 left 和 top 属性是相对于左侧 DIV 的。

如何才能最好地将放置的元素捕捉到它所放置的元素的中心？这一定很简单，对吧？

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

编辑 2:对于其他遇到此问题的人，这就是我修复它的方法:

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

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

我不想让被拖放的元素再次可拖动，但如果你这样做，只需再次将可拖动元素绑定(bind)到它即可。

对我来说，此方法还解决了定位放置的元素(相对于左侧 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);
    }
});