Question

您好我已在我的项目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>

这些是来自Controller的相关函数：

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。 select regexp_substr(str, '([0-9]+ )([^0-9]*$)', 1, 1, 'i', 2) from ( select 'WORK 123 John Smith' str from dual union select '10.01.D 5132 3330 Selena Amirez' from dual union select '300 TK30 000 Edvard Ramirez' from dual )的模型在控制台中

Groups after dragging a question in group 1

2-我无法对小组内的问题进行排序。

有人可以帮助我吗？我一直在努力尝试。

Answer 1

我通过在GitHub存储库中提出问题来寻求支持，所有者提出的解决方案有点混乱。最终，我不得不在代码库中更改整个库。这是我用的.. https://github.com/marceljuenemann/angular-drag-and-drop-lists

探索它。希望它对您也有帮助。

Angular ui sortable：无法在嵌套项中正确拖动

1 个答案: