Как имитировать перетаскивание с количеством элементов после курсора в области перетаскивания

Question

Как имитировать перетаскивание с количеством элементов, следующих за курсором в область перетаскивания,

Вопрос: Я просто хотел показать количество элементов, являющихся dragged, следующих за курсором без фактического draggingИсходный элемент.

на изображении ниже показано, что я пытался:

function allowDrop(ev) {
  console.log(ev);
  ev.preventDefault();
}

function drag(ev) {
   console.log('event .....',ev);
   $('.drop_area').css({left:ev.clientX+"px",top:ev.clientY+"px"});
}

ul{
   list-style:none;
   width:100%;
}

.item{
   width:100%;
   display:inline-block;
   height:20px;
   background:skyblue;
   margin:10px;
   text-align:center;
   color:#fff;
}

#drop_area{
  height:90px;
  border:1px solid #ccc;
}

.follow-cursor{
   display:inline-block;
   position:absolute;
   border:1px solid #ccc;
   width:50px;
   height:30px;
}

<ul>
   <li class="item">Item 1</li>
    <li class="item">Item 1</li>
    <li class="item">Item 1</li>
     <li class="item">Item 1</li>
</ul>

<span class="follow-cursor">6 Files</span>

<div id="drop_area" ondrop="drop(event)" ondragover="allowDrop(event)"></div>

Пожалуйста, помогите мне заранее спасибо!