Question

How do we handle connect draggable items that should be connected to sortables when the sortables are created at run time? For example:

<ul class='sortable'>
</ul>

I create instances of the above sortable ul when the user clicks a button:

function onBtnClick1() {
    var element = $("<ul class='sortable'></ul>");
    element.appendTo("#body");
    $(".sortable").sortable();  // make it sortable?
}

Later on the user can generate items to drag and drop into any of the sortables:

function onBtnClick2() {
    var element = $("<span>Hi there</span>");
    element.draggable();
    element.draggable("option", "connectToSortable", '.sortable');
}

it isn’t working though – I basically want to make the draggables above droppable into any ul that has the class type “sortable”. What’s the right way to do it?

Thanks

Answer 1

you should set two more option to draggable to make it work

element.draggable("option", "helper", 'clone');
element.draggable("option", "revert", 'invalid');

see documentation for connectToSortable and sortable draggable demo

the complete function should look like this

function onBtnClick2() {
    var element = $("<span>Hi there</span>");
    element.draggable({
        connectToSortable: '.sortable',
        helper: 'clone',
        revert: 'invalid',
        appendTo: '#container'
    });
}