JQueryUI - Draggable inside scrollable div 隐藏拖动元素

Question

在具有固定高度和可滚动 y 轴的容器内使用 JQuery UI-可拖动 divs。 overflow-y: scroll 规则在将可拖动元素拖出容器时隐藏它们。

jsFiddle 与 overflow-y: scroll

~~jsFiddle~~ 没有 overflow

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

~~jsFiddle~~ Prodikl 对我的问题的解决方案，以确认它确实有效。

我尝试过的：

将两个可拖动 div 的 z-index 设置为 99999
设置两个draggable的overflow-x为visible, auto, initial, inherit
将 containment 选项设置为 .master-container 及更高
将 stack 选项设置为 .master-container 及更高
将 zIndex 选项设置为 99999
以上所有选项同时出现

编辑：

删除了 3 个链接，因为我缺少 post 超过 2 个链接的声誉。

如果您要查找 jsFiddles，它们在相同的 URL 上，结尾 ID 分别为 a68ytmbw/4/ 和 a68ytmbw/3/，而不是 a68ytmbw/2/。 如果我 post 对 jsFiddle 的过多引用违反了规则，请告诉我。

Answer 1

您可以将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/

Answer 2

使用@Twisty

回答的推导

使用 helper 并在拖动时隐藏父项。

$(function() {
  $(".draggable").draggable({
    start: (event, ui) => {
      $(event.target).addClass('hidden-but-present');
    },
    stop: (event, ui) => {
      $(event.target).removeClass('hidden-but-present');
    },
    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.draggable.text() + " in dropzone");
    }
  });
});

工作示例：https://jsfiddle.net/hsdzs4jv/

JQueryUI - Draggable inside scrollable div 隐藏拖动元素

JQueryUI - Draggable inside scrollable div hides dragging element

css

jquery

jquery-ui

jquery-ui-draggable