jquery - 在我刷新页面之前将新项目移至新添加的列表时出现问题

Question

我正在使用 jquery 模板动态创建一个列表(列)，其中包含不同的项目(它们也是动态添加的)，并且还创建了一个插件，可以帮助将项目从一个列表移动到第二个或第三个列表，即使用 jquery ui 拖动 & drop，但在将项目拖放到新添加的列表时遇到问题。

场景:当我单击“添加列表”按钮时，它会在页面上创建列表。因此，我添加了一个名为“list1”的列表，每个列表都有一个用于在列表中添加项目的按钮，因此通过按两次按钮，我在“list1”上添加了 2 个项目。并且项目是可移动/可拖动/可放置的。现在添加了第二个名为“list2”的列表。因此，如果我尝试将项目从“list1”移动到“list2”，它不会执行此操作，而是将项目移动到“list1”。这是在没有重新加载页面的情况下发生的，但如果我刷新页面并执行相同的操作，现在该项目可以移动到“list2”。这是我用于拖放目的的代码(以下代码放置在我的 jquery 插件中):

var id = $('.' + options.dropID);
            var id0 = options.dropID;

            $('.' + options.dropID).sortable({

                helper: "clone",
                revert: "invalid", // go back to original droppable when drop outside drop area
                connectWith: '.' + options.dropID,
                over: function (event, ui) {

                    // may be usefull
                    var sortableElement = this;

                    var dataToSave = {
                        name: ui.item.text(),
                        objid: ui.item.attr('title'), // id has changed for array so use original id stored in title
                        thisID: $(sortableElement).attr('id'),
                        array: $(sortableElement).sortable("serialize")
                    };

                    // save the new data
                    saveData(dataToSave);
                }
            });

所以我注意到一个行为，不同的行为在这里:- 添加了一个项目并且没有页面加载，它添加了以下 div

<div id="337" class="cardItem droppable">         </div>

因此，如果我尝试在此处添加项目，它不允许我这样做。

• 页面加载后，将上面的div修改为:

它将 ui-sortable 添加到类属性中。所以我尝试搜索这个ui-sortable是如何或何时添加的，它是通过jquery的sortable方法完成的。

在页面加载时，我像这样调用插件:

    <script type="text/javascript">
        $(window).bind("load", function () {
            $('.laneList').ListDragandDrop();
        });
    </script>

我还在添加新列表或项目后调用了ListDragandDrop()，但它没有将ui-sortable添加到div，并且我必须刷新页面，以便它可以使“list2” ' 可丢弃的。你能告诉我我做错了什么或者我应该修改什么才能使它工作吗？

Answer 1

JQuery 可排序似乎已在最新版本中修复了创建后添加的项目。如果您仍然遇到此问题，请添加 jsfiddle，以便我们帮助调试。