JQuery перемещает элементы div при загрузке страницы - PullRequest
Новая
       15

JQuery перемещает элементы div при загрузке страницы

0 голосов
/ 20 августа 2009

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

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

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

Ответы [ 3 ]

1 голос
/ 20 августа 2009

Техника, показанная в ответе @ 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, например , или , , чтобы удовлетворить ваши требования.

1 голос
/ 20 августа 2009

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

Использование той же разметки, что и ответ Марве: 

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

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

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

$(function() {
  var order = 'CEADB'; // from cookie
  $(
    $.map(order.split(''), function(letter) {
      return $('#widget' + letter);
    })
  ).appendTo('#widgets');
});
0 голосов
/ 20 августа 2009

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

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