Javascript 拖放时两个不同容器的Jquery UI可排序顺序

我的视频编辑器有两个不同的容器。一个容器用于维护用户上传的视频缩略图。我在同一个容器中进行了拖放操作，并使用以下脚本更新了DB中的订单，以备将来使用

    <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>

$（文档）.ready（函数（）{
j$132（“#page.sortable list”）。可排序({
更新：功能（事件、用户界面）{
var顺序=[]；
$（“#图像列表li”）。每个（函数（e）{
order.push（$（this.attr（'id'）+'='+（$（this.index（）+1））；
});
变量位置=order.join（“；”）
},
连接方式：“#第页.可排序列表”，
占位符：“占位符”，
});
});

但现在我的问题是，我必须维护两个不同的拖放容器，其中包含单独的订单，而且这些容器之间应该有互连。我已经完成了拖放操作，但无法单独获取订单ID。这些都存在冲突

您不需要手动遍历可排序元素，jquery UI的

.sortable（）

有一个方法，默认情况下会返回它们的ID数组

如果您使用此方法，将更容易区分列表，因为您可以单独侦听它们的更改。如果只有一个列表发生更改，则

更新

处理程序将触发一次，如果将一个元素从一个列表拖到另一个列表，它将为两个列表触发

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

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