如何在JavaScript中链接两个可排序列表？

Question

我正在使用RubuXa的Sortable创建一个可排序列表。我试图将此列表链接到另一个列表，以便当我更新可排序列表（更改顺序/删除项）时，其他列表更新以反映更改。

即。当用户将“项目标题1”拖动到可排序列表中的位置＃2时，显示列表将更新以显示新位置。

HTML

    <ul id="sortable-list">
      <li>Item Heading 1</li>
      <li>Item Heading 2</li>
      <li>Item Heading 3</li>
    </ul>

    <ul id="display-list">
      <li>
        <h3>Item Heading 1</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      </li>
      <li>
        <h3>Item Heading 2</h3>
        <p>Sed ullamcorper varius finibus. Cras semper libero a nibh laoreet.</p>
      </li>
      <li>
        <h3>Item Heading 3</h3>
        <p>Nunc tincidunt pharetra augue, non tincidunt nunc cursus vitae.</p>
      </li>
    </ul>

JavaScript

    $(function () {
      var el = document.getElementById('sortable-list');
        var sortable = Sortable.create(el, {
        group: "name",
        store: {
            get: function (sortable) {
                var order = localStorage.getItem(sortable.options.group.name);
                return order ? order.split('|') : [];
            },
            set: function (sortable) {
                var order = sortable.toArray();
                localStorage.setItem(sortable.options.group.name, order.join('|'));
            }
        },
        delay: 0,
        animation: 150
        });
    });

JSFiddle