[英]Angular ui sortable: can't drag correctly in nested items
嗨,我已經在項目的surveys module
中實現了嵌套可排序項目設置。 即,我可以對單個問題進行排序,然后我可以創建一個空組,將單個問題放入其中,這樣我就可以填充組,也可以按層次結構對組進行排序。 像這樣:
這是我的代碼:
HTML:
<!-- Group type questions: -->
<div class="row connector group-type-question-min-height-compulsory myHandle" ng-if="question.type == allQuestionTypes.group" ui-sortable="sortableOptionsGroup" ng-model="question.questions">
<div class="col-md-6 col-sm-6 question-overview">
<div class="ellipsis">
<i class="fa fa-bars"></i>
<input type="checkbox" ng-value="0" ng-model="question._selected" />
<span ng-attr-title="{{question.name}}" ng-if="question.type == allQuestionTypes.group">
<b>{{question.name}}</b>
</span>
</div>
</div>
<div class="col-md-6 col-sm-6 answer-overview pull-right word-wrap">
<span class="badge">{{showQuestionTypeText(question.type)}}</span>
<button type="button" ng-if="question.type != allQuestionTypes.group" class="button btn btn-success btn-sm" ng-click="$event.stopPropagation(); editSurveyQuestion(question, $index)">
{{app.translateByLocale('label_edit')}}
</button>
<button type="button" ng-if="question.type == allQuestionTypes.group" class="button btn btn-success btn-sm" ng-click="$event.stopPropagation(); openModal(question, $index)">
{{app.translateByLocale('label_edit')}}
</button>
<span class="delete-icon">
<button class="btn btn-sm btn-danger" ng-click="$event.stopPropagation(); removeGroup(question)">
<i class="fa fa-trash"></i>
</button>
</span>
</div>
<div class="col-md-12 col-sm-12 question-overview group-type-question-bar" ng-if="question.questions.length == 0">
<div class="ellipsis text-center">
<i class="fa fa-info-circle"></i>
<span>
{{app.translateByLocale('group_questions_drag_info')}}
</span>
</div>
</div>
<div ng-repeat="subQuestion in question.questions" class="group-type-question">
<div class="col-md-5 col-sm-5 question-overview" style="margin-left: 34px">
<div class="ellipsis">
<i class="fa fa-bars myHandle"></i>
<!-- <input type="checkbox" ng-value="0" ng-model="subQuestion._selected" /> -->
<span ng-attr-title="{{subQuestion.text}}">
{{subQuestion.text}}
</span>
</div>
</div>
<div class="col-md-6 col-sm-6 answer-overview pull-right word-wrap">
<span class="badge">{{subQuestion.predefined_mcq_type.title}}</span>
<span class="badge">{{showQuestionTypeText(subQuestion.type)}}</span>
<button type="button" class="button btn btn-success btn-xs" ng-click="$event.stopPropagation(); editSurveyQuestion(subQuestion, $index)">
{{app.translateByLocale('label_edit')}}
</button>
<span class="delete-icon">
<button class="btn btn-xs btn-danger" ng-click="$event.stopPropagation(); removeSurveyGroupQuestion(subQuestion, question.questions)">
<i class="fa fa-trash"></i>
</button>
</span>
</div>
</div>
</div>
這些是控制器的相關功能:
JS:
function sortableOptionsGroup(scope) {
let sortableGroup = {
handle: '.myHandle',
receive: function(event, ui) {
sortingReceivedFunction(event, ui, scope);
},
remove: function(event, ui) {
sortingRemovedFunction(event, ui, scope);
},
axis: 'y',
'ui-floating': false,
dropOnEmpty: true,
cursor: 'move',
tolerance: 'pointer',
connectWith: '.connector'
}
return sortableGroup;
}
/**
* invoked when an item is added to the main group
*
* @param {obj} event
* @param {obj} ui
* @param {obj} scope
*
* @returns none
*/
function sortingReceivedFunction(event, ui, scope) {
let obj = ui.item.sortable.model;
let index = ui.item.sortable.index;
let group_type = null;
let invalidIncomingQuestion = false;
//Group Questions Types Maintaining
// when second and more questions are added:
if (ui.item.sortable.droptargetModel.length >= 1) {
_.map(ui.item.sortable.droptargetModel, function(questionObject) {
if (questionObject.type == allQuestionTypes.mcq && ui.item.sortable.model.type == allQuestionTypes.mcq && (questionObject.predefined_mcq_type.key != ui.item.sortable.model.predefined_mcq_type.key)) {
invalidIncomingQuestion = true;
}
});
if (invalidIncomingQuestion) {
showErrorMessage(localeService.translateByLocale("group_question_error4"));
cancelDraging(index, obj, scope, ui);
return;
} else if (ui.item.sortable.droptargetModel.length == maxQuestionLimitInGroup) {
showErrorMessage(localeService.translateByLocale("group_question_error3"));
cancelDraging(index, obj, scope, ui);
} else if (incomingMcqQuestionValidation(ui.item.sortable.model)) {
cancelDraging(index, obj, scope, ui);
} else if (incomingCustomQuestionValidation(ui.item.sortable.model)) {
cancelDraging(index, obj, scope, ui);
} else {
let groupQuestionId = ui.item.sortable.model.id;
scope.questions.data.forEach(function(item, i, val) {
if (scope.questions.data[i].id == groupQuestionId) {
scope.questions.data[i].isSelected = false;
}
});
}
}
// when first question is added:
else if (incomingMcqQuestionValidation(ui.item.sortable.model)) {
cancelDraging(index, obj, scope, ui);
} else if (incomingCustomQuestionValidation(ui.item.sortable.model)) {
cancelDraging(index, obj, scope, ui);
} else {
let groupQuestionId = ui.item.sortable.model.id;
scope.questions.data.forEach(function(item, i, val) {
if (scope.questions.data[i].id == groupQuestionId) {
scope.questions.data[i].isSelected = false;
}
});
}
}
/**
* invoked when an item is removed from the main group
*
* @param {obj} event
* @param {obj} ui
* @param {obj} scope
*
* @returns none
*/
function sortingRemovedFunction(event, ui, scope) {
let groupQuestionId = ui.item.sortable.model.id;
scope.questions.data.forEach(function(item, i, val) {
if (scope.questions.data[i].id == groupQuestionId) {
scope.questions.data[i].isSelected = true;
}
});
}
一切正常,但問題很少。
1-當有兩個相鄰的組並且我嘗試將單個問題拖到較高的組中時,總是將其添加到較低/第二組中。 如圖所示:我here is the text for question
添加的here is the text for question
group 1
here is the text for question
但在group 2
group 1
添加here is the text for question
。 group 1
模型在控制台中
2-我無法將問題分組。
有人可以幫我嗎? 我一直在努力。
我通過在GitHub存儲庫中提出一個問題來尋找支持,所有者提出的解決方案有點混亂。 最終,我不得不在代碼庫中更改整個庫。 這是我用的.. https://github.com/marceljuenemann/angular-drag-and-drop-lists
探索它。 希望它也對您有幫助。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.