JSPM

import virtualList from 'react-virtual-drag-list'

function Virtual() {

  const list = [{id: '1', text: 'asd'}, {id: '2', text: 'fgh'}, ...]


  const handleToTop = () => {
    console.log('istop')
  }
  const handleToBottom = () => {
    console.log('isbottom')
  }
  const handleDragEnd = (arr) => {
    console.log(arr, 'new arr after deag end')
  }

  return (
    <virtualList
      dataKey="id"
      dataSource={ list }
      header={ <div class="loading">top loading...</div> }
      footer={ <div class="loading">bottom loading...</div> }
      v-top={ handleToTop }
      v-bottom={ handleToBottom }
      v-dragend={ handleDragEnd }
    >
      {
        (record, index, dataKey) => {
          return (
            <div>
              <span>{ index }</span>
              { record.text }
            </div>
          )
        }
      }
    </virtualList>
  )
}