將元素向上/向下移動一個可排序列表，同時將元素保持在視口中的相同位置？

-1

我有一個項目列表。格式是這樣的：將元素向上/向下移動一個可排序列表，同時將元素保持在視口中的相同位置？

|||||||||||||||||||||||||||||| 
|  SPACER DIV   | 
|||||||||||||||||||||||||||||| 
|  ELEMENT DIV   | 
|       | 
|||||||||||||||||||||||||||||| 
|  SPACER DIV   | 
|||||||||||||||||||||||||||||| 
|  ELEMENT DIV   | 
|       | 
||||||||||||||||||||||||||||||

我使用一個jQuery腳本來移動元素向上/向下名單：

$(sortableContainer).on('click', '.sortable-controls i', function(e){ 
      var that = $(e.target); 
      var item = that.closest(panel); 
      var thisWindow = $(window); 
      var scrollTop   = thisWindow.scrollTop(), 
       elementOffsetTop = item.offset().top, 
       distanceTop   = (elementOffsetTop - scrollTop); 

      if(that.hasClass('sortable-up')) { 

       var filler = item.prev(); 
       var prev = item.prevAll(panel).first(); 
       if (prev.length == 0) 
        return; 
       item.prev().remove(); 

       prev.css('z-index', 999).css('position','relative').animate({ 
        top: item.height() 
       }, 250); 
       item.css('z-index', 1000).css('position', 'relative').animate({ top: '-' + prev.height(), queue: false}, 300, function() { 
        prev.css('z-index', '').css('top', '').css('position', ''); 
        item.css('z-index', '').css('top', '').css('position', ''); 
        item.insertBefore(prev); 
        filler.insertBefore(prev); 
        Abayo.builder.updateSorted(item, sortableContainer); 
       }); 
       var scrollDifference = distanceTop - prev.height() - filler.height(); 

       $("html, body").animate({ scrollTop: scrollDifference, queue: false }, 300); 

      } else if(that.hasClass('sortable-down')) { 

       var filler = item.next(); 
       var next = item.nextAll(panel).first(); 
       if (next.length == 0) 
        return; 
       item.next().remove(); 

       next.css('z-index', 999).css('position', 'relative').animate({ 
        top: '-' + item.height() 
       }, 250); 
       item.css('z-index', 1000).css('position', 'relative').animate({ top: next.height(), queue: false }, 300, function() { 
        next.css('z-index', '').css('top', '').css('position', ''); 
        item.css('z-index', '').css('top', '').css('position', ''); 
        item.insertAfter(next); 
        filler.insertAfter(next); 
        Abayo.builder.updateSorted(item, sortableContainer); 
       }); 

       $("html, body").animate({ scrollTop: distanceTop + next.height() + filler.height(), queue: false }, 300); 

      } 
     })

可悲的是，這並不好工作的時候該元素是不完全在中間，有足夠的元素來創建溢出y。

如何更改此腳本，因爲它始終保持該元素在視口中並考慮視口大小？

我必須能夠一直點擊頂部的元素，但點擊幾下後，下拉按鈕會落在我的視口之外，而且我必須手動滾動以繼續此操作。

JSFIDDLE

來源

2016-05-21 Abayob

很難在演示時，可視化問題所有的元素都有相同的內容和風格 – charlietfl

認真？將元素向下移動一段時間，就會發現它不能保持在視口內。 – Abayob

至少提供了一些區別，所以我們不必去嘗試弄清楚它。當我移動一些說「一些內容」，這正是我所看到的每一次 – charlietfl

我發現我做錯了什麼。我首先需要計算當前的視口偏移量是多少。

var scroll = thisWindow.scrollTop(), 
       elementOffset = item.offset().top, 
       distance  = (elementOffset - scroll);

計算的distance只是從元素到視口的距離。爲了獲得當前的偏移量，我只需從item.offset().top減去計算的distance即可。然後，我只是需要。減去/添加上一個/下一個項目的高度：

元達：

$("html, body").animate({ scrollTop: elementOffset - distance - prev.height(), queue: false }, 300);

元下降：

$("html, body").animate({ scrollTop: elementOffset - distance + next.height(), queue: false }, 300);

JsFiddle

來源

2016-05-21 18:10:09 Abayob

如果我使用的抵消它的元素似乎離開視停止元素：

$("html, body").animate({ scrollTop: prev.offset().top - 50, queue: false }, 300); 

$("html, body").animate({ scrollTop: next.offset().top, queue: false }, 300);

來源

2016-05-21 16:39:06

我試過這個：https：//jsfiddle.net/abayob/6wvuf1kc/11 /，但元素仍然在視口中向上/向下移動，我還想維護視口位置。 – Abayob

將元素向上/向下移動一個可排序列表，同時將元素保持在視口中的相同位置？

回答

相關問題