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

【问题标题】：JQueryUI - Draggable inside scrollable div hides dragging elementJQueryUI - 可滚动div内的可拖动隐藏拖动元素
【发布时间】：2017-09-14 14:00:07
【问题描述】：

在具有固定高度和可滚动 y 轴的容器内使用 JQuery UI 可拖动 div。 overflow-y: scroll-rule 会在可拖动元素被拖动到容器外时隐藏它们。

jsFiddle 与 overflow-y: scroll

~~jsFiddle~~ 没有overflow

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

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

我尝试过的：

将两个可拖动 div 的 z-index 设置为 99999
将两个可拖动对象的overflow-x设置为visible、auto、initial、inherit
将containment-option 设置为.master-container 及更高版本
将stack-option 设置为.master-container 及更高版本
将zIndex-选项设置为99999
以上所有选项同时进行

编辑：

删除了 3 个链接，因为我缺乏发布 2 个以上链接的声誉。

如果您正在寻找 jsFiddles，它们位于相同的 URL 上，结尾 ID 分别为 a68ytmbw/4/ 和 a68ytmbw/3/，而不是 a68ytmbw/2/。 如果我通过发布对 jsFiddle 的过多引用来违反规则，请告诉我。

【问题讨论】：

标签： jquery css jquery-ui jquery-ui-draggable

【解决方案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/

【讨论】：

回复晚了，抱歉。我不得不搁置这个项目。您的解决方案使用了助手，这违反了我的规范。我想看看实际的
移动。重温了这个问题，没找到解决办法。
@Dendril 这不是clone，我想我明白你在说什么。您希望目标项目看起来像是被移动（不再在列表中）并被放置在工作区上。看看我们是否可以使用appendTo 和.position() 来创建这个效果。
没错。一种解决方案是在生成助手时隐藏原始元素。另一种是从容器中移除原始元素并将其附加到更高的容器中。作为一个可持续的解决方案，这两个似乎都太笨重了。

【解决方案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/

【讨论】：