Question

所以我有一个无序的可拖动列表，我想拖到另一个无序的droppable列表中。如果我克隆了draggable并将其附加到＆＃34; body＆＃34;，那么我可以将它拖出其容器并将其放在另一个列表中的droppable元素上，但它不会自动滚动到droppable无序列表。如果我克隆并附加到其他无序列表，那么它将自动滚动可放置列表，但拖动时该元素不可见，直到它悬停在可放置列表上。有没有人知道解决这个问题的解决方法或更好的方法？

在这里摆弄代码：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');
    }
  });

Droppable list 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>

提前致谢！

Answer 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 });
                    }
                });

jQuery Draggable - 滚动其自身以外的容器

1 个答案: