在vue中使用alloyfinger,实现元素的拖拽，缩放，双击，长按等功能

Posted 2023-05-18

参考技术A 在vue项目中实现拖拽，缩放，双击，长按等功能
使用的是腾讯开发的 AlloyFinger 插件

vue 集成Dhtmlx。实现列表到树形的拖拽

效果查看： 将右侧菜单 拖拽入左侧树中：

1，public 引入 dhtmlx, 并在index.html中引用：

2，封装 vue 组件：

<template>
  <div id="dhtmlTree"
       style="width:95%;
       height:100%;
       overflow:auto;"
  >
  </div>
</template>

<script>

let dhtmlTree = undefined

export default 
  name: 'DHtmlXTree',
  data() 
    return 
      rightClickId: undefined,
      tree: undefined
    
  ,
  props: 
    enableDragAndDrop: 
      type: Boolean,
      default: false
    ,
    leftClickId: 
      type: Array,
      default: undefined
    ,
    menuUrl: 
      type: String,
      default: undefined
    ,
    data: 
      type: Array,
      default: []
    ,
    props: 
      type: Object,
      required: true
    ,
    openedId: 
      type: String,
      required: false
    
  ,
  mounted() 
    this.$nextTick(function() 
      this.initTree()
    )
  ,
  methods: 
    setItemText(id, text) 
      if (id) 
        dhtmlTree.setItemText(id, text)
      
    ,
    moveToItem(id, targetId) 
      // "down" -  把结点移动到下方(不用再意层次关系)
      // "up" - 把结点移动到上方
      // "left" - 把结点直接移动到上层位置
      //"item_child" - 把结点移动到 第三个参数子结点  的位置作为子结点
      // "item_sibling" -把结点移动到 第三个参数兄弟结点的位置 作为兄弟结点
      if (id) 
        dhtmlTree.moveItem(id, 'item_child', targetId)
      
    ,
    deleteItem(id) 
      if (id) 
        dhtmlTree.deleteItem(id)
      
    ,
    insertNewItem(pid, tid, text) 
      dhtmlTree.insertNewItem(pid, tid, text)
    ,
    //-------------------
    reloadTree(treeList) 
      dhtmlTree.deleteChildItems(0)
      dhtmlTree.loadJSONObject(
        id: 0,
        text: '',
        item: this.treeRefactorFiled(treeList, this.props['id'], this.props['name'])
      );
    ,
    //添加   树结构    字段
    treeRefactorFiled(data, id, label) 
      let newTree = []
      data.map(item => 
        item.id = item[id]
        item.text = item[label]
        if (item.children && item.children.length > 0) 
          item['item'] = this.treeRefactorFiled(item.children, id, label)
        
        newTree.push(item)
      )
      return newTree
    ,
    initTree() 
      // 获取当前页面地址，如http://localhost:8080/admin/index
      let wPath = window.document.location.href
      let pos = wPath.indexOf('#' + this.$route.path)
      let serverUrl = wPath.substring(0, pos)

      let imgPath = serverUrl + 'libs/dhtmlx/imgs/dhxtree_skyblue/'
      let menuPath = serverUrl + 'libs/dhtmlx/imgs/dhxtree_skyblue/'

      dhtmlTree = new dhtmlXTreeObject('dhtmlTree', '100%', '100%', 0)
      dhtmlTree.setSkin('dhx_skyblue')
      dhtmlTree.setImagePath(imgPath)
      dhtmlTree.enableDragAndDrop(this.enableDragAndDrop)
      dhtmlTree.loadJSONObject(this.treeData)
      dhtmlTree.setOnClickHandler((id) => 
        //点击了鼠标左键
        this.$emit('onTreeLeftClick',  id )
      )
      dhtmlTree.attachEvent('onDrop', (sId, tId, id, sObject, tObject) => 
        //移动了  自己的 子项   返回   移动项id 和 目标项id
        this.$emit('onTreeDropedSelfItem', 
          sId, tId
        )
      )

      //右键选中   事件
      dhtmlTree.setOnRightClickHandler((id) => 
        this.rightClickId = id
        return false
      )
      if (this.menuUrl) 
        //添加  右键菜单项
        let menu = new dhtmlXMenuObject()
        dhx4.ajax.method = 'get'
        menu.setIconsPath(menuPath)
        menu.renderAsContextMenu()
        menu.attachEvent('onClick', (type) => 
          if (type === 'edit') 
            this.$emit('onTreeEdit', 
              id: this.rightClickId
            )
           else if (type === 'delete') 
            this.$emit('onTreeDelete', 
              id: this.rightClickId
            )
          
        )
        menu.loadStruct(serverUrl + this.menuUrl)
        dhtmlTree.enableContextMenu(menu)
      

      this.tree = dhtmlTree

      // // dhtmlTree.insertNewItem(0, "1", "Root");
      // dhtmlTree.attachEvent("onBeforeContextMenu", function (itemId) 
      //   // if (dhtmlTree.hasChildren(itemId) > 0) 
      //   //   menu.hideItem('outher');
      //   //  else 
      //   //   menu.showItem('outher');
      //   // 
      //   return true
      // )

      // dhtmlTree.setOnRightClickHandler((id) => 
      //   //选中了鼠标右键
      //   this.rightSelectedId = id;
      //   return false;
      // );

      // dhtmlTree.enableCheckBoxes(1);
      // function toncheck(id,state)
      //   doLog("条目 "+tree.getItemText(id)+" 已经 " +((state)?"被选中":"未被选中"));
      // 
      // dhtmlTree.getAllChecked()  //获取所有选中的条目
      // dhtmlTree.getAllCheckedBranches() //获取所有选中的子条目及其父条目
      // dhtmlTree.enableThreeStateCheckboxes(true);
      //拖拽之前
      // dhtmlTree.attachEvent("onBeforeDrag", function (id) 
      //
      //   return true;
      // );
    
  


</script>

<style>


</style>

3， 使用：：

  <d-html-x-tree
          ref="desktopTree"
          :data="desktopList"
          :enableDragAndDrop="true"
          :props="
            id:'desktop_id',
            name:'desktop_name'
          "
          @onTreeEdit="onTreeEdit"
          @onTreeDelete="onTreeDelete"
          @onTreeLeftClick="onTreeLeftClick"
          menu-url="/html/menu.xml"
        >
        </d-html-x-tree>

4，右侧 列表添加拖拽：：

     array.map(item => 
          this.$refs.desktopTree.$data.tree.makeDragable(item.moudle_id,
            (drop_obj, source_id, target_on, target_before) => 
              	//
          	    drop_obj.insertNewItem(target_on, source_id, "插入了一行")
            )
        )