vue 实现 可以拖拽的穿梭框 --transfer

<template>
<div id="box">
  <div class="box">
    <div class="title">
      <span :class="{active: leftSelect === data1.length}" @click="selectAll(data1)">课件列表</span>
      <span>{
  {leftSelect ? leftSelect : 0}}/{
  {data1.length}}</span>
    </div>

    <div class="search_parent">
      <!-- <div class="search_div"> -->
        <input class="search_input" v-model="sourceData" :class="heightLight ? 'search_input_focus' : ''" type="text" @focus="heightLight=true" @blur="heightLight=false" placeholder="请输入课件级别/编号">
      <!-- </div> -->
    </div>

    <div @drop="dropPub($event, 2)" @dragover.prevent class="left">
      <div
        @drag="ondrag"
        @dragstart="dragstart($event, item)"
        @dragend="dragend"
        draggable="true"
        class="hover-color"
        :class="{active: item.isSelect }"
        v-on:click="hanldleClick(data1, item.id)"
        v-for="(item,index) in changeSourceData"
        :key="index">{
  {item.value}}</div>
    </div>
  </div>

  <div class="middle">
    <div v-on:click="moveItem(data2, data1, 1)" :class="{active: rightSelect > 0}"><i class="el-icon-arrow-left"></i></div>
    <div v-on:click="moveItem(data1, data2, 2)" :class="{active: leftSelect > 0}"><i class="el-icon-arrow-right"></i></div>
  </div>

  <div class="box">
    <div class="title">
      <span :class="{active: rightSelect === data2.length}" @click="selectAll(data2)">已选课件</span>
      <span>{
  {rightSelect ? rightSelect : 0}}/{
  {data2.length}}</span>
    </div>

    <div class="search_parent">
      <!-- <div class="search_div"> -->
        <input class="search_input" v-model="targetData" :class="heightLight1 ? 'search_input_foc