使用 sortable 在列表中获取值答案

【问题标题】：getting value inside the list using sortable使用 sortable 在列表中获取值
【发布时间】：2015-06-18 00:38:58
【问题描述】：

当用户拖动列表中的项目时，我试图获取 <li> 标记内的值。我已对其进行了修改以通过 localStoage 获取唯一值，以便跟踪列表，而不是像 "Item 1" 这样的确切值。任何帮助将不胜感激。

HTML：

<ul id="items">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
</ul>

JS：

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);
        }
    }
})

JSFiddle：

http://jsfiddle.net/tz89um73/

【问题讨论】：

标签： javascript arrays function local-storage jquery-ui-sortable

【解决方案1】：

您是否仅限于使用 javascript 或者您也可以使用 jQuery UI？

This fiddle 展示了使用一些 jQuery 实现您的愿望是多么简单：)

所以对于这个 HTML

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

我们只需要 4 行：

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

【讨论】：

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

【解决方案2】：

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

var el = document.getElementById('items');
Sortable.create(el, {
    group: "localStorage-example",

    onEnd: function (event) {
        var draggedItemText = event.item.textContent;
        alert(draggedItemText);
    },
    
    store: {
        get: function (sortable) {
            var order = localStorage.getItem(sortable.options.group);
            console.log(sortable.toArray());
            return order ? order.split('|') : [];
        },
        set: function (sortable) {
            var order = sortable.toArray();
            localStorage.setItem(sortable.options.group, order.join('|'));
        }
    }
})

<script src="http://rubaxa.github.io/Sortable/Sortable.js"></script>
<ul id="items">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
</ul>

【讨论】：