1

アイテムのグリッドがあるページがあります。これらの各項目は、4 つの div のいずれかにドラッグして、その div に追加できます。これは、ドラッグ可能/ドロップ可能な jQuery および JQuery UI を使用して行われます。

最初の同位体アイテムは、任意の div にドラッグできます。ただし、2 番目と 3 番目の同位体アイテムは最初のドロップ可能な div を認識しませんが、2 番目のドロップ可能な div にドラッグすると、最初のドロップ可能な div に追加されます。

4 番目と 5 番目のドラッグ可能なアイテム (アイソトープ) は、1 番目または 2 番目のドロップ可能な div を認識しませんが、3 番目のドロップ可能なアイテムにドラッグすると、2 番目のドロップ可能なアイテムに追加されます。

そのため、どういうわけか、アイテムがどこにドロップされているかについて、ドロッパブルが混乱しています。

次のコードをコメント アウトすると、ドラッグ アンド ドロップが正しく機能します。このコードがドロップ可能な領域に影響を与える理由についてのアイデアはありますか??

jQuery('div.container').isotope({
 itemSelector: 'div.sub-item',
 resizesContainer : false,
 layoutMode : 'fitColumns',
 getSortData :{
   fitOrder : 関数 ($item){
    変数の順序、
       インデックス = $item.index();
       if($item.hasClass('sub-item-big') && index % 2) {
            注文 = インデックス +1.5;
            } そうしないと {
            注文 = インデックス;
            }
        返品注文;
       }
   }、
 sortBy : 'fitOrder'
});

- - - - - - - - アップデート - - - - - - - - -

これをもう少しいじった後、ドラッグの開始時に同位体を「破壊」することを追加することにしました。

  jQuery('div.sub-item').draggable({
         ヘルパー: 関数(){
                jQuery('div.container').isotope('destroy');
                return jQuery(this).clone().appendTo('body');
          }
    }))

この方法で実行すると、アイテムが正しいコンテナーにドロップされます。

同位体のドキュメントには、それらは「削除」機能であると記載されていますが、これには 2 つの問題があります。

1) ドキュメントには、「Isotope ウィジェットと DOM から指定されたアイテム要素を削除する」と記載されていますが、ウィジェットまたは DOM からアイテムを削除したくありません。同位体機能を削除したいだけです。

2) 「初期化前に isotope のメソッドを呼び出せません。メソッド remove を呼び出そうとしました」というエラーが表示されますが、この場合、同位体は初期化されましたが、クローンされたオブジェクトではない可能性があります?? 私は学びたいと思っていますが、これは私の能力を超えています。

このエラーを修正する 1 つの方法を見つけたので、ドラッグ時にアイソトープを破棄し、ドラッグが完了した後、またはアイテムを手放した後にアイソトープを再初期化することができましたが、それは非効率的です。

4

0 に答える 0