vuedraggable表格嵌套-列表依次过渡

需求

实现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>

效果

描述

猜你喜欢

转载自blog.csdn.net/u013270347/article/details/112583671