JQuery reposition div elements on page load

Question

Hi,

I am implementing a portlet/widget JQuery interface using Interface and JQuery. The user drags and drops widgets adn the screen can handle it. I am able to use serialize which displays the order of the div elements on the screen. I can save this in a cookie or DB - that doesnt matter yet.

My question is how is it possible to load a page repositioning the divs to match the order in the cookie/DB? A cookie based example would be nice, but it doesn't really matter.

Is there a certain JQuery method I can call that is able to reposition the divs in the order I want them to be?

Answer 1

I don't think there's a single jQuery method that you could use to do this, but it seems like you could get this done pretty easily by cloning each of your DIVs to variables, removing the originals from the dom, and appending the cloned versions back to the body in the desired order (using three standard jQuery methods):

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

Answer 2

The technique shown in @RwL's answer will work, but you don't have to explicitly remove the element from the DOM.

Using .append() will move the element to its new location.

This 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>

With this script applied:

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

Will result in this 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>

You should be able to adapt this code using a jQuery cookie plugin like this or this to meet your requirements.

Answer 3

You can do this with using a single appendTo or prependTo call (makes no difference which) - as long as you can build up a specially ordered jQuery object first.

Using the same markup as Marve's answer:

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

You'd probably need to start with an empty jQuery object (use $([])) and iterate over the values from your cookie rather than being able to chain things like I have done above though.

Actually, thinking about it...

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