vue拖拽

理想归理想，现实归现实

这是咱们要实现的功能

html

<div class="itempannelparent">
        <div class="itempannel">
          <el-collapse v-model="activeNames">
            <el-collapse-item class="coll-item-name" title="流量节点" name="1">
              <ul>
                <li v-for="(item,index) in basicNode" :key="index" 
                  class="getItem" draggable @dragstart="handleDragstart($event, false)"
                  @dragente="ondragente"
                  @dragend="handleDragEnd($event,item)">
                  <img :data-name="item.name" :src="item.backImage" alt="">
                  <span>{{item.name}}</span>
                </li>
              </ul>
            </el-collapse-item>
          </el-collapse>
        </div>
        <div class="content" :class="styleType">
          <div data-posi="1" @dragstart="handleDragstart($event, true)" @drop="ondrop" @dragover="ondragover"></div>
          <div>
            <div data-posi="2" @dragstart="handleDragstart($event, true)" @drop="ondrop" @dragover="ondragover"></div>
            <div data-posi="3" @dragstart="handleDragstart($event, true)" @drop="ondrop" @dragover="ondragover"></div>
          </div>
        </div>
      </div>

import li from '@/assets/li.jpeg';
import chart from '@/assets/chart.jpeg';
import map from '@/assets/map.jpeg';

export default {
  data() {
    return {
      styleType: 'content1',

      activeNames: ['1'],
      basicNode: [
        {name: "li",backImage: li},
        {name: "chart",backImage: chart},
        {name: "map",backImage: map}
      ],
      currentDrag: void 0,
      li,chart,map,
      tmpMap: {
        map: `
          <div class="china-map">1</div>`,
        chart: `<div class="data-flow">2</div>`,
        li:` <div class="data-flow">3</div>`
      },

      keng: false,
      allTemplate: ``,
      one: '',
      two: '',
      three: ''
    };
  },
  props: {},
  components: {},
  computed: {},
  created() {},
  methods: {
    radioChange(val) {
      this.allTemplate = `
        <div class="data-view ${val}">
          ${this.one}
          <div class="data-west">
            ${this.two}
            ${this.three}
          </div>
        </div>`;
      console.log(this.allTemplate);
    },
    ondragover(e) {
      e.preventDefault();
    },
    ondragente(e) {
      e.preventDefault();
    },
    handleDragstart(e, flag = false) {
      this.keng = flag;
      this.currentDrag = e.target.getAttribute("data-name");
    },
    handleDragEnd(e) {
      e.preventDefault();
      this.currentDrag = void 0;
    },
    ondrop(e) {
      if (this.keng) {
        return;
      }
      e.preventDefault();
      if (e.target.hasChildNodes() || e.target.tagName !== 'DIV') {
        this.$message.error('当前节点已有元素');
        return;
      }
      const img = document.createElement('img');
      img.src = this[this.currentDrag];
      img.setAttribute('data-name', this.currentDrag);
      img.style.width = `100%`;
      img.style.height = `100%`;
      e.target.appendChild(img);
      const posi = e.target.getAttribute("data-posi");

      if (posi === '1') {
        this.one = this.tmpMap[this.currentDrag];
      } else if (posi === '2') {
        this.two = this.tmpMap[this.currentDrag];
      } else if (posi === '3') {
        this.three = this.tmpMap[this.currentDrag];
      }
      this.allTemplate = `
        <div class="data-view ${this.styleType}">
          ${this.one}
          <div class="data-west">
            ${this.two}
            ${this.three}
          </div>
        </div>`;
      console.log(this.allTemplate);
    },
  }
};

.itempannelparent {
  width: 100%;
  height: 650px;

  display: flex;
  &::-webkit-scrollbar {
    width: 1px;
    height: 1px;
  }
  .itempannel {
    width: 200px;
    border-right: 1px solid #e6e9ed;
    &::v-deep .el-collapse-item__header {
      padding-left: 10px;
    }
    ul {
      padding: 0px;
      // padding-left: 16px;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      li {
        color: rgba(0, 0, 0, 0.65);
        border: 1px solid rgba(0, 0, 0, 0);
        list-style-type: none;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 0 16px 20px 20px;
        &:hover {
          cursor: move;
        }
        img {
          width: 54px;
          height: 54px;
          margin-bottom: 15px;
        }
      }
    }
  }
  .content {
    flex: 1;
    background: rgba(0, 0, 0, 0.3);
    background: url('../../../assets/bigviewbg.jpeg') no-repeat;
    background-size: cover;
    padding: 170px 114px 0px;
  }
}