Список сортировки без перезагрузки iframe

Question

Как я могу отсортировать список без загрузки iframe внутри li? (AppendChild делает IFrame перезарядку)

<script> 
window.onload = function() { 
    var my_ul = document.getElementById('my_ul'), 
     my_button = document.getElementById('my_button'); 

    function sort_function() { 
     for(var i = 0; i < 5; i++) { 
      var list = [1, 2, 3, 4, 5]; 
      my_ul.appendChild(document.querySelector('[data-sort="' + list[i] + '"]')); 
     } 
    } 

    my_button.onclick = function() { 
     sort_function(); 
    } 

} 
</script> 

<a id=my_button href="#">Sort</a> 
<ul id=my_ul> 
    <li data-sort=3>3<iframe src="#3"></iframe> 
    <li data-sort=2>2<iframe src="#2"></iframe> 
    <li data-sort=4>4<iframe src="#4"></iframe> 
    <li data-sort=1>1<iframe src="#1"></iframe> 
    <li data-sort=5>5<iframe src="#5"></iframe> 
</ul> 

Answer 1

Если переместить объект в DOM, то будут сняты и повторно прилагается. В результате содержимое iframe будет перезагружено.

Я не знаю, что вы показываете в этих iframe, но, возможно, вы можете избавиться от них и динамически загружать контент с помощью AJAX (f.e. jQuery.get()).

Если вы действительно хотите использовать iframe, и вы действительно хотите избежать их перезагрузки, я думаю, что единственный способ состоит в том, чтобы плавающие элементы и перемещать их динамически.

Я создал jsFiddle that demonstrates this. В коде используется jQuery.

HTML

Закрыть литиево теги

<a id="my_button" href="#">Sort</a> 
<ul id="my_ul"> 
    <li data-sort=3>3<iframe src="#3"></iframe></li> 
    <li data-sort=2>2<iframe src="#2"></iframe></li> 
    <li data-sort=4>4<iframe src="#4"></iframe></li> 
    <li data-sort=1>1<iframe src="#1"></iframe></li> 
    <li data-sort=5>5<iframe src="#5"></iframe></li> 
</ul> 

CSS

Используйте абсолютное позиционирование для Li элементов

#my_ul li { 
    position: absolute; 
    display: block; 
} 

Javascript

var iframeTop = 0; 

// Initial positioning at document load 
$(function() { 
    var ofsTop = $("#my_ul li:first-child").position().top; 
    $("#my_ul li").each(function(index, value) { 
     $(value).css({ top: ofsTop + 'px'}); 
     ofsTop += $(value).height(); 
    }); 
}); 

// Re-position when user clicks #my_button 
$("#my_button").click(function() { 
    // sort li depending on data-sort 
    var sorted = $("#my_ul li").sort(function(a, b) { 
     return $(a).data("sort") - $(b).data("sort"); 
    }); 
    // re-position li's 
    if (!iframeTop) iframeTop = $("#my_ul li:first-child").position().top; 
    var ofsTop = iframeTop; 
    $.each(sorted, function(index, value) { 
     $(value).css({ top: ofsTop + 'px'}); 
     ofsTop += $(value).height(); 
    }); 
});