jQuery UI对于两个不同容器的可排序顺序，而DRAG和DROP

Question

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

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

Answer 1

演示

您不需要手动遍历可排序元素，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和新的列表元素位置信息来更新数据库。