jQuery Draggable - 滚动容器而不是它自己的容器答案

【问题标题】：jQuery Draggable - Scrolling containers other than its own withjQuery Draggable - 滚动容器而不是它自己的容器
【发布时间】：2018-01-22 14:07:01
【问题描述】：

所以我有一个可拖动的无序列表，我想将它拖到另一个可放置的无序列表中。如果我克隆可拖动对象并将其附加到“正文”，那么我可以将其拖出其容器并将其放置在另一个列表中的可放置元素上，但它不会自动滚动可放置的无序列表。如果我克隆并附加到另一个无序列表，那么它将自动滚动可放置列表，但拖动时元素不可见，直到它悬停在可放置列表上。有谁知道解决此问题的解决方法或更好的方法？

在这里摆弄代码：https://jsfiddle.net/bkfxjnom/6/ 可拖动代码：

$('.draggable').draggable({
    helper: 'clone',
    appendTo: "body",
    zIndex: 100,
    refreshPositions: true,
    revert: 'invalid',
    start: function(event, ui) {
      $(this).css('visibility', 'hidden');
    },
    stop: function(event, ui) {
      $(this).css('visibility', 'visible');
    }
  });

可拖放列表 html：

 <ul class="list-group" id="root" style="overflow-y:scroll; height: 150px">

    <li class="list-group-item category-droppable" id="level1">
      <span class="glyphicon glyphicon-chevron-right"></span>FirstLvL
      <ul class="list-group" id="level1">

        <li class="list-group-item category-droppable" id="level2">
          <span class="glyphicon glyphicon-chevron-right"></span>SecondLvL
          <ul class="list-group" id="level2">

            <li class="list-group-item category-droppable" name="A" id="level3">A</li>+++ many li elements

          </ul>
        </li>

      </ul>
    </li>

  </ul>

提前致谢！

【问题讨论】：

标签： jquery-ui scroll jquery-ui-draggable horizontal-scrolling jquery-ui-droppable

【解决方案1】：

所以我最终使用的解决方法是将克隆附加到我想要可滚动的容器中，并将其包含在其中。然后我制作了另一个克隆，我用鼠标拖动时偏移了它，它是绝对定位的。一种 hacky 解决方案，但它有效。

                $('.draggable').draggable({
                    scrollSensitivity: 35,
                    scrollSpeed: 28,
                    containment: "#root",
                    helper: "clone",
                    appendTo: "#root",
                    zIndex: 5000,
                    refreshPositions: true,
                    start: function (event, ui) {
                        parent = $(this);
                        $(this).css('visibility', 'hidden');
                        $(ui.helper).css('visibility', 'hidden');
                        clone = $(this).clone();
                        clone.addClass("ui-draggable-dragging");
                        clone.css('visibility', 'visible');
                        clone.css("position", "absolute");
                        clone.css("z-index", 5001);
                        clone.prependTo($(".dragging-area"));
                        $("#unprocessed_list").droppable("disable");
                    },
                    stop: function (event, ui) {
                        clone.animate($(this).offset(), 500);
                        setTimeout(function () { clone.remove(); parent.css('visibility', 'visible'); }, 500);
                        $("#unprocessed_list").droppable("enable");

                    },
                    drag: function (event, ui) {
                        clone.offset({ top: event.pageY - clone.height(), left: event.pageX - clone.width()/2 });
                    }
                });

【讨论】：