Dragging a group onto another group

GoJS
1

In the picture, the tables are go.Group and the fields are go.Node. When I dragging a table onto another table, how to make it not transparent?

I would like to make it like this sample Org Chart Editor

2

I do not understand what you want. Everything is clearly not transparent already. Or are some objects invisible that we ought to be seeing? Or maybe you are asking about how to make the dragged nodes partly transparent? Or are you asking about making some objects “transparent” to mouse events? Or are you asking about something else?

3

Capture.PNG1102×619 21.3 KB

@walter you can see in the picture, the table Inventory is overlapping the table Store, but I can still see some fields of the table Store through the table Inventory, and even a link with its label. Only the table header is overlapped. I would like to make it like this sample

4

Did you notice in that sample,
Org Chart Editor, this binding?

// bind the Part.layerName to control the Node's layer depending on whether it isSelected
new go.Binding("layerName", "isSelected", function(sel) { return sel ? "Foreground" : ""; }).ofObject(),

That is what makes sure the nodes and links being dragged are in the “Foreground” layer, in front of all of the other regular layers.

If you tried that already, you would have noticed that the selected Group did indeed appear in front of the other nodes, but not its member nodes. That’s because member Nodes and Links are independent Parts, so they can be in different layers than that of the Group itself. There are many circumstances in which that is essential.

The problem is that the member nodes need to go into the “Foreground” layer along with the selected group, even though those member nodes are not selected. You can accomplish that with the following event handler:

      $(go.Group, . . .,
        {
          selectionChanged: function(grp) {
            var lay = grp.isSelected ? "Foreground" : "";
            grp.layerName = lay;
            grp.findSubGraphParts().each(function(p) { p.layerName = lay; });
          }
        },
        . . .
5

Thank you @walter

6

I hope you removed that Binding on “layerName”, which is redundant if you have defined that Part.selectionChanged event handler.

7

Actually I defined both of them, the Binding is for the groups which display as tables and the event handler is for the member nodes which display as fields. And it worked.