Question

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

更新了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>

但是现在我的问题是必须维护两个不同的拖放容器和单独的订单，并且那些应该在它们之间有互连。我已经完成拖放但无法单独获取订单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和新的列表元素位置信息来更新您的数据库。

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

1 个答案: