將溢出的內容傳輸到另一個div - jquery

Question

堆棧溢出的第一個問題，儘管我已經使用了多年。

我試圖將溢出的內容從一張幻燈片移動到下一張幻燈片（都是div），這些幻燈片放置在水平滾動div中。我已經成功地使一個開始在這一點 - 請使用以下代碼

count = 0; 
$('.slide > .textOnly > .textAlign').each(function() { 
var nextSlide = count + 1; 
$(this).children('p').each(function() { 
    var currentEl = $(this); 
    if($(this).is(':in-viewport')) { 
     // Do Nothing 
    } else { 
     $('.slide' + nextSlide + ' > .textOnly > .textAlign').prepend($(this)); 
    } 
}); 
count++; 
}); 

唯一的問題是現在的內容被移動到最後一張幻燈片看到JS小提琴E- http://jsfiddle.net/N7X6W/3/。我假設，因爲它正在考慮右邊和左邊。

我正在使用這個插件http://www.appelsiini.net/download/jquery.viewport.js，並試圖取出左側和右側的計算，但沒有效果。

任何幫助，將不勝感激。

Answer 1

就目前而言，如果屏幕上只有一個幻燈片，那麼所有第二個屏幕的段落都會在第三個屏幕上結束。這似乎不符合任何目的。如果我正確理解你的意圖，你真正關心的是：摺疊下的（不是！：在視口中）。這很重要，因爲它可以防止重定位後的相同商品重新定位（根據定義，視口不符合）除非這是因爲它們也在該幻燈片的下方。

一旦我得到了那個工作，有一些細節。段落仍然會在中間被切斷。問題不僅僅是「P：低於摺疊」，因爲如果第一行在視口中，那麼否，P不低於。我想知道的是，如果整個事情是在視口，因爲我知道高度/寬度約束真的「是在視口中段落的最後一個字母」。由於最後一個字母不是一個可以順暢定位的元素，因此我只是在段落末尾創建一個空跨度。那麼我問，如果它低於或低於摺疊，這告訴我，如果該段被切斷。

count = 0; 
$('.slide > .textOnly > .textAlign > p').append("<span class='trailer'></span>"); 
$('.slide > .textOnly > .textAlign').each(function() { 
    var nextSlide = $('.slide' + (++count) + ' > .textOnly > .textAlign'); 
    $($(this).children('p').filter(function() { 
     return $(".trailer", this).is(':below-the-fold') 
    }).get().reverse())  
     .each(function() { nextSlide.prepend($(this)); }); 
}); 

有效載荷： http://jsfiddle.net/zatz/N7X6W/6/

注意：通過P因子和預謀迭代，你改變他們的順序！請參閱.reverse（）的使用。