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

Question

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

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

我已经添加了代码段。

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