jQuery div/box reposition (similaire aux capsules hubpages)

Question

Je cherche de l'aide pour configurer une page avec des divs/cases repositionnelles.

Je voudrais que la fonctionnalité similaire à la façon dont vous pouvez capsules de configuration avec HubPages, qui comprend des boîtes en mouvement:

1. Up
2. vers le bas
3. flotteur droit (faire 2 colonnes)
4. Modification pleine largeur (si flottant à droite)
5. Enlever boîte
6. Insérer de nouvelles boîtes

Voir capture d'écran par exemple:

Je ne veux, mais plutôt avoir de ne pas utiliser le glisser-déposer jQuery UI, boutons pour repositionner les cases.

Exemple vidéo: http://www.youtube.com/watch?feature=player_detailpage&v=7SnOtOwTYoE#t=74s

Answer 1

Vous pourriez faire une manipulation DOM quelque peu faible niveau en utilisant seulement jQuery. Par exemple, le déplacement d'une boîte en place:

$('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" 
}); 

Le code ci-dessus suppose le balisage ci-dessous, mais peut facilement être adapté à tout autre balisage que vous pourriez avoir ($(this).parents('div'), par exemple)

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

Ceci est juste un exemple très grossier de la façon dont vous pourriez obtenir un tel résultat.

Answer 2

Je pense que ce lien peut vous aider:

jQuery Sortable Move UP/DOWN Button

Sortable using a up/down link