javascript - jQuery拖放后堆栈可中断

我正在使用JQuery将可拖动的铭牌放入网站的插槽中。一切都很好，但是我在堆栈方面遇到了一些问题。从初始状态开始，堆栈工作正常。所有被拖动的卡总是在所有其他元素之上。

在将一个铭牌放入一个可放置对象之后，就会发生此问题。之前在脚本中成为可拖动对象的所有可拖动对象都将通过放置铭牌下方。好像以某种方式放置的铭牌删除了stack属性。

预期的功能是使可拖动对象始终位于顶部，而不管其被拖放了多少次。我不确定CSS是否会干扰。我不太熟悉这些语言。

这在我的代码中设置了一个可拖动对象：

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

然后设置一个dropzone：

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

一些示例代码在这里：
https://jsfiddle.net/W4Km8/10263/

尝试将Gen1w拖到新的位置。它将成功越过其他卡。然后将Gen1e拖到Gen1w上。它将通过Gen1w。
生成顺序为Gen1e-> Gen1w-> Gen2e-> Gen2w

最佳答案

我将rikishi_card从ID更改为class，将GenX更改为GenX。似乎现在正在工作。