Javascript 拖放是在可拖放区域的下方拖动整个项目

在我的示例中，拖放操作没有正确发生。我想在

项目1

，

项目2

，

项目3

之间拖动项目 当拖动一个项目时，它会进入

div

的下方，第二个问题是，当拖动单个项目时，它会从项目2和3中拖动整个项目。有人能帮我解决这个问题吗。 我创建了fiddle来演示这个问题：

---

有没有理由不使用现有的库？比如，我之前听说过dragula，但不确定它是否得到了全世界用户的良好支持。我现在就试试。

$(document).ready(function() {
$('.box-item').draggable({
    cursor: 'move'
});
$("#container1").droppable({
  drop: function(event, ui) {
    var itemid = $(event.originalEvent.toElement).attr("id");
    $('.peopleClass >.box-item').each(function() {
      if ($(this).attr("id") === itemid) {
        $(this).appendTo("#container1");
      }
    });
  }
});
$("#container2").droppable({
  drop: function(event, ui) {
    var itemid = $(event.originalEvent.toElement).attr("id");
    $('.box-item').each(function() {
      if ($(this).attr("id") === itemid) {
        $(this).appendTo("#container2");
      }
    });
   }
  });
 $("#container3").droppable({
  drop: function(event, ui) {
    var itemid = $(event.originalEvent.toElement).attr("id");
    $('.box-item').each(function() {
      if ($(this).attr("id") === itemid) {
        $(this).appendTo("#container3");
      }
    });
   }
  });
});