需求
实现table横线，纵向，及内部多个子元素的拖拽。参考可以去看类似领歌项目敏捷开发平台中创建看板中的功能
代码
...
<draggable :list="data" :group="{ name: 'item' }" class="list-group" ghost-class="ghost-class" dragable=".item">
<transition-group name="card-magic" @before-appear="beforeEnter" @appear="enter" @before-enter="beforeEnter" @enter="enter" @leave="leave">
<el-card
v-for="(item, index) in data"
v-show="iconStatus === 'open' || index === 0"
:key="item.id"
:data-index="index"
:data-total="data.length"
shadow="hover"
class="list-group-item item"
@click.native="clickCard(item.id)"
@mouseenter.native="enterCard(item.id)"
@mouseleave.native="leaveCard(item.id)"
>
<div v-show="mark === item.id" class="icons">
<el-link :underline="false" @click.native="edit"><i class="el-icon-edit"/></el-link>
<el-link :underline="false" @click.native="remove"><i class="el-icon-delete"/></el-link>
</div>
<!-- <el-tag v-cloak class="tag" :type="item.type | warnColor">{
{
item.type | warnMark }}</el-tag> -->
<el-link :underline="false" class="drag-color">{
{
item.type }}</el-link>
</el-card>
</transition-group>
<div slot="footer" class="drag-color">
<transition name="fade-transform">
<div v-if="isAdd">
<el-input v-model="title" type="textarea" class="textarea" :rows="2" placeholder="" maxlength="30" show-word-limit style="margin-bottom: 10px" />
<br />
<el-button type="primary" @click="add">确 定</el-button>
<el-button type="primary" @click="isAdd = false">取 消</el-button>
</div>
<div v-else>
<el-link class="left" :underline="false" @click="addTitle">
<i class="el-icon-plus" />
添加任务
</el-link>
<el-link class="right" :underline="false" @click="handleToggle">
<i class="el-icon-d-arrow-left" :class="[iconStatus]" />
</el-link>
</div>
</transition>
</div>
</draggable>
...
<script>
import gsap from 'gsap'
...
beforeEnter(el) {
let {
total, index } = el.dataset
el.style.opacity = 0
el.style.height = ~~((total - index) / total) * 74 + 'px'
},
enter(el, done) {
gsap.to(el, {
opacity: 1,
height: '74px'
delay: el.dataset.index * 0.3,
onComplete: done
})
},
leave(el, done) {
let {
total, index } = el.dataset
gsap.to(el, {
opacity: 0,
height: ~~((total - index) / total) * 74 + 'px',
delay: (total - index) * 0.3,
onComplete: done
})
}
...
</script>
效果
