jQuery Draggable - 滚动容器以外的其他容器

所以我有一个无序的拖拽列表，我想拖入另一个无序的可拖拽列表。如果我克隆可拖动并将其附加到“body”，那么我可以将它拖出它的容器并放到另一个列表中的可拖拽元素上，但它不会自动滚动可拖拽的无序列表。如果我克隆并追加到另一个无序列表中，它将自动滚动可拖拽列表，但拖拽元素直到它悬停在可拖拽列表上时不可见。有没有人知道解决方法或更好的方法来解决这个问题？jQuery Draggable - 滚动容器以外的其他容器

拨弄这里代码：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>

提前感谢！

来源

2017-08-14 Kapli

所以我最终使用的解决方法是将克隆附加到我想要滚动的容器，并将其包含在那里。然后，我做了另一个克隆，我用鼠标拖动，其中绝对定位。一种哈克解决方案，但它的工作原理。

   $('.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 }); 
        } 
       });

来源

2017-08-15 11:45:58 Kapli

jQuery Draggable - 滚动容器以外的其他容器

回答

相关问题