zoukankan      html  css  js  c++  java
  • vuedraggable 实现拖拽功能

    需求:实现左右两列的 div 可相互拖拽交换数据,(如下图所示)

    话不多说,直接上代码:

    现在,我们来拖拽看看效果:

    这样,就实现了既能上下列内拖拽,又能左右跨列拖拽

    <template>
      <div>
        <vuedraggable class="left" v-model="list1" group="people" :options="dragOptions">
          <transition-group tag="div">
            <div v-for="item in list1" :key="item" class="item">
              <p>{{item}}</p>
            </div>
          </transition-group>
        </vuedraggable>

        <vuedraggable class="right" v-model="list2" group="people" :options="dragOptions">
          <transition-group tag="div">
            <div v-for="item in list2" :key="item" class="item">
              <p>{{item}}</p>
            </div>
          </transition-group>
        </vuedraggable>
      </div>
    </template>

    <script>
    import vuedraggable from 'vuedraggable'
    export default {
      data () {
        return {
          dragOptions:{
            animation: 120,
            scroll: true,
            group: 'sortlist',
            ghostClass: 'ghost-style'
          },
          list1: [1,3,5,7,9],
          list2: [2,4,6,8,10]
        }
      },
      components: {
        vuedraggable
      },
    }
    </script>

    <style scoped>
    .item{
       300px;
      height: 50px;
      background-color: #42b983;
      color: #ffffff;
      margin-top: 10px;
      transform: scale(0.9);
    }
    .left, .right {
      display: inline-block;
       40%;
      height: 500px;
      border: 2px solid #333
    }
    </style>

      

  • 相关阅读:
    git各种操作:基本操作 and 多人协作 and 冲突解决
    mini-ndn0.5.0 安装教程 (避免踩坑)
    ubuntu18.04 更换镜像源
    自定义日志轮转
    linux常用命令
    Thinkphp6 + uniapp框架,接口访问跨域问题
    机器学习-主成分分析PCA与奇异值分解SVD
    机器学习-数据预处理&特征工程
    机器学习-梯度提升树(xgboost)
    github打不开怎么办
  • 原文地址:https://www.cnblogs.com/edwardwzw/p/13088242.html
Copyright © 2011-2022 走看看