Jquery UI Draggable Snapping with margin

Question

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

为了获得一个布局精美的页面，我希望组件相互对齐。此时我正在使用 snap: true 属性，它将组件彼此相邻放置。但是，我想在它们折断后在组件之间留出一些空间。因此，它必须以 5 个像素的间隙捕捉到另一个组件，而不是捕捉到另一个组件的确切位置。

有什么办法吗？

Answer 1

需要考虑的几个选项：

• 用 2.5 像素的填充和透明背景将每个组件包装在一个封闭元素（例如 div）中，并使这些封闭元素成为可拖动的元素。因此，当封闭元素对齐在一起时，您当前的元素将看起来已经对齐，但彼此之间有 5 个像素的间隙

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

• 设置 'droppable' 元素以接受 'draggable' 组件，将它们布置以确保每个元素之间保留 5 个像素的间隙