Jquery UI Sortable，Scrolling（jsFiddle示例）

我想弄清楚如何讓我的'可排序列表'滾動，而我拖動列表元素。Jquery UI Sortable，Scrolling（jsFiddle示例）

滾動在我從但不是在我拖着到拖動列表列表中工作正常。

http://jsfiddle.net/jordanbaucke/pacbC/1/

另一個問題問類似的事情：

jQuery sortable container scroll div with overflow auto

PS。 Pivotaltracker，www.pivotaltracker.com做得很好。

來源

2012-06-14 jordan.baucke

工作演示http://jsfiddle.net/3E2Hg/1/

請讓我知道如果我錯過了什麼，和SLO看我以前的解決這個答覆：Automatically scroll droppable div whilst dragging

行爲：現在你在哪裏拖到也將在div滾動。（其餘代碼如下）

希望這有助於

代碼

$(function() { 
    var sortlists = $("#List1, #List2").sortable({ 
     tolerance: 'pointer', 
     connectWith: '#List1, #List2', 
     helper: 'original', 
     scroll: true 
    }).on('scroll', function() { 
     sortlists.scrollTop($(this).scrollTop()); 
    }); 
});

來源

2012-06-14 01:30:04

將項目1和3放置在第二個滾動框中。然後，將兩個滾動條都設置爲高。現在，您無法將第2項從第一個滾動框拖放到第二個滾動框的8/9之間，因爲滾動條高度不同。也許解決方法是將滾動框1中的臨時設置高度設置爲滾動框2的長度以上。 – arttronics

Hiya @arttronics howz it going？ :)是因爲'on'甚至綁定到'this'對象，即當列表變得不相等時，用戶拖動的div可以是：將其拖動到div，然後將其滾動到底部或可能使用'this'對象來玩，並且始終選擇較大的容器作爲滾動引用，儘管爲評論歡呼。 –

這太糟糕了，它是一個非工作演示報告在其他[** SO答案**]（http://stackoverflow.com/questions/10986159/automatically-scroll-droppable-div-whilst-dragging/10986522# 10986522）你昨天提供了很多用戶。 ** - 1 **爲無用的答案。 – arttronics

老問題，但我這個掙扎了幾個小時，所以今天我想我會分享我學到了。

可排序滾動是scrollParent的偏移量，當前滾動位置，當前項目位置和scrollSensitivity的函數。可開始拖動時，可排序執行_mouseStart。這將設置scrollParent並緩存當前排序的偏移量。有了這些知識，我們可以在在事件處理程序做一個小的洗牌：

over: function (event, ui) { 
    ui.item.data('sortableItem').scrollParent = ui.placeholder.parent(); 
    ui.item.data('sortableItem').overflowOffset = ui.placeholder.parent().offset(); 
}

在火災時，被拖動的元素改變容器。當您遇到over事件時，佔位符已經移至新容器。代碼獲取新的scrollParent並回收偏移量。

我分叉Tats_innit的小提琴爲簡潔起見：http://jsfiddle.net/3E2Hg/84/

的scrollParent獲取整個事件結構中的其他地方引用，所以我不知道這是防彈的。不過，我認爲這是一個很好的起點。如果我遇到任何問題，我會更新此答案。

來源

2013-11-26 21:38:46 Rakuen42

我愛你。這是一個非常乾淨的解決方案，可能非常棘手的問題。我還沒有遇到任何問題，它對我來說是開箱即用的！如果我發現任何奇怪的事情將更新。 –

美麗的解決方案 - 節省了我的工作時間，謝謝！ – tedwards947

@ tedwards1988太棒了，很高興它可以幫助！ – Rakuen42

您只需要將overflow: auto;添加到父元素，無論是ul還是#element，或者您有什麼。

來源

2017-03-10 20:55:47

Jquery UI Sortable，Scrolling（jsFiddle示例）

回答

相關問題