使用 sortable 在列表中获取值

Question

我试图在用户拖动列表中的项目时获取 <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/

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

Answer 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>

使用 sortable 在列表中获取值

getting value inside the list using sortable

javascript

arrays

function

local-storage

jquery-ui-sortable