模仿element-ui实现了可以拖拽的穿梭框--transfer

最新推荐文章于 2024-06-01 15:46:07 发布

qq_39738977

最新推荐文章于 2024-06-01 15:46:07 发布

阅读量5.1k

点赞数 5

分类专栏： element-ui transfer github

本文链接：https://blog.csdn.net/qq_39738977/article/details/88990072

版权

本文档详细介绍了如何从头开始模仿element-ui，实现一个支持拖拽操作的穿梭框组件。通过阅读，你可以了解到实现拖拽功能的关键步骤和相关技术，包括事件监听、元素位置判断和数据更新等。

摘要由CSDN通过智能技术生成

<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_focus' : &#