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

Question

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

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

我已经添加了 sn-p。

$('.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;
});

.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;
}

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

Answer 1

看来我想通了。请看我的回答。 谢谢大家！

$('.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);
        }
      });

    }
  });
}

.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;
}

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