jQuery div/box reposition (similar to hubpages capsules)

I'm looking for some help setting up a page with re-positional divs/boxes.

I开发者_开发问答 would like the functionality similar to how you can setup capsules with HubPages, which includes moving boxes:

1. Up
2. Down
3. Float right (making 2 columns)
4. Change to full width (if floated right)
5. Remove box
6. Insert new boxes

See screenshot for example:

I don't want to use drag-n-drop jQuery UI, but rather have buttons to reposition the boxes.

Example video: http://www.youtube.com/watch?feature=player_detailpage&v=7SnOtOwTYoE#t=74s

You could do a somewhat low-level DOM manipulation using only jQuery. For example, moving a box up:

$('a.move-up').click(function(){
  var prev = $(this).parent().prev();       // get the preceding element
  var self = $(this).parent().clone(true);  // copy the parent element, including all event handlers attached to itself and its children
  $(this).parent().remove();                // remove the parent
  prev.before(self);                        // place the parent before the preceding element to "move it up"
});

The code above assumes the markup below, but can easily be adapted to any other markup you may have ($(this).parents('div'), e.g.)

<ul>
 <li><a href="" class="move-up"></a></li>
 ...
</ul>

This is just a very crude example of how you could achieve such a result.

I think this links might help you out:

jQuery Sortable Move UP/DOWN Button

Sortable using a up/down link