jQuery将特定容器拖放到新添加的容器中

Question

请帮我解决我的jQuery拖放问题。

我已经成功地将拖放添加到特定容器但我的问题是我想将项目放到另一个容器但是我只能将项目放到最后添加的字段中我无法删除以前添加的字段。我的代码有问题吗？请给我一些建议。非常感谢。

我添加了代码段。

＆＃13;

＆＃13;

$('.box-item').draggable({
  cursor: 'move',
  helper: "clone",
  revert: false
});

function add_new_fields(type) {
  var max_field = $('.box-' + type).length + 1;
  $(".droppable-container-" + type).append('<div id="container' + type + '_' + max_field + '" class="box-container box-' + type + '"></div>');
  initialize(type);
}
    
function initialize(type) {
  for (i = 0; i < $(".box-" + type).length; i++) {
    var no = i + 1;
    $("#container" + type + "_" + no).droppable({
      drop: function (event, ui) {

        var itemid = $(event.originalEvent.toElement).attr("itemid");

        $('.box-item').each(function () {
          if ($(this).attr("itemid") === itemid) {
            $(this).appendTo("#container" + type + "_" + no);
          }
        });
      }
    });
  }
}

function recycleItem($item) {
  $item.fadeOut(function () {
    $item
    .appendTo("#choices_container")
    .fadeIn();
  });
}

// remove dropped elements from container
$(".removable").on("click", function (event) {
  var $item = $(this),
      $target = $(event.target);

  if ($target.is(".removable")) {
    recycleItem($item);
  }

  return false;
});

＆＃13;

.cat1, .cat2{
  width: 250px;
  display: inline-block;
  border: solid 1px #aaa;
  padding: 10px;
  vertical-align: top;
}
#choices_container{
  min-height: 200px;
}
.box-container {
  min-height: 50px;
  height: 100%;
  border: solid 1px #aaaaaa;
  margin-bottom: 5px;
}

.box-item {
  cursor: move;
  background: #D9EDF7;
  width: 235px;
  z-index: 1000;
  padding: 10px;
  margin-bottom: 4px;
  border: solid 1px #BCE8F1;
  border-right: solid 10px #aaaaaa;
}
.box-item input[type="text"]{
  border-radius: 0;
}

＆＃13;

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" />

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<!--heading 1-->
<div class="cat1">
  <h4>Category A</h4>
  <div class="droppable-container-1"></div>
  <button class="btn btn-default add-droppable-field-1" onclick="add_new_fields(1);">Add Field</button>
</div>

<!--heading 2-->
<div class="cat2">
  <h4>Category B</h4>
  <div class="droppable-container-2"></div>
  <button class="btn btn-default add-droppable-field-2" onclick="add_new_fields(2);">Add Field</button>
</div>

<div id="choices_container">
  <div itemid="1" class="box-item removable">ITEM 1</div>
  <div itemid="2" class="box-item removable">ITEM 2</div>
  <div itemid="3" class="box-item removable">ITEM 3</div>
  <div itemid="4" class="box-item removable">ITEM 4</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

似乎我弄清楚了。请看我的答案。 谢谢大家！

＆＃13;

＆＃13;

$('.box-item').draggable({
  cursor: 'move',
  helper: "clone",
  revert: false
});

function add_new_fields(type) {
  var max_field = $('.box-' + type).length + 1;
  $(".droppable-container-" + type).append('<div id="container' + type + '_' + max_field + '" class="box-container box-' + type + '"></div>');
  initialize(type);
}

function add_new_fields(type) {
  var max_field = $('.box').length + 1;
  $(".droppable-container-" + type).append(
    '<div id="container' + max_field + '" class="box-container box"></div>'
  );
  initialize(type, max_field);
}

function initialize(type, max_field) {

  $("#container" + max_field).droppable({
    drop: function (event, ui) {

      var itemid = $(event.originalEvent.toElement).attr("itemid");

      $('.box-item').each(function () {
        if ($(this).attr("itemid") === itemid) {
          $(this).appendTo("#container" + max_field);
        }
      });

    }
  });
}

＆＃13;

.cat1, .cat2{
  width: 250px;
  display: inline-block;
  border: solid 1px #aaa;
  padding: 10px;
  vertical-align: top;
}
#choices_container{
  min-height: 200px;
}
.box-container {
  min-height: 50px;
  height: 100%;
  border: solid 1px #aaaaaa;
  margin-bottom: 5px;
}

.box-item {
  cursor: move;
  background: #D9EDF7;
  width: 235px;
  z-index: 1000;
  padding: 10px;
  margin-bottom: 4px;
  border: solid 1px #BCE8F1;
  border-right: solid 10px #aaaaaa;
}
.box-item input[type="text"]{
  border-radius: 0;
}

＆＃13;

<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/ui-lightness/jquery-ui.css" />

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>

<!--heading 1-->
<div class="cat1">
  <h4>Category A</h4>
  <div class="droppable-container-1"></div>
  <button class="btn btn-default add-droppable-field-1" onclick="add_new_fields(1);">Add Field</button>
</div>

<!--heading 2-->
<div class="cat2">
  <h4>Category B</h4>
  <div class="droppable-container-2"></div>
  <button class="btn btn-default add-droppable-field-2" onclick="add_new_fields(2);">Add Field</button>
</div>

<div id="choices_container">
  <div itemid="1" class="box-item removable">ITEM 1</div>
  <div itemid="2" class="box-item removable">ITEM 2</div>
  <div itemid="3" class="box-item removable">ITEM 3</div>
  <div itemid="4" class="box-item removable">ITEM 4</div>
</div>

＆＃13;

＆＃13;

＆＃13;