javascript - DRAG 和 DROP 时两个不同容器的 Jquery UI 可排序顺序

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

Demo

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