隐藏在 droppable 后面的 JQueryUI 可拖动对象

Question

我见过类似的问题，但我尝试了人们接受的所有答案，但没有任何效果。我正在动态生成 3 个 div，每个 div 都有一个具有可拖动元素的 ul，并且 ul 本身是可放置的。但是，除非我使用带有克隆的助手，否则拖动的元素会消失在页面上存在的其他 div/ul 后面。我不想拖动克隆。我尝试使用堆栈选项无济于事。我尝试使用 accept:draggable... no dice。这似乎是 z-index 的问题。这 3 个 div 中的每一个的 DOM 层次结构是：

<div><ul><li><a><h2>SomeContent</h2></a><li><ul><div>

下面的函数使<li> 可拖动，因为您点击的实际上是<a>。

function moveme(hur){
    $hur = $(hur);
    $hur.parent().draggable({
        //helper: "clone",
        appendTo: "body",
        stack: "ul",
        cursor: "move"
    });

    $hur.parents('#stickyboard').children('.storediv').children('ul').droppable({
        accept: ".draggable"
    });

    $hur.parents('#stickyboard').children('.progressdiv').children('ul').droppable({
        accept: ".draggable"
    });

    $hur.parents('#stickyboard').children('.donediv').children('ul').droppable({
        accept: ".draggable"
        /*over: function(event,ui) {
            ui.draggable.css('z-index',100);
            ui.draggable.children('a').css('z-index',101);
        } */
    });
};

问题不在于拖的是什么，而是它消失在其他<ul> 后面的事实。您在代码中看到的任何注释都是我尝试过但没有运气的东西。非常感谢任何帮助。

Answer 1

问题是您将overflow:hidden 设置为.stickylist。所以这是隐藏任何溢出内容的效果，而不是由 z-index 引起的。我了解您可能希望使用overflow:hidden 来防止项目被拖出列表朝向标题。但这当然不是要走的路，因为它会导致您提出的新问题。因此，为了防止项目被向上拖出列表，您可以使用containment 属性，该属性可以接受限制可拖动区域的矩形坐标数组。左上角的y 应该是标题的底部（不一定准确），而右下角的y 和x 应该尽可能大。

$('a').parent().draggable({
    //helper: "clone",
    appendTo: "body",
    stack: "ul",
    cursor: "move",
    /* add this */
    containment: [0,100,10000,10000]
});

Updated demo.

这里可以看到.draggable() containment option，它可以接收一个数组。