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隱藏拖動元素

回答

相關問題