jQuery Draggable + Droppable:如何将放置的元素捕捉到放置的元素 [英] jQuery draggable + droppable: how to snap dropped element to dropped-on element

问题描述

我将屏幕分为两个DIV.在左侧的DIV中，我有几个50x50像素DIV s，在右侧的DIV中，我有一个由80x80 LI s组成的空网格.左侧的DIV是可拖动的，一旦放到LI上，它们应对齐到该LI的中心.

I have my screen divided into two DIVs. In the left DIV I have a few 50x50 pixel DIVs, in the right DIV I have an empty grid made of 80x80 LIs. The DIVs on the left are draggable, and once dropped on a LI, they should snap to center of that LI.

听起来很简单，对吧?我只是不知道如何完成这项工作.我尝试通过处理放置的DIV的top和left CSS属性以匹配它们放入的LI的属性，但是left和top属性是相对于左侧的DIV.

Sounds simple, right? I just don't know how to get this done. I tried by manipulating the dropped DIV's top and left CSS properties to match those of the LI they're dropped into, but the left and top properties are relative to the left DIV.

我怎样才能最好地使放置的元素与放置在其中的元素的中心对齐?一定很简单，对吧?

How can I best have the dropped element snap to the center of the element it's dropped into? That's gotta be simple, right?

我正在将jQuery UI 1.7.2与jQuery 1.3.2结合使用.

I'm using jQuery UI 1.7.2 with jQuery 1.3.2.

对于其他有此问题的人，这是我解决的方法:

Edit 2: For whoever else has this problem, this is how I fixed it:

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

I used Keith's solution of removing the dragged element and placing it inside the dropped-on element in the drop callback of the droppable plugin:

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

我不希望放置的元素再次可拖动，但是，如果可以，只需将可拖动的元素再次绑定到它即可.

I don't the dropped element to be draggable again, but if you do, just bind draggable to it again.

对我来说，此方法还解决了放置放置的元素(相对于左侧的DIV)并在第二个DIV内部滚动时遇到的问题. (元素将在页面上保持固定，现在它们可以滚动).

For me this method also solved the problem I had when positioning the dropped elements (which would be relative to the left DIV) and scrolling inside the second DIV. (Elements would remain fixed on page, now they scroll along).

我确实使用了snap选项，以使其在拖动时看起来不错，因此感谢karim79的建议.

I did play with the snap options to make it look good while dragging, so thanks to karim79 for that suggestion.

我可能不会因此获得任何Awesome Code奖，因此，如果您有改进的余地，请分享！

I probably won't win any Awesome Code prizes with this, so if you see room for improvement, please share!

推荐答案

我有一个类似的问题-我通过从旧父级中手动删除拖动的元素并将其添加到放置的元素上来解决此问题.

I had a similar problem - I worked around it by manually removing the dragged element from its old parent and adding it to the dropped on element.

这篇关于jQuery Draggable + Droppable:如何将放置的元素捕捉到放置的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！