jquery, list div-box above by clicking a button.

Question

hi,

i've got 20 div-boxes in a list

• [ div 1 ]
• [ div 2 ]
• [ div 3 ]

and so on.

every divbox should contain a button to change position with another div. one for up, one for down.

• [ div 1 <+><->]
• [ div 2 <+><->]
• [ div 3 <+><->]

when i press the <+> in divbox 3, the divbox#2 and #3 should change places.... like it would by add the "sortable" ui-component.

hope you could help me. its pretty hard for me :-)

Answer 1

Assuming the "+" buttons have the class "Up", and the "-" buttons have the class "Down".

$("div .Up").click(function() {
   var $this = $(this).closest("div");

   $this.after($this.prev());
});

$("div .Down").click(function() {
   var $this = $(this).closest("div");

   $this.before($this.next());
});

This is just a very simple implementation to get you started. There's more to do. For example, you should make sure you can't click "Up" in the first example.