3

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

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

有没有办法做到这一点？

4

1 回答 1

5

需要考虑的几个选项：

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

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

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

于 2012-11-30T11:18:59.443 回答