JQuery reposition div элементы на странице load

Question

Я реализую интерфейс портлета/виджета JQuery с помощью интерфейса и JQuery. Пользователь перетаскивает и убирает виджеты, и экран может справиться с этим. Я могу использовать serialize, который отображает порядок элементов div на экране. Я могу сохранить это в cookie или DB - это еще не имеет значения.

Мой вопрос в том, как можно загрузить страницу, переставляющую div, чтобы соответствовать порядку в файле cookie/DB? Пример на основе файлов cookie будет приятным, но это не имеет большого значения.

Есть ли какой-то метод JQuery, который я могу назвать, который может переместить div в том порядке, в котором я их хочу?

Answer 1

Вы можете сделать это с помощью одного звонка appendTo или prependTo (не имеет значения) - до тех пор, пока вы можете создать специально заказанный объект jQuery.

Используя ту же разметку, как ответ Марв в:

$(function() { 
    $('#widgetC'). 
    add('#widgetE'). 
    add('#widgetA'). 
    add('#widgetD'). 
    add('#widgetB'). 
    appendTo('#widgets'); 
});

Вы, вероятно, нужно, чтобы начать с пустым jQuery объекта (использование $([])) и перебирать значение от вашего печенья, а не быть в состоянии цепи вещей как я сделал выше, хотя.

На самом деле, думать об этом ...

$(function() { 
    var order = 'CEADB'; // from cookie 
    $(
    $.map(order.split(''), function(letter) { 
     return $('#widget' + letter); 
    }) 
).appendTo('#widgets'); 
});

Answer 2

Я не думаю, что есть один метод jQuery, который вы могли бы использовать для этого, но похоже, что вы могли бы сделать это довольно легко, клонировав каждый из ваших DIVs в переменные, удалив оригиналы из dom и добавление клонированные версии обратно в тело в нужном порядке (с использованием трех стандартных методов Jquery):

var thisOne = $('div.thisOne').clone(); 
var thatOne = $('div.thatOne').clone(); 
$('div.thisOne, div.thatOne').remove(); 
$('body').append(thatOne + thisOne); 

Answer 3

метод показан в ответ @ RWL будет работать, но вы не должны явно удалить элемент из DOM.

Использование .append() переместит элемент в новое место.

Этот HTML:

<div id="widgets"> 
    <div id="widgetA">A</div> 
    <div id="widgetB">B</div> 
    <div id="widgetC">C</div> 
    <div id="widgetD">D</div> 
    <div id="widgetE">E</div> 
</div> 

С помощью этого скрипта применяется:

$(function() { 
    var widgetOrder = ['#widgetC','#widgetE','#widgetA','#widgetD','#widgetB']; 
    for (var widgetIndex = 0; widgetOrder.length; widgetIndex++) { 
     var singleWidget = widgetOrder[widgetIndex]; 
     $('#widgets').append($(singleWidget)); 
    } 
}); 

Будет ли результат в этом HTML:

<div id="widgets"> 
    <div id="widgetC">C</div> 
    <div id="widgetE">E</div> 
    <div id="widgetA">A</div> 
    <div id="widgetD">D</div> 
    <div id="widgetB">B</div> 
</div> 

Вы должны быть в состоянии адаптировать этот код с помощью JQuery cookie как this или this в соответствии с вашими требованиями.