Javascript 使用sortable在列表中获取值

当用户拖动列表上的项目时，我试图获取标记内的值。我对它进行了修改，通过localStoage获得一个唯一的值，以便跟踪列表，而不是像第1项那样的精确值。在此方面如有任何帮助，将不胜感激

HTML:

JSFiddle：

---

您是否仅限于javascript，还是也可以使用jQuery UI

展示了使用jQuery实现您的愿望是多么简单：

所以对于这个HTML

<ul id="sortable">
    <li>item 1</li>
    <li>item 2</li>
    ...
</ul>

在ONED回调上，您可以使用event.item获取拖动的列表项，并使用textContent获取内部文本：

var el=document.getElementById'items'； Sortable.createl{ 组：本地存储示例， ONED：函数事件{ var draggedItemText=event.item.textContent； alertdraggedItemText； }, 商店：{ get：可排序的函数{ var order=localStorage.getItemsortable.options.group； console.logsortable.toArray； 退货订单？订单。拆分“|”：[]； }, set：函数可排序{ 变量顺序=sortable.toArray； localStorage.setItemsortable.options.group，order.join'|'； } } } 项目1 项目2 项目3 项目4 项目5

---

我仅限于javascript在这种情况下，@Moogs现在似乎有一个很好的答案。

var el = document.getElementById('items');
Sortable.create(el, {
    group: "localStorage-example",
    store: {
        get: function (sortable) {
            var order = localStorage.getItem(sortable.options.group);
            return order ? order.split('|') : [];
            console.log(order);
        },
        set: function (sortable) {
            var order = sortable.toArray();
            localStorage.setItem(sortable.options.group, order.join('|'));
            console.log(order);
        }
    }
})

<ul id="sortable">
    <li>item 1</li>
    <li>item 2</li>
    ...
</ul>

$('#sortable').sortable({
    update: function(event, ui) {
        console.log("You moved: " + ui.item.html())}
});