jQuery UI selectable event is not triggered on draggable

Question

I implemented jQuery UI draggable and selectable. When I have two component with initialized both of it and I select one of them, if I click to the other component without mouse release and start dragging it then the "ui-selected" class is removed from the other component but it did not enter in any event of selectable.

I need a method or event where enters after the action I described above.

Selectable:

Selectable: {
        init: function(el) {
            $(el).selectable({
                filter: '.existing-component', 
                selecting: function (event, ui) {
                    $(event.target).children('.ui-selecting').find('.existing-component').removeClass('ui-selecting');
                },
                stop: function(event, ui) {
                      console.log('stop');
                });
                start: function(event, ui) {
                      console.log('start');
                });
            });
            // manually trigger the "select" of clicked elements
            $(el).find('.existing-component').click( function(e){
              .
              .
              .
              $(el).selectable('refresh');
              $(el).data("ui-selectable")._mouseStop();
            });
         }
       }

Draggable:

Draggable: {
        init: function(el, options) {

            $(el).draggable(options, {
                scroll: false,
                snap: '.gridlines',
                snapTolerance: $('.grid').attr('data-size') / 2,
//              revert: "invalid",
                preventCollision : true,
                preventProtrusion : false,
                collisionVisualDebug : false,

                drag: function(event, ui) {
                      console.log('drag')
                }
          });
     }
}

Answer 1

I find my method, on action described above enters in the Draggable.start event and the previous component is still selected.