<template>
  <div class="flow-menu" ref="tool">
    <div v-for="menu  in  menuList" :key="menu.id">
      <span class="ef-node-pmenu" @click="menu.open = !menu.open">
        <a-icon :type="menu.open ? 'caret-down' : 'caret-right'"></a-icon>
        &nbsp;{{menu.name}}
      
 
</span>
      <ul v-show="menu.open" class="ef-node-menu-ul">
        <draggable @end="end" @start="move" :v-bind="draggableOptions">
          <li
            v-for="subMenu in menu.children"
            class="ef-node-menu-li"
            :key="subMenu.id"
            :type="subMenu.unique"
 

          >
            <a-icon :type="subMenu.ico" style="paddingRight: 8px" :style="{ color: subMenu.icoColor }"></a-icon>
            {{subMenu.name}}
          </li>
        </draggable>
      </ul>
    </div>
  </div>
</template>
<script>
import draggable from 
 
'vuedraggable'
import lodash from 'lodash'
import nodeType from './nodeType'

const mousePosition = {
  left: -1,
  top: -1
}

export default {
  data() {
    return {
      activeNames: '1',
      // draggable配置引數參考 https://www.cnblogs.com/weixin186/p/10108679.html
      draggableOptions: {
        preventOnFilter: false,
        sort: false,
        disabled: false,
        ghostClass: 'tt',
        // 不使用H5原生的配置
        forceFallback: true
        // 拖拽的時候樣式
        // fallbackClass: 'flow-node-draggable'
      },
      // 預設開啟的左側選單的id
      defaultOpeneds: ['1', '2'],
      menuList: lodash.cloneDeep(nodeType),
      nodeMenu: {}
    }
  },
  components: {
    draggable
  },
  created() {
    /**
     * 以下是為了解決在火狐瀏覽器上推拽時彈出tab頁到搜尋問題
     * @param event
     */
    if (this.isFirefox()) {
      document.body.ondrop = function(event) {
        // 解決火狐瀏覽器無法獲取滑鼠拖拽結束的座標問題
        mousePosition.left = event.layerX
        mousePosition.top = event.clientY - 50
        event.preventDefault()
        event.stopPropagation()
      }
    }
  },
  methods: {
    // 根據型別獲取左側選單物件
    getMenuByType(unique) {
      for (let i = 0; i < this.menuList.length; i++) {
        const children = this.menuList[i].children
        for (let j = 0; j < children.length; j++) {
          if (children[j].unique === unique) {
            return children[j]
          }
        }
      }
    },
    // 拖拽開始時觸發
    move(evt, a, b, c) {
      var unique = evt.item.attributes.type.nodeValue
      this.nodeMenu = this.getMenuByType(unique)
    },
    // 拖拽結束時觸發
    end(evt, e) {
      this.$emit('addNode', evt, this.nodeMenu, mousePosition)
    },
    // 是否是火狐瀏覽器
    isFirefox() {
      var userAgent = navigator.userAgent
      if (userAgent.indexOf('Firefox') > -1) {
        return true
      }
      return false
    }
  }
}
</script>
<style scoped>
.flow-menu {
  user-select: none;
}
</style>

https://www.jianshu.com/p/e8ff1e1cafb1 參考地址