draggable拖拽组件的使用

背景：左右两个数据栏，左侧为数据源，右侧为组建的目标数据。要实现左侧和右侧可以互相拖拽，但是左侧拖拽到右侧后源数据不变，右侧拖拽到左侧时，无论丢在左侧哪里都回到源数据原来的分组下；并且，左侧和右侧内部都可以上下拖拽调整位置。

效果图：
如下，左侧有分组，每一组可以直接通过拖拽A(xxx应用)、B（xxx应用）等上下调整组的位置，组内可以上下拖拽调整先后顺序。

代码：

import Draggable from "vuedraggable";

components: {
    Draggable,
}

<div class="transBox">
    <div class="source">
      <div class="title">源数据列表</div>
      <div class="wrapper">
        <draggable
          :list="instBySrvList"
          group="insts1"
          tag="ul"
        >
          <div v-for="item in instBySrvList" :key="item.srvId">
            <p class="serviceLabel">{{ item.label }}</p>
            <draggable
              :list="item.instList"
              group="insts"
              tag="div"
              @change="dragChange"
            >
              <li
                v-for="instItem in item.instList"
                :key="instItem.id"
                :instId="instItem.id"
              >
                <div>
                  <span style="font-size:13px;" class="instNameStyle">元数据1</span>
                </div>
              </li>
            </draggable>
          </div>
        </draggable>
      </div>
    </div>
    <div class="target">
      <div class="title">目标列表</div>
      <div class="wrapper">
        <draggable
           :list="instSelected"
           group="insts"
           tag="div"
           class="list"
           @change="rightDragChange"
         >
          <div
             v-for="inst in instSelected"
             :key="inst.id"
             :instId="inst.id"
             class="list-item-target"
          >
            <div style="display:flex;align-items: center;">
               <span class="item-label">元数据1</span>
            </div>
           </div>
        </draggable>
      </div>
    </div>
 </div>

  // 左侧 拖拽改变时触发
  dragChange (e) {
    this.instBySrvList = JSON.parse(JSON.stringify(this.instsList));
  }
  
  // 右侧drag改变时触发
  rightDragChange (e) {
    if (e.added) {
      const item = e.added.element;
      const newArr = this.instSelected.filter(item => item.id== e.added.element.id);
	  // 右侧有重复数据则删除
      if (newArr.length > 1) {
        this.instSelected.splice(e.added.newIndex, 1);
      }
    }
  }

示例的数据结构如下：
数据源：

instBySrvList: [{
	id: 111,
	srvId: 98,
	instList: [{
		id: 982,
		name: "元数据"
	},...]
},...]

目标数据：

instSelected: [{
	id: 11, 
	label: "数据1",
}, {
	id:12, 
	label: "数据2",
},...]