jquery multiple draggable and sortable

Question

С jquery Draggable и sortable Я хотел бы создать систему, в которой учащиеся могут ответить на вопрос (синие квадратики) с несколькими ответами (красная рамка) и отсортировать ответы. Количество синих ящиков неизвестно, и поэтому я сделал класс его с именем «контейнер».

Я установил его и положил его на jsfiddle: http://jsfiddle.net/smethorst/h3ZNd/2/

HTML

<ul id="answers"> 
    <li>Item 1 (+)</li> 
    <li>Item 2 (+)</li> 
    <li>Item 3 (+)</li> 
    <li>Item 4 (+)</li> 
</ul> 

<ul class="container"> 
</ul> 
<ul class="container"> 
</ul> 

JQuery $ (функция() {

$("#answers li").draggable({ 
     connectToSortable: '.container', 
     helper: 'clone', 
     revertDuration: 0 
    }); 

    $(".container").sortable({ 
     revert: true 
    }); 

    $(".container li").draggable({ 
     connectToSortable: '.container', 
     revert: "invalid", 
    }); 
}); 

У меня есть места раствора в jsfiddle: http://jsfiddle.net/smethorst/h3ZNd/2/

Итак, проблема в том, что невозможно перетащить ответ на другой вопрос. Поэтому, перетащив элемент из красного квадрата в синюю рамку, его можно будет перетащить в другую синюю рамку (без клона).

Я пробовал разные вещи после падения, как эти вещи, но это не сработало:

$(this).append($(ui.draggable)); 
$(".container").sortable('refresh'); 

Есть ли решение для этого? Заранее спасибо.

Answer 1

Простой, есть возможность в сортировке, которую вы можете использовать: connectWith. Он принимает селектор для подключения другого sortables:

$(".container").sortable({ 
    connectWith: '.container', 
    revert: true 
}); 

JSFiddle

Вашей следующей проблемы, вероятно, будет, что каждая коробка должна принимать только один элемент. Поэтому вам нужно удалить другие элементы в сортируемом динамически при падении элемента, что сложнее, чем я думал.