排序后从列表中获取可排序的Jquery-ui数据

I'm having a problem with getting the sorted data form id="#playlist_save".

id ="#playlist_save" starts with an empty <ol></ol> list.

Then the user can sort the items they need form :

<ol class="simple_with_animation vertical">
    $videos
</ol> 

To the list:

<div class="group">
    <ol id="playlist_save" class="simple_with_animation vertical">
    </ol>
</div>

But when I want to save the data after it has been sorted, I get no data from

console.log(postdata);

Please help me out! :(

For a better understanding visit: http://music-hot40.com/Playlist.php

PHP

 $ii = 1;
foreach ($searchResponse['items'] as $searchResult) {
    switch ($searchResult['id']['kind']) {
        case 'youtube#video':
            $videos .= sprintf('<li id="listItem_%u"><img alt="youtube_image" src="http://img.youtube.com/vi/%s/hqdefault.jpg" style="height: 120px; width: 120px;"></img><font color="#953e31">%s</font> %s</li>', $ii, $searchResult['id']['videoId'], $searchResult['snippet']['title'], $searchResult['id']['videoId']);
            $ii++;
            break;
    }
}
$htmlBody .= <<<END
<div class="group">
    <ol class="simple_with_animation vertical">
        $videos
    </ol>
</div>

END;

NEXT GROUP

<div class="group">
    <ol id="playlist_save" class="simple_with_animation vertical">
    </ol>
</div>

Javascript

var adjustment;
$(document).ready(function () {
    $("ol.simple_with_animation").sortable({
        group: 'group',
        pullPlaceholder: false,
        // animation on drop
        onDrop: function ($item, container, _super) {
            var $clonedItem = $('<li/>').css({height: 0});
            $item.before($clonedItem);
            $clonedItem.animate({'height': $item.height()});

            $item.animate($clonedItem.position(), function () {
                $clonedItem.detach();
                _super($item, container);
            });
        },
        // set $item relative to cursor position
        onDragStart: function ($item, container, _super) {
            var offset = $item.offset(),
                    pointer = container.rootGroup.pointer;

            adjustment = {
                left: pointer.left - offset.left,
                top: pointer.top - offset.top
            };

            _super($item, container);
        },
        onDrag: function ($item, position) {
            $item.css({
                left: position.left - adjustment.left,
                top: position.top - adjustment.top
            });
        }
    });
});

Save data from #playlist_save to database (not yet) AND Log data in console.log

 $(function () {
            // log data
            $("#playlist_save").sortable({
                update: function (event, ui) {
                    var postdata = $(this).sortable('serialize');
                    console.log(postdata);
                }
            });
        });

You have two jquery plugins with the name sortable, and the one that's defined the latest doesn't have update. This file:

<script src="js/jquery-sortable.js"></script>

calls a sortable plugin that has many function, but not update. When you run $(...).sortable(), you're calling this plugin, so update won't be triggered as it is in the standard jquery-ui sortable.

If you want to keep features of this custom sortable on one list, but use update on another, you should have two different names for your plugins so there's no confusion. Like this for example:

In this file js/jquery-sortable.js change last line to:

}(jQuery, window, 'customSortable');

Then in you javascript, call it like this:

$("ol.simple_with_animation").customSortable({