<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
vue 实现 可以拖拽的穿梭框 --transfer
最新推荐文章于 2024-07-02 10:22:03 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)