Question

我已经看过类似的问题，但我已经尝试了人们接受的所有答案，但没有任何效果。我动态生成3个div，每个div都有一个具有可拖动元素的ul，而ul本身是可以删除的。但是，除非我使用带有克隆的帮助器，否则拖动的元素将消失在页面上存在的其他div / ul之后。我不想拖动克隆。我试过使用堆栈选项无济于事。我尝试使用accept：draggable ...没有骰子。它似乎是z-index的一个问题。这3个div中每个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，它可以接收数组。

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

1 个答案:

Updated demo.