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>"); }); });

Here is an example - https://jsfiddle.net/morrowinds/kb18ncgm/15/

The problem is that from "Africa" ​​the blocks are transferred to a common line, but not back. Back transferred only to "Europe

  • problem in flowerContainer2 - Jean-Claude
  • Well, I understood that, but what a problem? =) - RattleSneyk

1 answer 1

You have no CSS

 #flowerContainer2 { height: 80%; width: 140px; margin-left:13px; }

Here is the working version:

 $(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>"); }); }); 
  div.sortable { width: 100px; background-color: lightgrey; font-size: large; margin: 4px; text-align: center; border: medium solid black; padding: 10px; } #fruitContainer { position: absolute; right: 50px; } #flowerContainer { height: 80%; width: 140px; margin-left: 13px; } #flowerContainer2 { height: 80%; width: 140px; margin-left: 13px; } div.flower { background-color: lightgreen } #info { float: right; border: padding: 4px; width: 10%; } .answer { background-color: #CFE2F3; width: 165px; height: 350px; border: medium solid black; margin-left: 28px; margin-top: 28px; border-radius: 17px; float: left; } div.title { width: 100px; margin: 5px auto; font-size: large; text-align: center; padding: 10px; } div.variantions { width: 100px; background-color: lightgrey; font-size: large; float: left; margin: 6px; text-align: center; border: medium solid black; padding: 10px; } .sortvariants { float: right; width: 50%; } 
 <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> <div id="info" class="ui-widget"> </div>

  • =)))) Exactly, but I still suffer! =) - RattleSneyk