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的东西。可拖动元素本身是索引4.每个页面层div也有一个z-index：

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

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

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

我不确定z-index是否相关，因为我已经注意确保我可绑定的元素位于堆栈的顶部。

这是可拖动的绑定：

$('.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值。

jQuery UI：无法在z-index堆栈中拖动元素

1 个答案: