Problems jquery ui

I'm doing a Drag and drop system with jquery ui.

The initial part declaring the elements sortables or droppables works perfectly, the problem is that these elements are stackable, creating groups among themselves and later being separable by dragging the element out of the group that is created when stacking them.

From this point, the css classes that are applied overlap or are not removed when the action is finished.

The Drag and Drop code:

 $(".taskRecipient").droppable({
            accept: ".taskRecipient",
            /*greedy: true,*/
            containment: "#capaTask",
            scroll:true,
            classes: {
                "ui-droppable-active": "ui-state-active",
                "ui-droppable-hover": "ui-state-hover"
            },
            drop: function(event, ui){

                if($(this).parent().hasClass('taskGroup'))
                {
                        var top = 0;
                        var nombre = "";

                        $(this).siblings('.taskRecipient').each(function(){
                            nombre = "";
                            top = $(this).css('top');
                            nombre = $(this).children('.title').text();
                        });

                        var margin = $(this).css('margin-bottom');
                        var height = $(this).css('height');

                        height = parseInt(height) + 30 + "px";

                        $(this).css('height', height);

                        margin = parseInt(margin) + 25 + "px";
                        $(this).css('margin-bottom', margin);

                        top = parseFloat(top) + parseFloat(30) + "px";

                        if( $(".taskGroup .taskRecipient[data-task = " + ui.draggable.data('task') + " ]" ).length )
                        {
                        }else{
                            $(this).parent().append("<div id='" + ui.draggable.data('task') + "' class='taskRecipient ui-widget-content ui-state-default taskGroupElement' data-task='" + ui.draggable.data('task') + "' style='top:" + top +"' >" + ui.draggable.html() + "</div>");
                            ui.draggable.remove();
                            var groupId = $(this).parent().data('groupid');
                            var taskId = ui.draggable.data('task');

                            $.ajax({
                                url: base_url + 'Task/addTaskToTaskGroup',
                                type: "post",
                                data: {
                                    'taskId'    : taskId,
                                    'groupId'   : groupId,
                                    'autor'     : $('#employeeId').val() 
                                },
                                success: function(){
                                    menu[1].click();
                                },
                                error: function(){
                                }
                            });

                        }
                }else{

                    var objectTaskId = $(this).data('task');
                    var objectTaskContent = $(this).html();
                    var taskId = ui.draggable.data('task');
                    var taskContent = ui.draggable.html();
                    var aux = $(this);

                    $.ajax({
                        url: base_url + 'Task/createTaskGroup',
                        type: 'post',
                        data: {
                            'userId'    : $('#employeeId').val(),
                            'taskIdUno' : aux.data('task'),
                            'taskIdDos' : ui.draggable.data('task'), 
                        }, 
                        success: function(e){
                            var taskGroup = "<div class='taskGroup ui-widget-content ui-state-default' data-groupId='" + e + "'><input type='text' class='taskGroupTitleInput' Placeholder='Nombre de Grupo' /><span class='taskGroupTitle'></span><div class='taskRecipient ui-widget-content ui-state-default' data-task='" + objectTaskId + "'>" + objectTaskContent + "</div><div class='taskRecipient ui-widget-content ui-state-default taskGroupElement' data-task='" + taskId + "'>" + taskContent + "</div></div>";
                            aux.parent().append(taskGroup);
                            aux.remove();
                            ui.draggable.remove();
                            $('.taskGroupTitleInput').focus();

                            $(".taskGroup .taskRecipient").droppable({
                                accept: ".taskRecipient",
                                greedy: true,
                                drop: function(event, ui){
                                    var top = 0;
                                    var nombre = "";

                                    $(this).siblings('.taskRecipient').each(function(){
                                        nombre = "";
                                        top = $(this).css('top');
                                        nombre = $(this).children('.title').text();
                                    });

                                    var margin = $(this).css('margin-bottom');
                                    var height = $(this).css('height');

                                    height = parseInt(height) + 30 + "px";

                                    $(this).css('height', height);

                                    margin = parseInt(margin) + 25 + "px";
                                    $(this).css('margin-bottom', margin);

                                    top = parseFloat(top) + parseFloat(30) + "px";

                                    if( $(".taskGroup .taskRecipient[data-task = " + ui.draggable.data('task') + " ]" ).length )
                                    {
                                    }else{
                                        $(this).parent().append("<div id='" + ui.draggable.data('task') + "' class='taskRecipient ui-widget-content ui-state-default taskGroupElement' data-task='" + ui.draggable.data('task') + "' style='top:" + top +"' >" + ui.draggable.html() + "</div>");
                                        ui.draggable.remove();
                                        var groupId = $(this).parent().data('groupid');
                                        var taskId = ui.draggable.data('task');

                                        $.ajax({
                                            url: base_url + 'Task/addTaskToTaskGroup',
                                            type: "post",
                                            data: {
                                                'taskId'    : taskId,
                                                'groupId'   : groupId,
                                                'autor'     : $('#employeeId').val() 
                                            },
                                            success: function(){
                                                menu[1].click();
                                            },
                                            error: function(){
                                            }
                                        });

                                    }
                                },
                            });
                        },
                        error: function(){
                        }
                    });
                }

           $('.taskGroup .taskRecipient').draggable({
            connectToSortable: '.col-lg-3',
            classes: {
                "ui-droppable-active": "ui-state-active",
                "ui-droppable-hover": "ui-state-hover"
            },
            start:function(){
                $(this).addClass('cajaTask');
            },
            stop:function(){
                $(this).css('top', 'auto');
                $(this).removeClass('taskGroupElement');
                $(this).parent().removeClass('ui-state-hover');
                $(this).parent().css('padding-bottom', '-10%')
            }
        });


             $('.col-lg-3').sortable({      
            connectWith: ".col-lg-3",
            update: function(event, ui){

                var ordenElementos = $(this).sortable("toArray").toString();
                var taskParent = $(this).attr('id');

                $.ajax({
                    url: base_url + 'Task/changeTaskPosition',
                    type: 'post',
                    data: {
                        'tasksId' : ordenElementos,
                        'parent' : taskParent,
                    },
                    succes:function(){
                    },
                    error: function(){
                    }
                });
            }
        });

    },
    error: function(e){
    }

Today I'm not sure that I can do what I want with jquery ui.