0

html

<ul id="user-stream-list" class="user-stream-list ui-sortable">
    <li data-id="36" data-oid="0" class="feed" style="position: relative; left: 0px; top: 0px;"><span class="cat-title" data-title="36">Tech Crunch<span class="edit-title" style="right: 35px;">rename</span><span class="delete-title">×</span></span>
        <ul class="ui-sortable">
        </ul>
    </li>
    <li data-id="37" data-oid="1" class="feed" style="position: relative; left: 0px; top: 0px;"><span class="cat-title" data-title="37">Apple<span class="edit-title">rename</span></span>
        <ul class="ui-sortable">
            <li class="feed sub"><a data-uid="18" data-fid="11" href="http://appleinsider.com/appleinsider.rss"><img src="https://www.google.com/s2/favicons?domain=appleinsider.com" class="favicon"><span class="title">AppleInsider - Frontpage News</span><span class="options"><span data-fid="11" class="addcat">+</span><span class="delete">×</span></span></a></li>
        </ul>
    </li>
</ul>

jQuery

$( "#user-stream-list" ).sortable({
        update : function () {
            var order = $('#user-stream-list').sortable('serialize');
            console.log(order);
            //$("#info").load("process-sortable.php?"+order);
        }
    });

D B

 id     uid     oid     cname 
 20     36       0      Tech Crunch
 21     37       1      Apple

当我重新排列以下我的 console.log() 返回时(an empty string)，我不知道为什么它没有显示任何内容。jsFiddle

我试图传递 data-id 和 data-oid 以便在 php 中我可以将两者绑定起来处理到我的数据库。

4

1 回答 1

2

这是因为元素的 id 不符合要求的格式，id 应该有两部分，由下划线、等号或连字符分隔

来自文档

注意：如果 serialize 返回一个空字符串，请确保 id 属性包含下划线。它们必须采用以下形式：“set_number” 例如，具有 id 属性“foo_1”、“foo_5”、“foo_2”的 3 元素列表将序列化为“foo[]=1&foo[]=5&foo[]=2”。您可以使用下划线、等号或连字符来分隔集合和数字。例如“foo=1”、“foo-1”和“foo_1”都序列化为“foo[]=1”。

前任

<ul id="user-stream-list" class="user-stream-list ui-sortable">
    <li id="o_36" class="feed" style="position: relative; left: 0px; top: 0px;"><span class="cat-title" data-title="36">Tech Crunch<span class="edit-title" style="right: 35px;">rename</span><span class="delete-title">×</span></span>
        <ul class="ui-sortable">
        </ul>
    </li>
    <li id="o_37" class="feed" style="position: relative; left: 0px; top: 0px;"><span class="cat-title" data-title="37">Apple<span class="edit-title">rename</span></span>
        <ul class="ui-sortable">
            <li class="feed sub"><a data-uid="18" data-fid="11" href="http://appleinsider.com/appleinsider.rss"><img src="https://www.google.com/s2/favicons?domain=appleinsider.com" class="favicon"><span class="title">AppleInsider - Frontpage News</span><span class="options"><span data-fid="11" class="addcat">+</span><span class="delete">×</span></span></a></li>
        </ul>
    </li>
</ul>

演示：小提琴

根据更新

我认为在这里使用toArray选项会更好

$("#user-stream-list").sortable({
    update: function () {
        var ids = $(this).sortable('toArray', {
            attribute : 'data-id'
        });
        console.log(ids);
        var oids = $(this).sortable('toArray', {
            attribute : 'data-oid'
        });
        console.log(oids);
        //$("#info").load("process-sortable.php?"+order);
    }
});

演示：小提琴

于 2013-10-02T13:56:31.290 回答