0

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/

Проблема заключается в том что из "Африка" блоки в общую строку переносятся, а вот обратно нет. Обратно переносятся только в "Европа

2
  • проблемка в flowerContainer2 5 апр 2016 в 18:09
  • Ну это я понял, а какая проблема?=) 5 апр 2016 в 18:14

1 ответ 1

1

У вас в CSS отсутствует

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

Вот рабочий вариант:

$(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>

1
  • =)))) Точно, а я все мучаюсь! =) 5 апр 2016 в 20:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.