jQuery draggable droppable:如何将drop元素snap到drop-on元素

前端之家收集整理的这篇文章主要介绍了jQuery draggable droppable:如何将drop元素snap到drop-on元素前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有我的屏幕分为两个DIV。在左侧DIV我有几个50×50像素DIV,在右侧DIV我有一个由80×80 LIs制成的空网格。左侧的DIV是可拖动的,并且一旦被放置在LI上,它们应该捕捉到该LI的中心。

听起来很简单,对吧?我只是不知道如何做到这一点。我试图通过操纵下降的DIV的顶部和左侧的CSS属性,以匹配那些L1他们被放入,但左侧和顶部的属性是相对于左侧的DIV。

我如何最好将丢弃的元素捕捉到它掉入的元素的中心?这必须简单,对吧?

编辑:我使用jQuery UI 1.7.2与jQuery 1.3.2。

编辑2:对于谁有这个问题,这是我如何修复它:

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

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

我没有被drop的元素可以再次拖动,但如果你这样做,只是绑定draggable它。

对我来说,这个方法解决了定位放置的元素(这将是相对于左DIV)和滚动在第二个DIV内部的问题。 (元素将保持固定在页面上,现在他们滚动)。

我没有玩的选项,使它看起来不错,拖动,所以感谢karim79的建议。

我可能不会赢得任何Awesome Code奖品与这,所以如果你看到改进的余地,请分享

解决方法

我有一个类似的问题 – 我通过手动删除拖动的元素从旧的父,并将其添加到放置的元素。

猜你在找的jQuery相关文章