Question

I have HTML like:

  <div class="form-container-ingredients">
     <div id="removable-ingredient-container-1"> 
       ... other elements
     </div>
     <div id="removable-ingredient-container-2"> 
       ... other elements
     </div>
     <div id="removable-ingredient-container-3"> 
       ... other elements
     </div>
  </div>

So this represents a number of rows, and each row contains the same elements. I also have buttons to add new rows and remove rows. This works.

Now I would like to add the possibility to move rows, for example, move removable-ingredient-container-1 after removable-ingredient-container-3.

Does anyone has an example or tutorial on how to do that in jQuery, based on my example?

Thank you,
L

Answer 1

jQueryUI has a sortable plugin that you can use to achieve that effect cleanly and easily.