如何将节点从一组移动/拖动到另一组？答案

【问题标题】：How to move/drag node from one group to another?如何将节点从一组移动/拖动到另一组？
【发布时间】：2019-06-05 16:46:02
【问题描述】：

我是 go.js 的新手，但遇到了问题。我有两个组，并且都有两个元素。我想将元素从一组移动到另一组。我相信它应该很简单，但我找不到解决方案。有什么想法吗？

下面我附上了两个元素的两个组的最小版本。

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gojs/2.0.5/go.js"></script>
    <title></title>
    <script>
    	function init() {
       		var $ = go.GraphObject.make;
          myDiagram = $(go.Diagram, "myDiagramDiv");
          var nodeDataArray = [
          	        { key: "Group 1", isGroup: true },
    				{ key: "A", group: "Group 1" },
    				{ key: "B", group: "Group 1" },
    				{ key: "Group 2", isGroup: true },
    				{ key: "C", group: "Group 2" },
                    { key: "D", group: "Group 2" }
          ];
          
          myDiagram.model = new go.GraphLinksModel(nodeDataArray);
      }
    </script>
</head>

<body onload="init()">
    <div id="myDiagramDiv" style="width:300px; height:300px; border: 1px solid black;"></div>
</body>
</html>

【问题讨论】：

标签： javascript gojs

【解决方案1】：

首先，请查看此示例：https://gojs.net/latest/samples/regrouping.html。

如果您查看代码，您会发现您需要将 Group 模板上的 mouseDrop 设置为将被删除的节点添加为组成员的函数。查看该示例中如何定义 finishDrop 函数。

这也有助于将 computesBoundsAfterDrag 设置为 true 并将 handlesDragDropForMembers 设置为 true。

（可选）最好设置 mouseDragEnter 和 mouseDragLeave 以在拖放前提供视觉反馈。

【讨论】：