拖放操作将在可放置区域的下方并拖动整个项目

Question

在我的示例中，拖放操作没有正确进行。我想在Project 1，Project 2，Project 3之间拖动项目 在拖动项目时，它div之下，而第二个问题是，在拖动单个项目时，它会将项目2和3中的整个项目都拖动了。有人可以帮助我解决此问题。 我创建了小提琴来演示该问题：

https://jsfiddle.net/scrumvisualize/du82of0y/3/

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