6

packery と draggabilly を使用して並べ替え可能なアイテムのグリッドを作成しようとすると、問題が発生します。

jquery ui dragabble も試しましたが、問題は残ります。アイテムをドラッグ アンド ドロップすると、垂直方向の配置が崩れて、アイテムが行の途中で「スナップ」する可能性があります。これにより、アイテムの順序も崩れます。

http://jsfiddle.net/foobass/sasrx654/

項目を水平方向にドラッグすると、所定の位置にスナップされ、適切に整列されます。垂直方向にドラッグすると、配置がずれて正しく配置されません。また、最後のアイテムの位置が変更されます。

誰かが私が間違っているかもしれないことを提案できますか?

   var container = document.querySelector('#container');

   var packery = new Packery(container, {
        rowHeight: '.module-sizer',
        itemSelector: '.module',
        columnWidth: '.module-sizer',
        isInitLayout: true,
        isResizeBound: true
   });

何らかの理由で、ドロップされたアイテムの「トップ」の css 値とその下のアイテムが正しくない値で動的に設定されているようです。

4

1 に答える 1

1

遅いことはわかっていますが、私はこの問題を自分で探していたので、誰かがこれを必要とするかもしれません.

Packery のレイアウト システムは、Packery が垂直方向のドラッグで動作するのに必要な方法で機能しないため、回避策が必要です。このように、「dragItemPositioned」でパッカリーを再レイアウトするために、垂直方向の配置の問題を回避することができました。

packery.on( 'dragItemPositioned', function( event, draggedItem ) {
    app.tiles.settings.packeryEl.packery();
});
于 2015-09-11T08:47:42.100 に答える