vue 拖拉draggable 拖拉组件 (二)

1、安装包

npm i element-ui -S

2、引入组件
在main.js文件中添加

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI)

3、代码

<template>
  <div>
    <div>
      {{ drag ? '拖拽中' : '没有拖拽' }}
    </div>
    <div class="layout-content">
      <div class="left">
        <draggable handle=".title-block" 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">
              <div class="title-block">
                {{ element.name }}
              </div>
              <div class="component-box">
                <component :is="element.name"></component>
              </div>
            </div>
          </transition-group>
        </draggable>

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

      </div>
      <div class="right">
        <draggable handle=".title-block" 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">
              <div class="title-block">
                {{ element.name }}
              </div>
              <div class="component-box">
                <component :is="element.name"></component>
              </div>
            </div>
          </transition-group>
        </draggable>
      </div>

    </div>

  </div>
</template>

<script>
import draggable from "vuedraggable"
import { calendar, imagesComponent } from "@/components/dragComponents"
export default {
  components: {
    draggable,
    calendar, imagesComponent
  },
  name: 'HelloWorld',
  data() {
    return {
      drag: false,
      leftItems: [
        { id: 1, name: 'calendar' },
        { id: 2, name: 'imagesComponent' },
      ],
      rightItems: [{ id: 3, name: 'imagesComponent' },]

    }
  },
  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 {
  margin-bottom: 10px;
  border-radius: 6px;
  overflow: hidden; //解决圆角
  background: #fff;

  .title-block {
    cursor: move;
    height: 40px;
    line-height: 40px;
    background-color: #7FFFD4;
  }

  .component-box {
    padding: 20px;
  }
}


// 选中拖拽的样式  拖动的时候隐藏底部区域
.chosen {
  .component-box {
    display: none;
    height: 0;
  }
}

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

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

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

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

4、注意
:handle=".mover" 只有当鼠标移动到css为mover类的元素上才能拖动，注意有个点
5、创建的多个组件页面,在一个js页面中组合导出，这样可以一次性导入多个组件

export {default as imagesComponent } from './imagesComponent.vue'
export {default as calendar } from './calendar.vue'