$(".box").on({
  "dragstart": function(event){
    console.log("dragstart");
  event.originalEvent.dataTransfer.setData('text/plain',event.target.id)
  },
  "dragend": function(){
    console.log("dragend");
  }
})

$(".target").on({
  "dragenter": function(){
    console.log("dragenter");
  },
  "dragover": function(event){
    event.preventDefault();
    console.log("dragover");
  },
  "dragleave": function(){
    console.log("dragleave");
  },
  "drop": function(event){
    event.preventDefault();
    console.log("drop");
    let id = event.originalEvent.dataTransfer.getData('text/plain');
    $("#"+id).appendTo(event.target);
  }
})