JQueryUI - 可滚动div内的Draggable隐藏拖动元素

在具有固定高度和可滚动y轴的容器内使用JQuery UI-Draggable div。当容器被拖出容器时，该容器将隐藏可拖动的元素。JQueryUI - 可滚动div内的Draggable隐藏拖动元素

jsFiddle与overflow-y: scroll

~~的jsfiddle~~没有overflow

我见过Prodikl's solution，其中包括附加到文档主体的辅助克隆。我想找到一个不使用助手克隆的解决方案。我需要想象实际的div正在移动。

~~jsFiddle~~ Prodikl解决我的问题，以确认它确实工作。

我已经试过什么：

同时设置可拖动的div的z-index到99999
两个可拖动的overflow-x设置为visible，auto，initial，inherit
设置containment - 选择.master-container或更高
设置stack - 选项来.master-container和更高
设置zIndex - 选项来99999
所有上述选项同时

编辑：

取出3个链接，因为我缺乏信誉发布超过2个链接。

如果您正在寻找jsFiddles，它们位于同一个网址，结尾ID分别为a68ytmbw/4/和a68ytmbw/3/，而不是a68ytmbw/2/。 请让我知道如果我通过发布多余的引用到jsFiddle来违反规则。

来源

2017-09-14 Dendril

您可以使用helper作为一个函数，并生成一个新的元素不附加到该div，因此它不受溢出问题约束。

的JavaScript

$(function() { 
    $(".draggable").draggable({ 
    revert: true, 
    helper: function(e) { 
     var c = $("<div>", { 
     class: "draggable text-style", 
     style: "width: 200px; height: 90px;" 
     }).html($(e.target).text()); 
     return c; 
    } 
    }); 

    $(".dropzone").droppable({ 
    accept: ".draggable", 
    drop: function(event, ui) { 
     $("#dragResult").text("Dropped box #" + ui.helper.text() + " in dropzone"); 
    } 
    }); 
});

工作实施例：https://jsfiddle.net/Twisty/a68ytmbw/7/

来源

2017-09-14 21:53:34 Twisty

JQueryUI - 可滚动div内的Draggable隐藏拖动元素

回答

相关问题