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

【问题标题】：Get Sortable Jquery-ui data from list after sorting排序后从列表中获取可排序的 Jquery-ui 数据
【发布时间】：2015-11-24 02:06:15
【问题描述】：

我在获取排序数据表单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);
                }
            });
        });

【问题讨论】：

标签： php jquery mysql sql jquery-ui

【解决方案1】：

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

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

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

如果您想将此custom sortable 的功能保留在一个列表中，但在另一个列表中使用update，则您的插件应该有两个不同的名称，以免混淆。比如这样：

在这个文件中 js/jquery-sortable.js 将最后一行更改为：

}(jQuery, window, 'customSortable');

然后在你的javascript中，这样称呼它：

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

【讨论】：