javascript - jQuery 用户界面 : Cannot drag a draggable element in z-axis stack

Question

我有三个 z 轴层:

oneEigthPageLayer, z-index = 3
oneSixthPageLayer, z-index = 2
oneThirdPageLayer, z-index = 1

这是 HTML:

<div id="8737662768690" class="paginationPage">
    <div id="8703675164608" class="oneEighthPageLayer">
        <div id="8246010262752" style="height: 25%;">
            <div id="8397692647995" class="oneEigth insertionBlock ui-droppable" value="&amp;nbsp;"></div>
            <div id="8665276236134" class="oneEigth insertionBlock ui-droppable" value="&amp;nbsp;"></div>
        </div>
        <div id="8633792988490" style="height: 25%;">
            <div id="8843350805808" class="oneEigth insertionBlock ui-droppable" value="&amp;nbsp;"></div>
            <div id="8254286378622" class="oneEigth insertionBlock ui-droppable" value="&amp;nbsp;"></div>
        </div>
        <div id="8236161367036" style="height: 25%;">
            <div id="8451781833311" class="oneEigth insertionBlock ui-droppable" value="&amp;nbsp;"></div>
            <div id="8162775614997" class="oneEigth insertionBlock ui-droppable" value="&amp;nbsp;"></div>
        </div>
        <div id="8991526000202" style="height: 25%;">
            <div id="8432879005326" class="oneEigth insertionBlock ui-droppable" value="&amp;nbsp;"></div>
            <div id="8143874279456" class="oneEigth insertionBlock ui-droppable" value="&amp;nbsp;"></div>
        </div>
    </div>
    <div id="8667690853356" class="oneSixthPageLayer">
        <div id="8523494638968" style="height: 50%;">
            <div id="8313573412830" class="oneSixth insertionBlock" value="&amp;nbsp;"></div>
            <div id="8168528546113" class="oneSixth insertionBlock" value="&amp;nbsp;"></div>
            <div id="8442180125276" class="oneSixth insertionBlock" value="&amp;nbsp;"></div>
        </div>
        <div id="8484895223984" style="height: 50%;">
            <div id="8710337291239" class="oneSixth insertionBlock" value="&amp;nbsp;"></div>
            <div id="8164406366646" class="oneSixth insertionBlock" value="&amp;nbsp;"></div>
            <div id="8200660348637" class="oneSixth insertionBlock" value="&amp;nbsp;"></div>
        </div>
    </div>
    <div id="8215678654145" class="oneThirdPageLayer">
        <div id="8509814064717" style="height: 33%;">
            <div id="8712382120313" class="oneThird insertionBlock" value="&amp;nbsp;"></div>
        </div>
        <div id="8906378003769" style="height: 33%;">
            <div id="8818719014060" class="oneThird insertionBlock" value="&amp;nbsp;"></div>
        </div>
        <div id="8169201087206" style="height: 33%;">
            <div id="8130097907502" class="oneThird insertionBlock" value="&amp;nbsp;"></div>
        </div>
    </div>
</div>

和相关的CSS:

.oneThirdPageLayer {
    z-index: 1;
    height: 100%;
}

.oneSixthPageLayer {
    z-index: 2;
    height: 100%;
}

.oneEighthPageLayer {
    z-index: 3;
    height: 100%;
}

我在“插入”类的这些层中动态创建元素。然后我像这样将 draggable 绑定(bind)到它们:

$('.insertion').draggable({
    start: handleDragStart
});

function handleDragStart( event, ui ) {
    console.log('hi');
    var $insertion = ui.helper,
        insertion = getInsertion($insertion.attr('id'));

    // This insertion is in the air now... it has no blocks
    insertion.insertionBlocks = [];
}

我注意到我只能拖动 oneSixthPageLayer 中的元素。在那种情况下，不仅元素明显拖拽，而且“hi”也会写入控制台日志。在元素在 oneEighthPageLayer 或 oneThirdPageLayer 中可见的情况下，它不会拖动并且不会将“hi”写入日志。

这让我感到困惑，因为我预计，如果这种行为要发生，它会发生在最顶层的 oneEighthPageLayer 上。或者至少有一个ThirdPageLayer，最底层。但是oneSixthPageLayer，中间层？

另外，我注意到如果我右键单击堆栈并转到检查元素，它总是会调出 oneSixthPageLayer 层。

无论如何，我需要能够从所有三个图层中拖动元素。

如何将事件转发到所有图层？

Answer 1

我通过让 drop 生成 z-index 为 100 的 draggable 来解决这个问题。