「AntV」x6 自定义拖拽

长期更新版请移步 语雀

相信你们在开发中更多的需求是需要自定义拖拽源，毕竟自定义的功能扩展性高一些，而且可以根据你的业务需求灵活设置。自定义拖拽的优点就是：万物皆可成为拖拽源，不管你使用的是html标签，还是第三方的ui框架，或者树形列表，……这些都可以设置成拖拽源，只有你想不到的，没有官方做不到的，来吧，开整。

在线体验（国内镜像）：https://sxdpanda.gitee.io/antv-admin/#/antv/demo <font style="color:#DF2A3F;">(最近gitee的pages服务在维护，暂时没法访问了)</font>

在线体验（备用地址）：https://zlecheng.github.io/antv-page/#/home

官方提供的拖拽

自定义的拖拽

解决方案

这里使用的是Dnd插件，因为我看官方介绍说Stencil插件内部也是依靠Dnd实现的，索性就直接使用Dnd来搞吧

步骤1：初始化Dnd

// 全局graph变量
let graph = null;
// 先定义个全局的dnd变量
let dnd = null;
// 在mounted中对dnd进行初始化（在graph之后初始化）
graph = new Graph({
  container: proxy.$refs.container,
  width: '100%',
  ...tempConfig  // 这个是我的画布配置
});
dnd = new Dnd({
  target: graph,
  scaled: false,
  dndContainer: proxy.$refs.dndContainer
});

步骤2：定义拖拽事件

/**
 * 自定义拖拽源事件
 * @param {*} e
 * @param {*} treeNode 根据需要传入要添加的参数
 * @param {*} data 根据需要传入要添加的参数
 * 这里使用的是elementPlus的tree组件
 */
const startDrag = (e, treeNode, data) => {
  console.log('eee', e);
  console.log('treeNode', treeNode);
  console.log('data', data);
  const node = graph.createNode({
    shape: 'cu-data-node',
    width: 150,
    height: 104,
    label: data?.label,
    // 传递给自定义节点的数据
    data: {
      label: data?.label,
      img: data?.img,
      desc: data?.desc
    },
    ports: {
      ...port,
      items: [
        {
          group: 'top'
        }
      ]
    }
  });
  dnd.start(node, e);
};

步骤3：自定义html节点

  // 注册自定义节点 图标+标题+描述
  Shape.HTML.register({
    shape: 'cu-data-node',
    width: 'auto',
    height: 104,
    effect: ['data'],
    html(cell) {
      // 获取节点传递过来的数据
      const { label, img, desc } = cell.getData();
      // 创建自定义的节点容器
      const container = document.createElement('div');
      container.setAttribute('class', 'cu-container');
      // 图片根据不同的类型进行切换，可以是后端返回的图标，也可以是自己本地的图标，如果是后端返回就通过节点的data传进来
      const container_img = document.createElement('img');
      container_img.src = currentTab.value === 0 ? '/src/assets/images/operator/datasouce.png' : img;
      container_img.setAttribute('class', 'cu-container-img');


      const container_title = document.createElement('div');
      container_title.innerText = label;
      container_title.setAttribute('class', 'cu-container-title');


      const container_desc = document.createElement('div');
      container_desc.setAttribute('class', 'cu-container-desc');
      container_desc.innerText = desc || '描述信息';


      container.appendChild(container_img);
      container.appendChild(container_title);
      container.appendChild(container_desc);


      return container;
    }
  });

步骤4：元素绑定拖拽事件

<!-- $event必传，后面的参数根据你的业务需求动态添加 -->
<div  @mousedown="startDrag($event, node, data)">拖拽的节点</div>

:::success
🚀 官方链接 / _Official link_

<u>Dnd插件</u>

<u>Stencil插件</u>

<u>图片导出</u>

<u>1.x常见问题</u>

<u>坐标转换</u>

<u>Transform</u>

<u>Model</u>

<u>getsuccessors</u>

<u>X6 Vue3 Components</u>

<u>微信收录文章</u>

:::

✈️ demo体验 / _Experience_

<u><font style="color:#8A8F8D;">关系图谱(国内镜像)</font></u>

<u>关系图谱(备用地址)</u>

<u><font style="color:#8A8F8D;">拖拽demo(国内镜像)</font></u>

<u>自定义拖拽(备用地址)</u>

🌍 关联文章 / _Related article_

<u>自定义拖拽</u>

<u>框选添加右键菜单</u>

<u>图片导出问题汇总</u>

<u>自定义html节点</u>

<u>自定义vue节点(vue3)</u>

<u>画布添加标尺</u><u></u>

<u>移动端画布平移失效</u>