ドロップ後のJQueryのドラッグ可能なスタックブレーク

Question

JQueryを使用してウェブサイトのスロットにドラッグ可能なネームプレートを使用しています。すべてはかなり上手ですが、私はスタックに関するいくつかの問題を抱えています。初期状態のスタックから正常に動作します。ドラッグされているカードは、常に他のすべての要素の上にあります。

問題は、ネームプレートの1つがドロップ可能になった後に発生します。スクリプト内でdraggableを作成したdraggablesは、ドロップネームプレートの下を通過します。まるで落とされたネームプレートがスタックのプロパティを削除したかのようです。

目的とする機能は、ドロップされた回数にかかわらず常にドラッグ可能な状態にすることです。 CSSが干渉しているかどうかはわかりません。私はこれらの言語にあまり慣れていません。

これは私のコードでドラッグ可能に設定されています

$('#rikishi_card.Gen'+i+'e').draggable({ 
     cursor: 'move', 
     revert: 'invalid', 
     stack: '#rikishi_card' 
}); 

そしてドロップゾーンを設定する：

$('#rikishi_slot.Gen'+i+'w').droppable({ 
    accept: '#rikishi_card', 
    drop: handleDrop 
    }); 

いくつかのサンプルコードはここにある： https://jsfiddle.net/W4Km8/10263/

はダウンGen1wをドラッグしてみてください新しい。それは他のカードを上手く通過します。 Gen1eをGen1wにドラッグします。それはGen1wに合格します。 Gen1e-> Gen1w-> Gen2e-> Gen2w

Answer 1

私は、rikishi_cardをIDからclassに、GenXをその逆に変更しました。今働いているようだ。