jQuery UI，Draggable，Droppable，自動滾動

我有一套可接受的li元素，它接受一個可拖動的圖標。項目列表位於可滾動的div元素中。我在這裏舉一個簡單的例子：http://www.nerdydork.com/demos/dragscroll/jQuery UI，Draggable，Droppable，自動滾動

我想知道是否有方法來拖動可拖動元素時自動滾動元素列表。例如，假設您位於中間的某個位置，例如http://www.nerdydork.com/demos/dragscroll/#j。當您接近div的頂部時，它會開始向上滾動，當您接近div的底部時，它將開始向下滾動。

任何人都知道如何用jQuery來實現這一點？

UPDATE

我越來越近。我在容器div的上部&下部創建了固定div。當它懸停在它上面開始自動滾動使用http://plugins.jquery.com/project/aautoscroll

現在的問題是，當我將鼠標懸停在較低的區域，它攪亂了我可拖動的字母。它只是似乎是自動滾動區域較低的問題。

要見我說的錯誤，觀看這部短片：http://screencast.com/t/JBFWzhPzGfz

注意如何當它autoscrolls下來，懸停不超過右側字母。在視頻的結尾處，您可以看到，如果您將鼠標懸停在列表的左邊緣上，則它會以某種方式重置並且似乎再次工作。

來源

2011-02-28 Dustin

不能讓它像與自動滾屏插件工作，因爲它現在是在jQueryTools。 – 2012-10-19 08:41:55

爲draggable設置「refreshPositions：true」選項將導致jQuery重新計算每個鼠標事件的偏移量。這應該能解決你的問題。

來源

2011-03-21 22:26:24

，你也可以嘗試使用間隔函數： http://jsfiddle.net/msszhwzf/6/

for (var i = 0; i < 10; i++) { 
    $("#sortableContainer").append('<div class="sortable"></div>'); 
    $("#droppableContainer").append('<div class="droppable"></div>'); 
}; 

var adding = 0 
var scrollInterval = null; 

$("#sortableContainer").sortable({ 
    refreshPositions: true, 
    start: function (e, ui) { 
     scrollInterval = setInterval(function() { 
      var foo = $("#droppableContainer").scrollTop(); 
      $("#droppableContainer").scrollTop(foo + adding); 
     }, 50) 
    }, 
    stop: function (e, ui) { 
     clearInterval(scrollInterval); 
    }, 
    sort: function (e, ui) { 
     var top = e.pageY - $("#droppableContainer").offset().top 
     if (top < 10) { 
      adding = -15 
     } else if (top > $("#droppableContainer").height() - 10) { 
      adding = 15 
     } else { 
      adding = 0 
     } 
    }, 
}); 
$(".droppable").droppable({ 
    hoverClass: "active", 
    accept: ".sortable", 
    drop: function (event, ui) { 
     ui.draggable.remove(); 
    }, 
})

來源

2014-09-30 15:47:42 Achim

jQuery UI，Draggable，Droppable，自動滾動

回答

相關問題