Question

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

<{> jsFiddle overflow-y: scroll

没有overflow

的

~~jsFiddle~~

我看过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，他们会分别使用结束标识为a68ytmbw/4/和a68ytmbw/3/的相同网址，而不是a68ytmbw/2/。 如果我通过发布对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 - 可滚动div内的可拖动隐藏拖动元素

2 个答案: