const [list, setList] = useState(initList)
const [draggedItem, setDraggedItem] = useState(null)

function onDragStartHandle(event, index) {
  setDraggedItem(list[index])

  event.dataTransfer.effectAllowed = "move"
  event.dataTransfer.setData('text/html', event.target.parentNode)
  event.dataTransfer.setDragImage(event.target.parentNode, 20, 20)
}

function onDragOverHandle(index) {
  const draggedOverItem = list[index]

  if (draggedOverItem === draggedItem) {
    return
  }

  const items = list.filter( item => item !== draggedItem)
  items.splice(index, 0, draggedItem)
  setList(items)
}

{
  list.map(item, index) => {
    return (
      <li key={ index }
          className="item-style"
          onDragOver={ () => {
            onDragOverHandle(index)
          }
      >
        <div
          draggable
          onDragStart={ (event) => {
            onDragStartHandle(event, index)
          }
        </div>
      </li>
    )
  }
}

const deletedItems = array.splice(start, deleteCount, item)