jQuery selectable with handle and sortable

Question

I have a selectable list within an accordion, and when you select an item from the list, the item appears in your selected columns list. My issue is that I want to use a handle to select an item (the handle is a plus sign) and have the text appear in the selected list.

Here's my fiddle: http://jsfiddle.net/kmbonin82/NkgC2/16/

As you can see, when you click a plus sign, it doesn't put the text in the selected items list. Any thoughts on how to correct this?

Here's the JS that should be putting the text into the selected columns list:

 $(function () {
       $(".list div") 
       .selectable({
           handle: ".handle",
           stop: function () {

               var result = $("#select-result");                       

               $(".ui-selected", this).each(function () {
                   var index = $(".list li").index(this);                    
                   $(this).css('background-color', '#669966');
                   $(this).css('color', '#FFFFFF');
                   result.append('<li id="' + $(this).attr('id')  + '">' + $(this).text() + '</li>');
                   sortColumns();
               });
           }
       })           
      sortColumns();
   });

Answer 1

To put the value in the selected list, I had to get the index of the holding the plus sign, then using that index, get the text and id values of the li with the same index. I was then able to color that li green, indicating it was selected and add it to the list.

Here's the fiddle: http://jsfiddle.net/kmbonin82/NkgC2/17/

$("ul li div").click(function () {
         var index = $("ul li div").index(this);
         var listLiText = $("ul.list li").eq(index).text();
          var listLiID = $("ul.list li").eq(index).attr('id');

          $("ul.list li").eq(index).css('background-color', '#669966');
          $("ul.list li").eq(index).css('color', '#FFFFFF');

           if ($("#select-result #" + listLiID).length == 0) {
                 result.append('<li id="' + listLiID + '">' + listLiText + '</li>');
            }                      
  });