When dragging an element and dropping the droppable div. This drag element is also cloned and resizable into droppable div.

But each element dragged into a droppable div position overlapping on the top of the box, not set a current position when the element clone and dragged to drop into the droppable div.

Is any way to solve the dragging item drop to a fixed position?

HTML

<div class="fields mb-md-1 pb-1" id="item1"> 
//drag item
  <div class="item-info"> 
    <input type="text" class="w-100 h-100 form-control" 
placeholder="Name"> 
  </div> 

  //droppable div
  <div class="file-viewer
position-relative" style="order: 2"></div>

jQuery

 $(".item-info").draggable({
     helper: 'clone',
     cursor: "move",
 });
 
 $(".file-viewer").droppable({
     accept: ".item-info",
     drop: function(e, ui) {
         $(this).append($(ui.draggable).clone());
         $("#myList1 .item-info").addClass("new_item");
         $(".new_item").removeClass("ui-draggable item-info");
         $(".new_item").resizable({
             handles: "all",
             autoHide: true
         });
         $(".new_item").draggable({});
     }
 });