Ein Element in einer sortierbaren Liste nach oben/unten verschieben, während das Element an derselben Position im Ansichtsfenster bleibt?

Question

Ich habe eine Liste von Artikeln. Das Format ist so etwas wie dieses:

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

Ich bin mit einem Skript jQuery ein Element nach oben/unten die Liste:

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

      } 
     }) 

Leider dies nicht gut funktioniert, wenn das Element nicht genau in der Mitte und es gibt genug Elemente, um einen Überlauf-y zu erstellen.

Wie ändert man dieses Skript, indem es immer das Element im Ansichtsfenster behält und auch die Größe des Darstellungsbereichs berücksichtigt?

Ich muss in der Lage sein, ein Top-Element ganz nach unten zu klicken, aber nach ein paar Klicks fällt die Abwärts-Schaltfläche außerhalb meines Ansichtsfensters, und ich muss manuell scrollen, um dies fortzusetzen.

JSFIDDLE

Answer 1

Ich habe herausgefunden, was ich falsch gemacht habe. Zuerst musste ich berechnen, was der aktuelle OffsetTop des Ansichtsfensters war.

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

The distance berechnet ist nur der Abstand von dem Element auf das Ansichtsfenster. Um den aktuellen Offset zu erhalten, musste ich nur die berechnete distance von der item.offset().top subtrahieren. Dann brauchte ich nur zu subtrahieren/fügen Sie die prev/next Artikel Höhe:

Element up:

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

Element nach unten:

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

JsFiddle

Answer 2

Wenn ich das Element der es Offsets scheint verlassen das Ansichtsfenster, das Element zu stoppen:

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

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