将项目拖放到列表？ （单方面）

Question

我正在构建一个包含面板上项目的页面，您可以将其放入列表中。

• 我想放弃的项目在放入列表时不一定是不同的项目（不只是不同的CSS）。
• 右侧列表中的项目可以重新排序（我用jquery plugin覆盖了那部分）
• left 面板上的项目无法重新排序。
• 我希望能够获得（可排序）列表的更新顺序的普通数组（或json），以便稍后我可以将它与Angular一起使用。

我该怎么做？

DEMO：https://jsfiddle.net/10kfrj0h/

HTML

    <div class="left-panel">
        <h3>left Panel</h3>
        <div class="item-button">Table</div>
        <div class="item-button">Car</div>
        <div class="item-button">Tree</div>
        <div class="item-button">Star</div>
        <div class="item-button">Apple</div>
    </div>
    <div class="main-container sortable list">
        <div class="list-item tree">Tree
            <button type="button">delete</button>
        </div>
        <div class="list-item car">Car
            <button type="button">delete</button>
        </div>
        <div class="list-item apple">Apple
            <button type="button">delete</button>
        </div>
        <div class="list-item star">Star
            <button type="button">delete</button>
        </div>
        <div class="list-item table">Table
            <button type="button">delete</button>
        </div>
    </div>

JS

$('.sortable').sortable();