JQuery перетащить Div's

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 , который вы можете использовать для достижения этого эффекта легко и просто.