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获取内部文字：

＆＃13;

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

＆＃13;

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

＆＃13;

使用sortable在列表中获取值

2 个答案: