图标网格到收藏夹列表的Sortablejs设置

Question

我阅读了SortableJS文档，但是在以下情况下，我仍然必须了解如何初始化它：

我有一个使用CSS grid的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>

SortableJS grid demo具有所有可拖动元素，它们是传递给Sortable的元素的直接子元素，与我的情况不同。