3

ユーザーが自分のダッシュボード ページをカスタマイズできるプロジェクトに取り組んでいます。これは、コンポーネントをページにドラッグして、好きなように配置できることを意味します。

見栄えの良いレイアウト ページを取得するには、コンポーネントを互いにスナップさせたいと考えています。現時点では、コンポーネントを隣り合わせに配置する snap: true プロパティを使用しています。ただし、コンポーネントがスナップされた後、コンポーネント間にある程度のスペースが必要です。したがって、他のコンポーネントの正確な位置にスナップするのではなく、5 ピクセルのギャップで他のコンポーネントにスナップする必要があります。

これを行う方法はありますか？

4

1 に答える 1

5

考えるべきいくつかのオプション：

  • 2.5ピクセルのパディングと透明な背景を使用して、各コンポーネントを囲んでいる要素（divなど）でラップし、これらの囲んでいる要素をドラッグ可能な要素にします。したがって、囲んでいる要素がスナップすると、現在の要素はスナップしているように見えますが、互いに5ピクセルのギャップがあります。

  • ドラッグ可能なアイテムの「停止」イベントをサブスクライブし、スナップが終了した後、それを使用して5ピクセルのギャップに手動で再配置します

  • 'droppable'要素を設定して、'draggable'コンポーネントを受け入れ、それぞれの間に5ピクセルのギャップが保持されるようにレイアウトします。

于 2012-11-30T11:18:59.443 に答える