JQuery可排序和自動滾動

我想讓JQuery Sortable工作，但我遇到了輕微的可用性問題。JQuery可排序和自動滾動

我想排序的列表非常大（約200項）。如果用戶嘗試將頂部項目拖動到底部，則一旦該項目到達屏幕可見部分的底部，該頁面將滾動一小部分，然後停止。要觸發更多的向下滾動，您必須將鼠標以圓形運動移動，直到物品到達底部。

是否有任何方法來跟蹤鼠標的位置，而它拖動一個項目並自動向下滾動屏幕？

2010-09-17 Tahir Hassan

您可以根據mouseMove返回的位置觸發事件。這裏有一個簡單的教程：http://jquery-howto.blogspot.com/2009/07/identifying-locating-mouse-position-in.html

本教程可以幫助您開始：http://valums.com/vertical-scrolling-menu/ 這走過同樣的效果：http://www.queness.com/resources/html/scrollmenu/index.html

來源

2010-09-17 22:14:45 jonathanatx

我想借此看看scroll, scrollSensativity, and scrollSpeed options。

你可以這樣做：

$("#sort").sortable({ scroll: true, scrollSensitivity: 100 });

或

$("#sort").sortable({ scroll: true, scrollSpeed: 100 });

甚至

$("#sort").sortable({ scroll: true, scrollSensitivity: 100, scrollSpeed: 100 });

來源

2010-09-17 22:15:31 digitaldreamer

的感謝！它完美地工作 – Steffi 2014-07-28 10:01:55

這個答案沒有解決問題中實際需要的內容。 – Borgboy 2017-02-22 00:23:25

我覺得你可以考慮處理滾動外部排序。我建議使用計時器和可排序的'out'事件。

這是基於jQueryUI的演示頁上的一段代碼，你可以使用它作爲起點，如果想要走這條路：

$(function() { 
    var scroll = ''; 
    var $scrollable = $("#sortable"); 
    function scrolling(){ 
    if (scroll == 'up') { 
     $scrollable.scrollTop($scrollable.scrollTop()-20); 
     setTimeout(scrolling,50); 
    } 
    else if (scroll == 'down'){ 
     $scrollable.scrollTop($scrollable.scrollTop()+20); 
     setTimeout(scrolling,50); 
    } 
    } 

    $("#sortable").sortable({ 
     scroll:false, 
     out: function(event, ui) { 
     if (!ui.helper) return; 
     if (ui.offset.top>0) { 
      scroll='down'; 
     } else { 
      scroll='up'; 
     } 
     scrolling(); 
     }, 
     over: function(event, ui) { 
     scroll=''; 
     }, 
     deactivate:function(event, ui) { 
     scroll=''; 
     } 
    }); 
    $("#sortable").disableSelection(); 
});

這裏同時工作示例：JSBIN

對不起
我沒有鎖定示例代碼，並偶然被破壞。現在它恢復了工作。

來源

2014-02-21 09:28:19 Saram

雖然scrollSensitivity的值在幫助器項目接近邊緣（頂部或底部）時控制滾動行爲，但您可以使用「排序」事件在拖動時無條件地滾動，如果使用以下代碼：

$(".sortable").sortable({ 
    scroll: true, 
    scrollSensitivity: 80, 
    scrollSpeed: 3, 
    sort: function(event, ui) { 
     var currentScrollTop = $(window).scrollTop(), 
      topHelper = ui.position.top, 
      delta = topHelper - currentScrollTop; 
     setTimeout(function() { 
      $(window).scrollTop(currentScrollTop + delta); 
     }, 5); 
    } 
});

不知道這是否完全解決了您所看到的問題，但我發現使用此方法可以提高可用性。這裏是link to jsfiddle。

來源

2014-02-25 00:31:03 marty

如果滾動速度太快（就像我的情況），你可以在'setTimeout'中加入以下代碼：'if（delta> 7）delta = 7;'和數字一起播放以調整你的速度 – TBE 2018-02-18 10:30:17

你有一個錯誤，當向下滾動，然後滾動，滾動仍然下降 – TBE 2018-02-18 10:34:39

我已經從body中刪除了overflow-y: scroll來解決它。

來源

2014-08-01 18:49:44 Daniel

它以某種方式幫助我！謝謝 – 2016-07-29 08:29:25

我有一個自舉的響應表，這不會讓它工作。

不喜歡這樣的：

<div class="table-responsive"> 
    <table> 
     ... 
    </table> 
</div>

這樣是：

<table> 
    ... 
</table>

，並使用這些選項：

scroll， scrollSensitivity， scrollSpeed

來源

2016-11-09 15:30:45

乙通過@marty的回答，這是一個很好的調整代碼： 1.滾動的控制速度 2.將向下滾動並向上滾動而沒有毛刺。 3.默認速度是7px的同時小於7px的 4.運動將被忽略

var previousLocation, previousDelta; 
    $(".selector").sortable({ 
     sort: function(event, ui) { 
      var currentScrollTop = $(window).scrollTop(), 
       topHelper = ui.position.top, 
       delta = topHelper - currentScrollTop; 
      setTimeout(function() { 
       if((delta < 7 && delta >=0) || (delta > -7 && delta <=0)) 
        return; 
       if(delta > 7){ 
        delta = 7; 
        if((topHelper - previousDelta) < previousLocation){ 
         delta = (delta * -1); 
        } 
       } 
       if(delta < -7){ 
        delta = -7; 
        if((topHelper - previousDelta) > previousLocation){ 
         delta = (delta * -1); 
        } 
       } 

       $(window).scrollTop(currentScrollTop + delta); 
       previousLocation = topHelper; previousDelta = delta; 
      }, 5); 
     } 
    });

來源

2018-02-18 11:13:12 TBE

JQuery可排序和自動滾動

回答

相關問題