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?

Vaibs_Cool · Accepted Answer · 2013-08-23 09:53:56Z

19

$("#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 !!

answered Aug 23, 2013 at 9:53

Vaibs_Cool

6,1506 gold badges30 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

trrrrrrm · Accepted Answer · 2013-08-23 09:47:34Z

4

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/

answered Aug 23, 2013 at 9:47

trrrrrrm

11.9k25 gold badges87 silver badges131 bronze badges

2 Comments

dams Over a year ago

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

dams Over a year ago

ra_htial is the best :)

Collectives™ on Stack Overflow

Jquery UI combine sortable and draggable

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related