html
<div id="variants" class="sortvariants">
<div id="ans_1" class="variantions ui-state-error">Будапешт</div>
<div id="ans_2" class="variantions ui-state-error">Прага</div>
</div>
<input type="text" id="newans"> <input type="button" id="appendb" value="Добавить">
<div class="answer">
<div id="current" class="title">Европа</div>
<div id="flowerContainer" class="sortContainer">
<div id="ans_4" class="variantions ui-state-error">Каир</div>
</div>
</div>
<div class="answer">
<div id="current" class="title">Африка</div>
<div id="flowerContainer2" class="sortContainer">
<div id="ans_3" class="variantions ui-state-error">Кельн</div>
</div>
</div>
js
$(function() {
$("#head").disableSelection();
$('#variants').sortable({connectWith: '.sortContainer'});
$( ".sortContainer" ).sortable({
connectWith: '#variants',
receive: function(event, ui) {
$('#info').append(ui.item.attr("id"))
},
remove: function(event, ui) {
var temp = $( "#info" ).text();
$('#info').html(temp.replace(ui.item.attr("id"), " "))
}
});
$("#appendb").click(function() {
id = 4;
$('#variants').append("<div id='ans_"+id+"' class='variantions ui-state-error'>"+$( "#newans" ).val()+"</div>");
});
});
Вот здесь пример - https://jsfiddle.net/morrowinds/kb18ncgm/15/
Проблема заключается в том что из "Африка" блоки в общую строку переносятся, а вот обратно нет. Обратно переносятся только в "Европа