子节点无法拖动

[Pony]

框架：vue3
系统win11
浏览器：edge
跟着官方的文档走，发现无法拖动子节点，会默认选中节点上的文字，无法实现自由拖动等需求

<script setup> // 页面加载完成后执行 import { ref,onMounted,shallowRef } from "vue"; import MindMap from "simple-mind-map"; import AssociativeLine from 'simple-mind-map/src/plugins/AssociativeLine.js' MindMap.usePlugin(AssociativeLine) let mindMap = null // 当前激活的节点列表 const activeNodes = shallowRef([]) // 记录前进回退 const isStart = ref(true) const isEnd = ref(true) // 切换是否开启自由拖拽 const isOpenFreeDrag = ref(false) const toggleFreeDrag = () => { console.log(isOpenFreeDrag.value) isOpenFreeDrag.value = !isOpenFreeDrag.value mindMap.updateConfig({ enableFreeDrag: isOpenFreeDrag.value }) } // 恢复默认布局 const resetLayout = () => { mindMap.execCommand('RESET_LAYOUT') } // 回退 const back = () => { mindMap.execCommand('BACK') } // 前进 const forward = () => { mindMap.execCommand('FORWARD') } // 插入兄弟节点 const insertNode = () => { mindMap.execCommand('INSERT_NODE') } // 插入子节点 const insertChildNode = () => { mindMap.execCommand('INSERT_CHILD_NODE') } // 删除节点 const deleteNode = () => { mindMap.execCommand('REMOVE_NODE') } onMounted(() => { mindMap = new MindMap({ el: document.getElementById("mindMapContainer"), data: { "data": { "text": "根节点", }, "children": [ { "data": { "text": "二级节点" }, "children": [{"data": { "text": "二级节点" },}] }, { "data": { "text": "二级节点" }, "children": [] } ] }, initRootNodePosition: ['left', 'center'], enableFreeDrag: true }); // 监听节点激活事件 mindMap.on('node_active', (node, nodeList) => { activeNodes.value = nodeList }) // 前进回退事件 mindMap.on('back_forward', (index, len) => { isStart.value = index <= 0 isEnd.value = index >= len - 1 }) }) // 插入图标 const insertIcon = () => { const iconList = ['priority_1', 'priority_2'] activeNodes.value.forEach(node => { node.setIcon(iconList) }) } // 插入超链接 const insertLink = () => { activeNodes.value.forEach(node => { node.setHyperlink('http://lxqnsys.com/', '理想青年实验室') }) } // 插入备注 const insertNote = () => { activeNodes.value.forEach(node => { node.setNote('备注内容') }) } // 插入标签 const insertTag = () => { activeNodes.value.forEach(node => { node.setTag(['标签1', '标签2']) }) } // 插入概要 const insertGa = () => { mindMap.execCommand('ADD_GENERALIZATION', { text: '自定义概要内容' }) } // 插入关联线 const insertLine = () => { mindMap.associativeLine.createLineFromActiveNode() } // 插入图片 const inserImage = () => { activeNodes.value.forEach((node) => { node.setImage({ url: 'https://lxqnsys.oss-cn-beijing.aliyuncs.com/qlx/xh2AXkBxYm5jGe5fD7DWYrC5b.png', title: '图片的标题或描述', width: 100,// 图片的宽高也不能少 height: 100 }) }) } //输出json function input_json(){ console.log(mindMap.getData()) } </script> 输出json 插入图片 插入图标 插入超链接 插入备注 插入标签 插入概要 插入关联线

<button @click="toggleFreeDrag" v-if="activeNodes.length > 0">{{ isOpenFreeDrag ? '关闭自由拖拽' : '开启自由拖拽' }}
<button @click="resetLayout" v-if="activeNodes.length > 0">恢复默认布局
<button @click="back" v-if="!isStart">回退
<button @click="forward" v-if="!isEnd">前进
<button @click="insertNode" v-if="activeNodes.length > 0">插入兄弟节点
<button @click="insertChildNode" v-if="activeNodes.length > 0">插入子节点
<button @click="deleteNode" v-if="activeNodes.length > 0">删除节点

<style scoped> #mindMapContainer * { width: 800px; height: 100px; margin: 0; padding: 0; } </style>

[街角小林]

需要注册Drag插件