[英]undefined new items appear while reordering a list with ui-sortable and angularJS
[英]Angularjs ui-sortable - _connectedSortables is undefined
我有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'
我發現問題是,當創建可排序對象時,我執行它們的2種不同方法實際上是不同的實現。 一種是直接使用Jquery-ui,另一種是angular的ui-sortable。 所以我回到使用$('#testQuestionsTEI')。sortable用戶Jquery-ui。 不會更新模型的另一個問題是通過調用$ scope。$ apply()來解決的。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.