Привет, я реализовал настройку вложенных сортируемых элементов в 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>
И это Relavant Функции отКонтроллер:
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 в group 1, но он добавил в group 2.Модель group 1 находится в консоли
Группы после перетаскивания вопроса в группу 1
2 - Я не могу отсортировать вопросы в группе.
Может ли кто-нибудь помочь мне здесь в этом.Я очень старался на этом.