私は比較的 jQuery に慣れていないデザイナーなので、ご容赦ください。
jQuery ショッピング カート モデルに基づくデータベース クエリ作成プログラムを作成しました。
基本的に、ユーザーはフィールド名とブール演算子を「カート」領域にドラッグ アンド ドロップします。これにより、カンマ区切りの文字列に変換してクエリとして保存できる要素のリストが作成されます。ドラッグされた要素は、実際にはオリジナルのクローンです。
カート領域の要素の基本的な順序は次のとおりです。
field name, boolean, constant or field name, optional and/or, etc.
次のような文字列になる可能性があります。
product,equals,hardcoverbook,and,pubdate,lessthan,12/31/13
これは次と同じです:
Product = HardcoverBook AND PubDate < 123113
クエリ作成領域で論理的な順序を維持するために、通常、フィールドをドロップするとすべてのフィールドが無効になり、ユーザーは演算子をドラッグするしかなくなります。ブール演算子が削除されると、すべてのブール演算子が無効になります。そうしないと、無意味なクエリになってしまう可能性があります。次に例を示します。
has,greaterthan,hardcoverbook,newspaper
フィールドまたは演算子がドロップされた場合、それを Trash div にドラッグして削除できる必要があります。
同時に、以前の要素は削除できなくなります。そうしないと、ユーザーが要素をランダムに削除することで、作成中のクエリに大混乱をもたらす可能性があります。
たとえば、「el」がドラッグ アンド ドロップされるフィールド名である場合、「削除可能」クラスがドロップ機能の一部として追加され、前のリスト要素から削除されます。
$(el).addClass("deletable").prev('li').removeClass("deletable");
この部分は正常に動作しています。つまり、最後にドロップされたリスト要素は削除でき、以前のリスト要素は削除できません。
私が抱えている問題は、ユーザーがドロップされたリスト要素をクエリ作成領域 [「カート」] にドラッグすると、そのリスト要素のクローンが作成されることです。次に、そのクローンをドラッグして、別のクローンを作成できます。
元のドロップ イベントでは、ドロップされたフィールド名または演算子の後に [コンマ区切りの文字列になるように] カンマが追加されるため、ドロップされたフィールドをドラッグすると、最初のドロップ イベントが再作成されていると思いますか? これは、ドラッグが停止するたびに各クローンにカンマが追加されているためです。
「カート」の div を並べ替え不可にすると、ドロップされた要素がドラッグされたときに複製されないようにすることができますが、ゴミ箱にドラッグすることはできません。
$("#cartInv ol").droppable({
accept: "(#catalogProd2 li,#boolean li,#and_or li,#constant li)",
accept: ":not(#catalogInv li,#catalogProd2 li,#catalogRB1 li,#catalogRB2 li)"
}
).sortable("disable");
つまり、長々と申し訳ありませんが、まとめると、ドロップされた要素を「削除可能」に保ちながら、ドラッグしたときにクローンが作成されないようにして、ゴミ箱にドラッグできるようにする方法が必要です。
クローンの問題を示すページの完全に機能するバージョンがあります。
2 番目のページは、「カート」がソート可能にされていない場合の動作を示しています。要素はドラッグできないため、複製されませんが、ゴミ箱にドラッグすることもできません。
どんな助けでも大歓迎です！