vue拖拽

理想归理想，现实归现实

我的github: 李大玄
我的私人博客: 李大玄
我的npm开源库: 李大玄
我的: 李大玄
我的CSDN: 李大玄
我的掘金: 李大玄
哔哩哔哩: 李大玄

这是咱们要实现的功能

在这里插入图片描述

html

        

          
            
              

                

                  
                  {{item.name}}
                
              
            
          
        
        

          

          

            

            

          
        
      

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: `
          
1
`,
        chart: `
2
`,
        li:` 
3
`
      },

      keng: false,
      allTemplate: ``,
      one: '',
      two: '',
      three: ''
    };
  },
  props: {},
  components: {},
  computed: {},
  created() {},
  methods: {
    radioChange(val) {
      this.allTemplate = `
        

          ${this.one}
          

            ${this.two}
            ${this.three}
          
        
`;
      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 = `
        

          ${this.one}
          

            ${this.two}
            ${this.three}
          
        
`;
      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;
  }
}