Question

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

更新

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

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

并且标记中没有ui-sortable属性。现在我有ui-sortable =＆＃34; sortable＆＃34;在标记中并使用$ 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（）的引用，错误是＆＃34;对象不支持属性或方法＆＃39; isCanceled＆＃39;

Answer 1

我发现问题在于，在创建sortables时，我所做的两种不同的方式实际上是不同的实现。一个是直接使用Jquery-ui，另一个是角度的ui-sortable。所以我回到使用$（'＃testQuestionsTEI'）。可排序的用户Jquery-ui。通过调用$ scope。$ apply（）。

来修复模型未更新的另一个问题

Angularjs ui-sortable - _connectedSortables未定义

1 个答案: