vue 拖拉draggable (一)

1、创建工程

vue create draggable

2、安装包

npm i -S vuedraggable
npm install node-sass --save-dev
npm install sass-loader --save-dev

3、两页拖拽

<template>
  <div>
    <div>
      {{ drag ? '拖拽中' : '没有拖拽' }}
    </div>
    <div class="layout-content">
      <div class="left">
        <draggable v-model="leftItems" force-fallback="true" group="dragGroup" animation="1000" chosen-class="chosen" @start="onStart" @end="onEnd">
          <transition-group class="none-array">
            <div class="element" v-for="(element, index) in leftItems" :key="index">{{ element.name }}</div>
          </transition-group>
        </draggable>

      </div>
      <div class="content">

      </div>
      <div class="right">
        <draggable v-model="rightItems" force-fallback="true" group="dragGroup" animation="1000" chosen-class="chosen" @start="onStart" @end="onEnd">
          <transition-group class="none-array">
            <div class="element" v-for="(element, index) in rightItems" :key="index">{{ element.name }}</div>
          </transition-group>
        </draggable>
      </div>

    </div>

  </div>
</template>

<script>
import draggable from "vuedraggable"
export default {
  components: {
    draggable
  },
  name: 'HelloWorld',
  data() {
    return {
      drag: false,
      leftItems: [
        { id: 1, name: '第一条记录--------' },
        { id: 2, name: '第二条记录--------' },
        { id: 3, name: '第三条记录--------' },
        { id: 4, name: '第四条记录--------' }
      ],
      rightItems:[{ id: 3, name: '右边的记录--------' },]

    }
  },
  props: {
    msg: String
  },
  methods:{
    onStart(){
      this.drag=true
    },
    onEnd(){
      this.drag=false
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
// 空数组需要一定高度 才能拖入
.none-array{
  min-height: 100px;
  display: block;
}
.element {
  padding: 6px;
  background-color: #7FFFD4;
  border: solid 1px #eee;
  margin-bottom: 10px;
  cursor: move;
}

.element:hover {
  background-color: #40E0D0;
}

// 选中拖拽的样式
.chosen {
  border: solid 2px #3089dc !important;
}

.layout-content {
  display: flex;
  height: 700px;

  .left {
    width: 300px;
    background: #F0FFF0;
  }

  .content {
    flex: 1;
    background: #FFFAF0;
  }

  .right {
    width: 300px;
    background: #F0FFF0;
  }
}
</style>

4、属性说明

• v-model="leftItems" 多列的时候需要绑定数组
• force-fallback 设置为true，忽略HTML5的拖拽行为
• group 相同组之间可以相互拖拽
• chosenClass 被选中目标的样式，自定义样式可能需要加!important，并把forceFallback属性设置成true
• transition-group class="none-array" vue中的transition-group，class添加一定高度才能保证空数组的时候能他拖入东西