javascript - jQuery 用户界面 : Cannot drag an element in a z-index stack

Question

我正在开发一个包含许多可拖放元素的应用程序。除了这种情况外，它们都有效:

这应该是可拖动的:

<div id="8093244595324" class="insertion ui-draggable" style="z-index: 4; position: relative;">
    Test Accou...<br />0.330H
</div>

还有一些相关的 HTML。

<div class="paginationPageMargin" style="">
    <div id="8195443196587" class="paginationPage" style="">
        <div id="8290907158934" class="oneEighthPageLayer" style=""></div>
        <div id="8222242963571" class="oneSixthPageLayer" style=""></div>
        <div id="8460851026264" class="oneThirdPageLayer" style="">
            <div id="8072616373566" style="height: 33%;">
                <div id="8686623363113" class="oneThird insertionBlock" value="&nbsp;" style="">
                    <div id="8093244595324" class="insertion ui-draggable" style="z-index: 4; position: relative;">
                        Test Accou...<br />0.330H
                    </div>
                </div>
            </div>

            <div id="8810410276771" style="height: 33%;">
                <div id="8605800682859" class="oneThird insertionBlock" value="&nbsp;"></div>
            </div>

            <div id="8509644301764" style="height: 33%;">
                <div id="8708665901661" class="oneThird insertionBlock" value="&nbsp;"></div>
            </div>
        </div>
    </div>Page 1
</div>

请注意，这里有一些 z-index 的东西。可拖动元素本身是index 4。每个页面层div还有一个z-index:

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

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

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

我不确定 z-index 内容是否相关，因为我已经注意确保我要绑定(bind)的可拖动元素位于堆栈的顶部。

这是可拖动的绑定(bind):

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

和 handleDragStart:

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

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

如有任何见解，我们将不胜感激。

Answer 1

我删除了除插入之外的所有 z-index 值。