vue 拖拽框架 draggable

 

直接使用 

npm i -S vuedraggable 

页面使用

<template>
  <div class="addProduct">
    <el-dialog title="流程" :visible.sync="addTemplate" width="900px">
      <div class="flex">
        <div class="addTemplate-left">
          <div @click="addType=false">完整三代</div>
          <div @click="addType=false">完整三代</div>
          <div @click="addType=false">完整三代</div>
          <div @click="addType=true">+新增流程</div>
        </div>
        <div class="flex addTemplate-content">
          <div class="addTemplate-content-left">
            <div class="addTemplate-content-left-title">完整三代流程</div>
            <div style="margin:0 15px 8px 15px;" v-if="addType">
              <div style="padding:10px 0;">
                <span class="colorRed">*</span>流程名称
              </div>
              <el-input placeholder="请输入流程名称" style="width:190px;"></el-input>
            </div>
            <draggable
              v-model="fruit"
              :options="dragOptions2"
              :move="allow"
              :clone="clone"
              class="addTemplate-content-left-draggble"
              :style="addType?'height:335px;':''"
            >
              <div
                v-for="(element,index) in fruit"
                :key="index"
                class="draggable-name flex-justify-between"
              >
                <div>
                  <span class="draggable-name-border">{{index+1}}</span>
                  {{element}}
                </div>
                <i class="el-icon-close" @click="draggChange('fruit',index)"></i>
              </div>
            </draggable>
          </div>
          <div class="addTemplate-content-right">
            <draggable
              v-model="girl"
              :options="dragOptions1"
              class="flex addTemplate-content-right-list"
            >
              <div
                v-for="(element,index) in girl"
                :key="index"
                class="draggable-name-right"
              >{{element}}</div>
            </draggable>
            <div class="draggable-name-right">+新增流程</div>
          </div>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="addTemplate = false">取消</el-button>
        <el-button type="primary" @click="addTemplateChange">保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  name: "addProduct",
  data() {
    return {
      fruit: [
        "我是一",
        "我是二",
        "我是三",
      ],
      girl: ["你是一", "你是二", "你是三", "你是死"],
      addTemplate: true,
      flowIndex: 0,
      dragOptions1: {
        animation: 0,
        group: {
          name: "description",
          pull: "clone",
          put: false
        },
        ghostClass: "ghost"
      },
      dragOptions2: {
        animation: 0,
        group: "description"
      }
    };
  },
  components: {
    draggable
  },

  methods: {

    clone(e) {
      console.log(e);
    },
    allow(evt) {
      // console.log(evt)
      // console.log(evt.relatedContext)
      // return (evt.draggedContext.element.name!== 'b')
    }
  }
};
</script>
<style scoped lang="scss">
@import "../../filters/css/all.css";
.addProduct {
  .addTemplate-left {
    width: 200px;
    border: 1px solid #d6d6d6;
    text-align: center;
    > div {
      padding: 10px 0;
    }
  }
  .addTemplate-content {
    .addTemplate-content-left {
      width: 400px;
      height: 480px;
      background: #f4f4f4;
      .addTemplate-content-left-title {
        font-size: 16px;
        font-weight: 700;
        padding: 10px 15px;
      }
      .addTemplate-content-left-draggble {
        margin: auto;
        width: 280px;
        height: 420px;
        overflow-x: visible;
        overflow-y: auto;
      }
      .addTemplate-content-left-draggble::-webkit-scrollbar {
        display: none;
      }
      .draggable-name {
        padding: 10px 10px;
        background: #fff;
        border: 1px dashed #d6d6d6;
        width: 200px;
        border-radius: 5px;
        margin: 5px;
        margin-right: 30px;
        margin-left: 35px;
        position: relative;
        .draggable-name-border {
          position: absolute;
          left: -30px;
          top: 8px;
          color: rgb(0, 102, 255);
          background: #fff;
          z-index: 1002;
          border: 1px solid rgb(0, 102, 255);
          border-radius: 50%;
          width: 20px;
          height: 20px;
          display: block;
          line-height: 20px;
          text-align: center;
        }
        .el-icon-close {
          position: absolute;
          right: -25px;
          top: 8px;
          z-index: 1002;
          border-radius: 50%;
          width: 20px;
          height: 20px;
          display: block;
          line-height: 20px;
          text-align: center;
        }
      }
    }
    .addTemplate-content-right {
      width: 265px;
      border: 1px solid #d6d6d6;
      .addTemplate-content-right-list {
        flex-wrap: wrap;
      }
      .draggable-name-right {
        border: 1px dashed #d6d6d6;
        padding: 10px 0;
        width: 120px;
        text-align: center;
        margin: 5px;
        border-radius: 5px;
      }
    }
  }
}
</style>

 

　　效果

录制效果有点卡顿