Jquery UI Selectable - Selecting multiple elements

Question

I'm trying to implement a function to select multiple elements on my application here, but since I'm new to front end development I'm having some trouble controlling JavaScript's events and CSS. I found this post so I'm using It as my guide.

Before using the Selectable() function, I was adding a class (with some CSS) to give my element the appearance that It is selected (clicking one at time), and If I wanted It to be deselected, I just clicked the canvas (triggering a function to remove the class "selectedEffect").

But now I want to select multiple elements (in future I want to be able to group them), so I started using Selectable() and as I said, I found that post, that helped me partially. I was able to copy this piece of code to my project:

// this creates the selected variable
// we are going to store the selected objects in here
var selected = $([]), offset = {top:0, left:0}; 

$( "#canvas > div" ).draggable({
    start: function(ev, ui) {
        editorContent.addClass("hidden");

    if ($(this).hasClass("ui-selected")){
        selected = $(".ui-selected").each(function() {
           var el = $(this);
           el.data("offset", el.offset());
        });
    }
    else {
        selected = $([]);
        $("#canvas > div").removeClass("ui-selected");
    }
    offset = $(this).offset();
},
drag: function(ev, ui) {
    $(currentElement).removeClass("selectedEffect");
    $(currentArrow).removeClass("selectedArrow");
    var dt = ui.style.top - offset.top, dl = ui.style.left - offset.left;
    // take all the elements that are selected expect $("this"), which is    the element being dragged and loop through each.
    selected.not(this).each(function() {
         // create the variable for we don't need to keep calling $("this")
         // el = current element we are on
         // off = what position was this element at when it was selected, before drag
         var el = $(this), off = el.data("offset");
        el.css({top: off.top + dt, left: off.left + dl});
    });
}
});

$( "#canvas" ).selectable();

// manually trigger the "select" of clicked elements
$( "#canvas > div" ).click( function(e){
    if (e.metaKey == false) {
        // if command key is pressed don't deselect existing elements
        $( "#canvas > div" ).removeClass("ui-selected");
        $(this).addClass("ui-selecting");
    }
    else {
        if ($(this).hasClass("ui-selected")) {
            // remove selected class from element if already selected
            $(this).removeClass("ui-selected");
        }
        else {
            // add selecting class if not
            $(this).addClass("ui-selecting");
        }
    }

  $( "#canvas" ).data("canvas")._mouseStop(null);
});

But, after implementing this function, I still having some bugs:

1. Not able to drag multiple selected objects at same time
2. If I click one element and then click the canvas(to deselect It), the "selectedEffect" don't disappear.

Answer 1

I just figured It out. The problem was that since I was adding dynamically elements to my canvas, I had to bind the following function to my draggable elements in the moment the where created:

 $( "#myNewlyCreatedElement" ).draggable({
     start: function (event, ui) {

         if ($this.hasClass("ui-selected")) {
             // if this is selected, attach current offset
             // of each selected element to that element
             selected = $(".ui-selected").each(function() {
                 var el = $(this);
                 el.data("offset", el.offset());
             });
         } else {
             // if this is not selected, clear current selection
             selected = $([]);
             $( "#canvas > div" ).removeClass("ui-selected");
         }
         offset = $this.offset();
     },

     drag: function (event, ui) {
         // drag all selected elements simultaneously
         var dt = ui.position.top - offset.top, dl = ui.position.left - offset.left;
         selected.not(this).each(function() {
             var $this = $(this);
             var elOffset = $this.data("offset");
             $this.css({top: elOffset.top + dt, left: elOffset.left + dl});
         });
     }
 });