Создавать сортировки во время выполнения?

Question

Как мы обрабатываем связанные перетаскиваемые элементы, которые должны быть подключены к сортировкам, когда сортировки создаются во время выполнения? Например:

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

создать экземпляры выше сортируемого ул, когда пользователь нажимает на кнопку:

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

Позже пользователь может генерировать элементы перетащить в любую из sortables:

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

он не работает, хотя - я в основном хочу, чтобы перетаскиваемые элементы выше droppable в любую ul, которая имеет тип класса «sortable». Каков правильный способ сделать это?

Благодаря

Answer 1

вы должны установить еще два параметра для Draggable, чтобы заставить его работать

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

смотрите в документации по connectToSortable и sortable draggable demo

полная функция должна выглядеть следующим образом

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