I can not move an element by dropping the list item on the appropriate tab when helper is set to "clone"

Question

I want to move an element by dropping the list item on the appropriate tab. I use a solution of Simon Battersby, to add a stylized scroll bar on the list: Vertical Scrollbar Plugin using jQueryUI Slider. I used the following solution to the list item is visible when you drag across the screen: jQuery Draggable and overflow issue.

My sample is http://jsfiddle.net/XmahV/

The following code works when helper="original" in the sortable options:

drop: function( event, ui ) {
   var $tabItem = $( this );
   var $list = $( $tabItem.find( "a" ).attr( "href" ) ).find( ".sortable" );

   **ui.draggable.hide( "slow", function() {
   $(this).appendTo($list).show();//it does not work in my case
   });**              

}

But in my case helper="clone":

$( ".sortable" ).sortable({
                    connectWith: ".sortable",
                    //Need to drag across the entire window. Overflow issue.
                    appendTo: "body",  
                    containment: "window",
                    scroll: false,
                    helper: "clone"
                    //End Overflow issue.
        });

Can someone help me move a list item, when lowering the tab title? Or can someone tell me how in my case remove the item from the list, when you transfer the item to the header of the tab?

Thanks

Answer 1

The fact is that the original element is hidden in case of 'clone' option is in use. Therefore, you cannot re-hide a element already hidden... It is why it was not working. I have just display the original element before your code : http://jsfiddle.net/XmahV/4/

var $tab_items = $("ul:first li", $tabs).droppable({
  accept: ".sortable .dragItem",
  hoverClass: "ui-state-hover",
  start: function (event, ui) {},
  stop: function (event, ui) {},
  receive: function (event, ui) {},

  drop: function (event, ui) {
    var $tabItem = $(this);
    var $list = $($tabItem.find("a").attr("href")).find(".sortable");

    //In case of clone helper, you must force to display the original element before hide it
    ui.draggable.show();
    ui.draggable.hide("slow", function () {
      $(this).appendTo($list).show();
    });

  }