1

我的视频编辑器有两个不同的容器。一个容器用于维护用户上传的视频缩略图。我已经在同一个容器内进行了拖放，并使用以下脚本为我的未来更新了数据库中的订单

    <script src="jquery/jquery-ui-1.8.custom.min.js"></script>

     <script type="text/javascript">
                $(document).ready(function() {
                    j$132('#page .sortable-list').sortable({
                        update: function(event, ui) {
                            var order = [];
                            $('#image-list li').each(function(e) {
                                order.push($(this).attr('id') + '=' + ($(this).index() + 1));
                            });
                            var positions = order.join(';')
                        },
                        connectWith: '#page .sortable-list',
                        placeholder: 'placeholder',
                    });
                });
            </script>
<ul id="image-list" class="sortable-list">

                        </ul>

但是现在我的问题是必须维护两个具有单独订单的不同拖放容器，并且它们之间应该有互连。我已经完成了拖放，但无法单独获取订单 ID。这些正在发生冲突。

4

1 回答 1

2

演示

您不需要手动循环遍历可排序的元素，jquery UI.sortable()有一个 toArray方法，默认情况下将返回其 ID 的数组。

如果您使用此方法，将更容易区分列表，因为您可以单独监听它们的更改。如果只有一个列表发生更改，则update处理程序将触发一次，如果将元素从一个列表拖到另一个列表，它将同时触发两个列表。

$('.sortable-list').sortable({
  connectWith: '.sortable-list',
  update: function(event, ui) {
    var changedList = this.id;
    var order = $(this).sortable('toArray');
  }
});

无论哪种方式，您都需要为列表提供一些识别属性以区分它们，例如 ID。然后，您可以使用此 ID 和新的列表元素位置信息来更新您的数据库。

于 2013-09-10T05:44:44.633 回答