SOURCE

var demo = new Vue({
  'el': '#demo',
  data: {
       typeList: [
        {
          text: "类型1",
          value: 1
        },
        {
          text: "类型2",
          value: 2
        },
        {
          text: "类型3",
          value: 4
        },
        {
          text: "类型5",
          value: 5
        }
      ],
      creatEl: null
  },
  mounted (){
   
  },
  methods: {
     dragover(e) {
      e.preventDefault();
    },
    onDrop(e) {
      if (this.creatEl) {
        e.preventDefault();
        let textBox = document.createElement("input");
        textBox.style.border = "1px solid #ccc";
        textBox.style.background= "#fff";
        textBox.style.padding = "4px 10px";
        textBox.style.margin = "0 5px";
        textBox.style.backgroundColor = "#eee";
        // textBox.setAttribute("contenteditable", false);
        // textBox.innerHTML = this.creatEl;
        // textBox.setAttribute("disabled", true);
        textBox.setAttribute("value", this.creatEl);
        textBox.setAttribute("type", "button");
        // textBox.setAttribute("unselectable", false);
        e.target.append(textBox);
        // this.keepLastIndex(e.target);
      }
      this.creatEl = null;
    },

    onDragStart(e) {
      this.creatEl = e.currentTarget.id;
    }
  }

});

<div id="demo">
    <div class="drag" >
      <div class="item-box">
        <span
          class="item"
          draggable="true"
          v-for="item in typeList"
          :key="item.value"
          :id="item.text"
          contenteditable="false"
          @dragstart="onDragStart"
        >{{item.text}}</span>
      </div>
      <div
        class="edit-box"
        contenteditable="true"
        ref="editBox"
        @drop="onDrop($event)"
        @dragover="dragover"
      ></div>
    </div>
  </div>

.drag {
  .item-box {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .edit-box {
    height: 400px;
    margin: 30px auto;
    padding: 10px;
    border: 1px solid #ddd;
    width: 500px;
    text-align: left;
    
  }
  .item {
    margin: 20px 5px;
    border: 1px solid #ccc;
    height: 32px;
    line-height: 30px;
    border-radius: 4px;
    padding: 0 20px;
  }
  input,button{
        background:#fff;

    }
}