jQuery UI带有边距的可拖动捕捉 [英] Jquery UI Draggable Snapping with margin

问题描述

我正在开发一个项目，用户可以在该项目中自定义自己的仪表板页面.这意味着他们可以将组件拖动到页面上并根据需要放置它们.

I'm working on a project where users can customize their own dashboard page. This means they can drag components onto the page and position them as they like.

要获得一个漂亮的布局页面，我希望组件能够相互对齐.目前，我正在使用snap:true属性，它将把组件彼此紧挨着放置.但是，我想在它们折断之后在组件之间留一些空间.因此，与其捕捉到另一个组件的确切位置，不如捕捉到另一个像素间隔为5个像素.

To get a nicely layout page I want the components to snap to each other. At this moment I'm using the snap: true property, which will place the components right next to each other. However, I'd like to have some space in between the components after they snapped. So instead of snapping to the exact position of the other component, it must snap to the other component with a 5 pixel gap.

有什么办法吗?

推荐答案

要考虑的一些选项:

• 将每个组件包装在具有2.5像素填充和透明背景的封闭元素(例如div)中，并使这些封闭元素成为可拖动的元素.因此，当封闭的元素对齐在一起时，您当前的元素似乎已经对齐在一起，但彼此之间有5像素的间距

• Wrap each component in an enclosing element (e.g. div) with a padding of 2.5 pixels and a transparent background and make these enclosing elements the draggable ones. Thus when the enclosing elements snap together, your current elements will appear to have snapped together but with a 5 pixel gap to each other

在可拖动项目上订阅停止"事件，并在捕捉完成后使用它来将它们手动重新定位到5像素间距

Subscribe to the 'stop' event on the draggable items and use it to manually reposition them to a 5 pixel gap after the snapping has finished

设置可放置"元素以接受可拖动"组件，并对其进行布局以确保每个组件之间保留5像素的间距.

Set up 'droppable' elements to accept the 'draggable' components, laying them out to ensure that a 5 pixel gap is retained between each

这篇关于jQuery UI带有边距的可拖动捕捉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！