vue3 + antv/x6 实现拖拽侧边栏节点到画布

前篇:vue3+ts使用antv/x6 + 自定义节点
前篇:vue3+antv x6自定义节点样式

1、创建侧边栏

  • 用antd的menu来做侧边栏
sql 复制代码
npm i --save ant-design-vue@4.x
js 复制代码
//入口文件main.js内
import Antd from 'ant-design-vue';
import App from './App';
import 'ant-design-vue/dist/reset.css';

const app = createApp(App);
app.use(Antd).mount('#app');
  • 侧边栏结构
json 复制代码
// index.js内,拖拽节点侧边栏
export const MENU_TREE = [
    {
        key: '1',
        label: 'type1',
        title: 'drag node 1',
    },
]
  • 画布展示
js 复制代码
//index.vue内
<template>
    <div class="box">
        <a-menu
            class="menutree"
            :items="menutree"
        />
        <div id="container"></div>
    </div>
    <TeleportContainer/>
</template> 
<script setup lang='ts'>
import {MENU_TREE} from "./index";
let menutree = MENU_TREE
</script>
<style scoped>
.menutree{
    display: flex;
    position: relative;
}
#container{
    height: 100vh;
}
.menutree{
    width: 200px;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    flex-direction: column;
    z-index: 2;
  	user-select: none;/* 鼠标按下时没有复制等操作 */
}
</style>    

2、拖拽交互

  • 安装
sql 复制代码
  npm install @antv/x6-plugin-dnd --save
  • 引入并使用(index.vue)
js 复制代码
import { Dnd } from '@antv/x6-plugin-dnd'
//...
let dnd:Dnd
//开始拖拽
const startDrag = (e,nodevo)=>{
    const node = graph.createNode(formatData(nodevo))
    dnd.start(node, e)
}
//初始化画布
const graphInit = ()=>{
    //...
    dnd = new Dnd({
        target: graph,
        getDragNode: (node) => node.clone({ keepId: true }),//拖拽开始时,获取被拖拽的节点,默认克隆 dnd.start 传入的节点。
        getDropNode: (node) => {//拖拽结束时,获取放置到目标画布的节点,默认克隆被拖拽的节点。
            return graph.createNode(formatData(node.getData()))
        }
    })
}

3、侧边栏和拖拽建立联系

  • 在侧边栏menu中添加拖拽节点信息(index.js)
json 复制代码
MENU_TREE = [{
    key: '1',
    label: 'type1',
    title: 'drag node 1',
    ports:[{
        id: 'port-1',
        name: 'drag1-port1',
    }]
}]
  • fomatMenu处理menu内需要拖拽到节点信息(index.js)
js 复制代码
export function fomatMenu (menu: any, dragStart) {
    let tempmenu = menu.map(ele => {
        const nodeVO = {
            id: `node-${Math.random()}`,
            nodeName: ele.title,
            x: 0,
            y: 0,
            ports: ele.ports
        }
        return {
            key: ele.key,
            label: ele.label,
            onMousedown: (e: Event) => {
                dragStart(e, nodeVO)
            },
        }
    });
    return tempmenu
}
  • 主画布渲染menu时先处理menu信息
js 复制代码
import {MENU_TREE,fomatMenu} from "./index";
let menutree = fomatMenu(MENU_TREE,startDrag) //放在startDrag之后
  • 效果
相关推荐
工一木子25 分钟前
URL时间戳参数深度解析:缓存破坏与前端优化的前世今生
前端·缓存
半点寒12W2 小时前
微信小程序实现路由拦截的方法
前端
某公司摸鱼前端3 小时前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~3 小时前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程3 小时前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏3 小时前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083164 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头4 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's5 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫5 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈