Jquery UI combine sortable and draggable

Question

I'm trying to combine a draggable panel (on top), and a sortable panel (bottom).

Dragging works fine, but sorting fails.

Here is my JS fiddle: http://jsfiddle.net/dmUKY/9/

Both drag'n drop and sortable functions shares the droppable:drop function. When sorting elements, the function has to replace the selected object.

 drop: function (event, ui) {
    //alert($(this).parent().html());
    //alert($(ui.helper).attr('class'));
    var obj;
    if ($(ui.helper).hasClass('draggable')) {
        //alert('draggable');
      obj = $(ui.helper).clone();  
      obj.removeClass('draggable').addClass('editable')
      //obj.addClass('droppable');
      $(this).parent().append(obj);

    }


    //alert($(this).parent().html());
}

How should I combine these two functionalities?

Solution 1

Change your code to this should do the trick:

obj.removeClass('draggable').addClass('editable').removeAttr('style');
//obj.addClass('droppable');
$(this).append(obj);

check on fiddle: http://jsfiddle.net/dmUKY/11/

Solution 2

$("#sortable").sortable({
    revert: true,
    stop: function(event, ui) {
        if(!ui.item.data('tag') && !ui.item.data('handle')) {
            ui.item.data('tag', true);
            ui.item.fadeTo(400, 0.1);
        }
    }
});
$("#draggable").draggable({
    connectToSortable: '#sortable',
    helper: 'clone',
    revert: 'invalid'
});
$("ul, li").disableSelection();

DEMO JSFIDDLE

I guess this is what you were looking for !!

Comments

[dams]

thanks! How should I do if there is 2 separate sortable areas ? can I exchange items betwenn those ? JSfiddle: jsfiddle.net/dmUKY/11

[dams]

ra_htial is the best :)