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

Question

我在获取排序数据表单 id="#playlist_save" 时遇到问题.

id ="#playlist_save"以空 <ol></ol> 开头列表。

然后用户可以对他们需要的项目进行排序:

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

前往列表:

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

但是当我想在排序后保存数据时，我没有得到任何数据

console.log(postdata);

请帮帮我! :(

为了更好地了解，请访问: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>

结束；

下一组

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

保存来自#playlist_save的数据到数据库(尚未)并将数据记录到 console.log

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

Answer 1

您有两个名为 sortable 的 jquery 插件，最新定义的插件没有 update。该文件:

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

调用一个sortable插件，该插件有很多功能，但不更新。当您运行 $(...).sortable() 时，您正在调用此插件，因此不会像标准 jquery-ui sortable 中那样触发更新。

如果您想在一个列表上保留此自定义可排序的功能，但在另一个列表上使用更新，则您的插件应该有两个不同的名称，这样就不会混淆。例如这样:

在此文件 js/jquery-sortable.js 中，将最后一行更改为:

}(jQuery, window, 'customSortable');

然后在你的 JavaScript 中，这样调用它:

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