Sortable js настройка для сетки значков в список избранного

Question

Я прочитал документы Sortable JS, но мне все еще нужно понять, как его инициировать в следующем случае:

У меня есть домашняя страница, использующая сетку CSS из 4 строки и 3 столбца.

Каждая строка имеет вид:

<div class="row">
  <div class="one-third column">
    <p class="center">
      <a href="#">
        <span><svg class="icon"><path d="" /></svg></span>
        Label
      </a>
    <p>
  </div>
  <div class="one-third column">
    <p class="center">
      <a href="#">
        <span><svg class="icon"><path d="" /></svg></span>
        Label
      </a>
    <p>
  </div>
  <div class="one-third column">
    <p class="center">
      <a href="#">
        <span><svg class="icon"><path d="" /></svg></span>
        Label
      </a>
    <p>
  </div>
</div>

<div class="row">
  <div class="one-third column">
...    

Пользователь должен иметь возможность перетаскивать любой значок из сетки в верхнюю часть nav, чтобы добавить его (клон?) в качестве избранного .

<nav>
  <ul>
    <li><a href="#"><svg class="icon"><path d="" /></svg></a></li>
    <li><a href="#"><svg class="icon"><path d="" /></svg></a></li>
  </ul>
</nav>

Демо Sortable JS grid содержит все перетаскиваемые элементы как прямые дочерние элементы элемента, передаваемого в Sortable, который отличается из моего дела.