Jquery перетащить ДИВ-х

Question

У меня есть HTML, как:

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

Таким образом, это представляет собой число строк, а каждая строка содержит те же элементы. У меня также есть кнопки для добавления новых строк и удаления строк. Это работает.

Теперь я хотел бы добавить возможность перемещения строк, например, перемещать съемный ингредиент-контейнер-1 после съемного ингредиента-контейнера-3.

У кого-нибудь есть пример или учебник о том, как это сделать в jQuery, на основе моего примера?

Спасибо, L

Answer 1

jQueryUI имеет sortable плагин, который вы можете использовать, чтобы добиться этого эффекта чисто и легко.