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

Posted 2023-05-09

【中文标题】排序后从列表中获取可排序的 Jquery-ui 数据

【英文标题】：Get Sortable Jquery-ui data from list after sorting

【发布时间】：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  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);
                
            );
        );

【参考方案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(