{"action":"created","issue":{"url":"https://api.github.com/repos/angular-ui/ui-sortable/issues/551","repository_url":"https://api.github.com/repos/angular-ui/ui-sortable","labels_url":"https://api.github.com/repos/angular-ui/ui-sortable/issues/551/labels{/name}","comments_url":"https://api.github.com/repos/angular-ui/ui-sortable/issues/551/comments","events_url":"https://api.github.com/repos/angular-ui/ui-sortable/issues/551/events","html_url":"https://github.com/angular-ui/ui-sortable/issues/551","id":330241535,"node_id":"MDU6SXNzdWUzMzAyNDE1MzU=","number":551,"title":"Problem with nested items being sorted","user":{"login":"ZtheLeader","id":26215607,"node_id":"MDQ6VXNlcjI2MjE1NjA3","avatar_url":"https://avatars0.githubusercontent.com/u/26215607?v=4","gravatar_id":"","url":"https://api.github.com/users/ZtheLeader","html_url":"https://github.com/ZtheLeader","followers_url":"https://api.github.com/users/ZtheLeader/followers","following_url":"https://api.github.com/users/ZtheLeader/following{/other_user}","gists_url":"https://api.github.com/users/ZtheLeader/gists{/gist_id}","starred_url":"https://api.github.com/users/ZtheLeader/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ZtheLeader/subscriptions","organizations_url":"https://api.github.com/users/ZtheLeader/orgs","repos_url":"https://api.github.com/users/ZtheLeader/repos","events_url":"https://api.github.com/users/ZtheLeader/events{/privacy}","received_events_url":"https://api.github.com/users/ZtheLeader/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-06-07T12:02:03Z","updated_at":"2018-06-07T12:33:51Z","closed_at":null,"author_association":"NONE","body":"Hi I've implemented nested sortable items setup in `surveys module` in my project. i.e. I can sort Individual questions AND I can create an empty group, drop a single question into it and like this I fill up the group and I can sort the groups in hierarchy as well. Like this:\r\n\r\n<img width=\"1024\" alt=\"screen shot 2018-06-07 at 4 09 37 pm\" src=\"https://user-images.githubusercontent.com/26215607/41096220-5d5ab666-6a6d-11e8-8a59-2615c20752d9.png\">\r\n\r\n\r\nHere's my code:\r\n```\r\n<!-- Group type questions: -->\r\n                        <div class=\"row connector group-type-question-min-height-compulsory myHandle\" ng-if=\"question.type == allQuestionTypes.group\" ui-sortable=\"sortableOptionsGroup\" ng-model=\"question.questions\">\r\n                        \r\n                            <div class=\"col-md-6 col-sm-6 question-overview\">\r\n                                <div class=\"ellipsis\">\r\n                                    <i class=\"fa fa-bars\"></i>\r\n                        \r\n                                    <input type=\"checkbox\" ng-value=\"0\" ng-model=\"question._selected\" />\r\n                                    <span ng-attr-title=\"{{question.name}}\" ng-if=\"question.type == allQuestionTypes.group\">\r\n                                        <b>{{question.name}}</b>\r\n                                    </span>\r\n                        \r\n                                </div>\r\n                            </div>\r\n                            <div class=\"col-md-6 col-sm-6 answer-overview pull-right word-wrap\">\r\n                                <span class=\"badge\">{{showQuestionTypeText(question.type)}}</span>\r\n                                <button type=\"button\" ng-if=\"question.type != allQuestionTypes.group\" class=\"button btn btn-success btn-sm\" ng-click=\"$event.stopPropagation(); editSurveyQuestion(question, $index)\">\r\n                                    {{app.translateByLocale('label_edit')}}\r\n                                </button>\r\n                                <button type=\"button\" ng-if=\"question.type == allQuestionTypes.group\" class=\"button btn btn-success btn-sm\" ng-click=\"$event.stopPropagation(); openModal(question, $index)\">\r\n                                    {{app.translateByLocale('label_edit')}}\r\n                                </button>\r\n                                <span class=\"delete-icon\">\r\n                                    <button class=\"btn btn-sm btn-danger\" ng-click=\"$event.stopPropagation(); removeGroup(question)\">\r\n                                        <i class=\"fa fa-trash\"></i>\r\n                                    </button>\r\n                                </span>\r\n                            </div>\r\n                            <div class=\"col-md-12 col-sm-12 question-overview group-type-question-bar\" ng-if=\"question.questions.length == 0\">\r\n                                <div class=\"ellipsis text-center\">\r\n                                    <i class=\"fa fa-info-circle\"></i>\r\n                                    <span>\r\n                                        {{app.translateByLocale('group_questions_drag_info')}}\r\n                                    </span>\r\n                                </div>\r\n                                \r\n                            </div>\r\n                            <div ng-repeat=\"subQuestion in question.questions\" class=\"group-type-question\">\r\n                                <div class=\"col-md-5 col-sm-5 question-overview\" style=\"margin-left: 34px\">\r\n                                    <div class=\"ellipsis\">\r\n                                        <i class=\"fa fa-bars myHandle\"></i>\r\n                                        <!-- <input type=\"checkbox\" ng-value=\"0\" ng-model=\"subQuestion._selected\" /> -->\r\n                                        <span ng-attr-title=\"{{subQuestion.text}}\">\r\n                                            {{subQuestion.text}}\r\n                                        </span>\r\n                                    </div>\r\n                                </div>\r\n                                <div class=\"col-md-6 col-sm-6 answer-overview pull-right word-wrap\">\r\n                                <span class=\"badge\">{{subQuestion.predefined_mcq_type.title}}</span>\r\n                                    <span class=\"badge\">{{showQuestionTypeText(subQuestion.type)}}</span>\r\n                                    <button type=\"button\" class=\"button btn btn-success btn-xs\" ng-click=\"$event.stopPropagation(); editSurveyQuestion(subQuestion, $index)\">\r\n                                        {{app.translateByLocale('label_edit')}}\r\n                                    </button>\r\n                                    <span class=\"delete-icon\">\r\n                                        <button class=\"btn btn-xs btn-danger\" ng-click=\"$event.stopPropagation(); removeSurveyGroupQuestion(subQuestion, question.questions)\">\r\n                                            <i class=\"fa fa-trash\"></i>\r\n                                        </button>\r\n                                    </span>\r\n                                </div>\r\n                                </div>\r\n                        </div>\r\n```\r\n\r\nRelated Functions from Controller:\r\n\r\n```/**\r\n * Defines the options for Group type questions to be used in both Survey creation and Edit\r\n * @param {object} scope \r\n */\r\n    function sortableOptionsGroup(scope) {\r\n\r\n        let sortableGroup = {\r\n            handle: '.myHandle',\r\n            receive: function (event, ui) {\r\n                sortingReceivedFunction(event, ui, scope);\r\n            },\r\n            remove: function (event, ui) {\r\n                sortingRemovedFunction(event, ui, scope);\r\n            },\r\n            axis: 'y',\r\n            'ui-floating': false,\r\n            dropOnEmpty: true,\r\n            cursor: 'move',\r\n            tolerance: 'pointer',\r\n            connectWith: '.connector'\r\n        }\r\n        return sortableGroup;\r\n    }\r\n\r\n    /**\r\n     * invoked when an item is added to the main group\r\n     * \r\n     * @param {obj} event \r\n     * @param {obj} ui \r\n     * @param {obj} scope \r\n     * \r\n     * @returns none\r\n     */\r\n    function sortingReceivedFunction(event, ui, scope) {       \r\n        let obj = ui.item.sortable.model;\r\n        let index = ui.item.sortable.index;\r\n        let group_type = null;\r\n        let invalidIncomingQuestion = false;\r\n        \r\n        //Group Questions Types Maintaining\r\n        // when second and more questions are added:\r\n        if (ui.item.sortable.droptargetModel.length >= 1){\r\n            _.map(ui.item.sortable.droptargetModel, function (questionObject) {\r\n                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)) {\r\n                    invalidIncomingQuestion = true;\r\n                }\r\n            });\r\n            if(invalidIncomingQuestion){\r\n                showErrorMessage(localeService.translateByLocale(\"group_question_error4\"));\r\n                cancelDraging(index, obj, scope, ui);\r\n                return;\r\n            }\r\n            else if (ui.item.sortable.droptargetModel.length == maxQuestionLimitInGroup) {\r\n                showErrorMessage(localeService.translateByLocale(\"group_question_error3\"));\r\n                cancelDraging(index, obj, scope, ui);\r\n            }\r\n            else if (incomingMcqQuestionValidation(ui.item.sortable.model)) {\r\n                cancelDraging(index, obj, scope, ui);\r\n            }\r\n            else if (incomingCustomQuestionValidation(ui.item.sortable.model)){\r\n                cancelDraging(index, obj, scope, ui);\r\n            }\r\n            else {\r\n                let groupQuestionId = ui.item.sortable.model.id;\r\n                scope.questions.data.forEach(function (item, i, val) {\r\n                    if (scope.questions.data[i].id == groupQuestionId) {\r\n                        scope.questions.data[i].isSelected = false;\r\n                    }\r\n                });\r\n            }\r\n\r\n        }\r\n        // when first question is added:\r\n        else if (incomingMcqQuestionValidation(ui.item.sortable.model)) {\r\n            cancelDraging(index, obj, scope, ui);\r\n        }\r\n        else if (incomingCustomQuestionValidation(ui.item.sortable.model)){\r\n            cancelDraging(index, obj, scope, ui);\r\n        }\r\n        else {\r\n            let groupQuestionId = ui.item.sortable.model.id;\r\n            scope.questions.data.forEach(function (item, i, val) {\r\n                if (scope.questions.data[i].id == groupQuestionId) {\r\n                    scope.questions.data[i].isSelected = false;\r\n                }\r\n            });\r\n        }\r\n    }\r\n    /**\r\n     * invoked when an item is removed from the main group \r\n     * \r\n     * @param {obj} event \r\n     * @param {obj} ui \r\n     * @param {obj} scope \r\n     * \r\n     * @returns none\r\n     */\r\n    function sortingRemovedFunction(event, ui, scope) {\r\n        let groupQuestionId = ui.item.sortable.model.id;\r\n        scope.questions.data.forEach(function (item, i, val) {\r\n            if (scope.questions.data[i].id == groupQuestionId) {\r\n                scope.questions.data[i].isSelected = true;\r\n            }\r\n        });\r\n    }\r\n```\r\n\r\n## Things are working pretty fine but there are few problems.\r\n### 1- When there are two adjacent groups and I try to drag an individual question into upper group, it always gets added into the lower/second group.\r\nSee in the image: I added `here is the text for question` in `group 1` but it added in `group 2`. Model of `group 1` is in console\r\n<img width=\"1680\" alt=\"screen shot 2018-06-07 at 4 23 56 pm\" src=\"https://user-images.githubusercontent.com/26215607/41098325-61e27dd4-6a74-11e8-9dad-4ab74a72e468.png\">\r\n\r\n\r\n### 2- I can't sort the questions into a group.\r\n\r\nCan someone help me here on it. I've been trying quite hard on it.\r\n\r\n\r\n\r\n\r\n"},"comment":{"url":"https://api.github.com/repos/angular-ui/ui-sortable/issues/comments/395403968","html_url":"https://github.com/angular-ui/ui-sortable/issues/551#issuecomment-395403968","issue_url":"https://api.github.com/repos/angular-ui/ui-sortable/issues/551","id":395403968,"node_id":"MDEyOklzc3VlQ29tbWVudDM5NTQwMzk2OA==","user":{"login":"thgreasi","id":1295829,"node_id":"MDQ6VXNlcjEyOTU4Mjk=","avatar_url":"https://avatars0.githubusercontent.com/u/1295829?v=4","gravatar_id":"","url":"https://api.github.com/users/thgreasi","html_url":"https://github.com/thgreasi","followers_url":"https://api.github.com/users/thgreasi/followers","following_url":"https://api.github.com/users/thgreasi/following{/other_user}","gists_url":"https://api.github.com/users/thgreasi/gists{/gist_id}","starred_url":"https://api.github.com/users/thgreasi/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/thgreasi/subscriptions","organizations_url":"https://api.github.com/users/thgreasi/orgs","repos_url":"https://api.github.com/users/thgreasi/repos","events_url":"https://api.github.com/users/thgreasi/events{/privacy}","received_events_url":"https://api.github.com/users/thgreasi/received_events","type":"User","site_admin":false},"created_at":"2018-06-07T12:33:51Z","updated_at":"2018-06-07T12:33:51Z","author_association":"MEMBER","body":"Wow that's a lot of code...\r\nMy first question will be whether you checked the [Tree with dynamic template](http://codepen.io/thgreasi/pen/VKXwzV) example found in README.\r\nAre you defining the `ui-sortable` on each sub-sortable tree?\r\n"}}
{"actor":{"display_login":"thgreasi"}}