Angularjs ui-sortable - _connectedSortables 未定义答案

【问题标题】：Angularjs ui-sortable - _connectedSortables is undefinedAngularjs ui-sortable - _connectedSortables 未定义
【发布时间】：2016-08-07 14:12:58
【问题描述】：

我有 2 个可排序的列表，我正在尝试将它们连接起来，以便可以将项目从一个列表拖到另一个列表。当我拖动一个项目时，我在 sortable.js 中得到一个错误。 callbacks.update 正在引用 ui.item.sortable._connectedSortables 但它是未定义的，所以当它到达 getElementScope 函数时，它会抛出错误。

更新

关于我是如何来到这里的，我还有一点背景知识。最初，我有这个工作。我设置了一个可拖动列表并将其连接到可排序列表，一切正常。然后我遇到的问题是在可排序列表中拖动时，模型没有得到更新。一旦我添加了 ui-sortable 标记，模型就会在重新排序列表时开始更新，但在此更改之后是前面提到的错误开始发生的时间。两段代码之间的区别在第一个示例中，我正在设置这样的排序：

$('#testQuestionsTEI').sortable({//code});

并且标记中没有 ui-sortable 属性。现在我在标记中有 ui-sortable="sortable" 并有 $scope.sortable = {//code}。

我的第一个列表是接受列表。

<div id ="testQuestionsTEI" class="connectedSortable" ui-sortable="sortable" ng-model="test.questions" style="overflow-x:auto; overflow-y: scroll">
                            <div class="TestQuestion" ng-repeat="currQuestionObj in test.questions" style="border:1px solid;padding:7px 7px 7px 7px;margin-top:3px;margin-bottom:3px">
                                <!--do some stuff-->
                            </div>
                        </div>

设置可排序的js在这里...

 $scope.sortable = {
    placeholder: 'questionPlaceholderTEI',
    connectWith: '.connectedSortable',
    start: function (event, ui) {
        ui.item.startPos = ui.item.index();                 //add startPos to item to use in stop event
    },
    stop: function (event, ui) {
        //Do stuff
        }

    },
    update: function (event, ui) {
        //Do stuff
    }
};

第二个列表是在 ajax 调用之后构建的，它的 html 是...

<div id="SearchResultItems" ui-sortable="sortable" class="col-md-12 connectedSortable" style="border:1px solid;padding:0 5px 0 5px;" ng-cloak>
<div class="SearchResultItem" index="{{currQuestionObj.id}}" QuestionID="{{currQuestionObj.questionId}}" ngc-done="'setupDraggableItems'" ng-repeat="currQuestionObj in ItemSearchResult.questions" style="border:1px solid;padding:7px 7px 7px 7px;margin-top:3px;margin-bottom:3px" >
    <!--more stuff-->
</div>

数据返回后，我设置了可拖动和可排序

function setupDraggableItems() {
$('div.SearchResultItem').draggable({
    revert: 'clone',
    scroll: false,
    helper: 'clone',
    cursor: 'move',
    appendTo: 'body',
    connectToSortable: '#testQuestionsTEI',
});

$('#SearchResultItems').sortable({
    placeholder: 'questionPlaceholderTEI',
    connectWith: '.connectedSortable'
});
}

我也尝试过不使用 .draggable，但我得到了一个不同的错误。在 callbacks.update 中有对 ui.item.sortable.isCanceled() 的引用，错误是“对象不支持属性或方法'isCanceled'

【问题讨论】：

标签： angularjs jquery-ui-sortable angular-ui-sortable

【解决方案1】：

我发现问题在于，在创建可排序对象时，我执行它们的两种不同方式实际上是不同的实现。一个是直接使用 Jquery-ui，另一个是 Angular 的 ui-sortable。所以我回到使用用户 Jquery-ui 的 $('#testQuestionsTEI').sortable 。通过调用 $scope.$apply() 修复了模型未更新的另一个问题。

【讨论】：