G6 3.x 如何实现选择边后，拖动一头到另外一个节点上？如下图

[bluce]

• G6 Version: 3.0.4
• Platform: Chrome
• Mini Showcase(like screenshots): https://raw.githubusercontent.com/wiki/bluce/images/11.gif
• CodePen Link:

[baizn]

监听edge:dragstart，edge:drag等事件，伪代码如下：

graph.update(edge, {
  source: '新source'
})

你先试下，还是不行的话 我明天写个demo。

[bluce]

监听edge:dragstart，edge:drag等事件，伪代码如下：

graph.update(edge, {
  source: '新source'
})

你先试下，还是不行的话 我明天写个demo。

已经用自定义事件解决了，谢谢答复

[baizn]

方便的话可以写个demo， 提个pr，后续其他同学遇到类似问题时可以参考。

[bluce]

拖动边到节点，如果结束点不在节点上，返回原始节点，在边的两头加小图标，判断是拖头还是拖尾

registerBehavior() {
    let self = this;
    let moveType = 0;
    let startPoint = null;
    let edge = null;
    G6.registerBehavior("edge-drag-change-target", {
        getEvents() {
            return {
                mousedown: 'onMouseDown',
                mousemove: 'onMouseMove',
                mouseup: 'onMouseUp'
            };
        },

        onMouseDown(ev) {
            if (ev.item && ev.item._cfg.type === "edge") {
                if (ev.target && ev.item.hasState('selected')) {
                    edge = ev.item;
                    if (ev.target._cfg.id === 'start-tip-image') {
                        moveType = 1;
                        startPoint = ev.item._cfg.source;
                    } else if (ev.target._cfg.id === 'end-tip-image') {
                        moveType = 2;
                        startPoint = ev.item._cfg.target;
                    }
                }
            }
        },

        onMouseMove(ev) {
            if (moveType === 1) {
                if (edge) {
                    self.graph.updateItem(edge, {
                        source: {x: ev.x, y: ev.y}
                    });
                }
            } else if (moveType === 2) {
                if (edge) {
                    self.graph.updateItem(edge, {
                        target: {x: ev.x, y: ev.y}
                    });
                }
            }
        },

        onMouseUp(ev) {
            if (ev.item && ev.item._cfg.type === "node") {
                if (moveType === 1) {
                    if (edge) {
                        self.graph.updateItem(edge, {
                            source: ev.item._cfg.id
                        });
                    }
                } else if (moveType === 2) {
                    if (edge) {
                        self.graph.updateItem(edge, {
                            target: ev.item._cfg.id
                        });
                    }
                }

            } else {
                if (edge && startPoint) {
                    if (moveType === 1) {
                        self.graph.updateItem(edge, {
                            source: startPoint
                        });
                    } else if (moveType === 2) {
                        self.graph.updateItem(edge, {
                            target: startPoint
                        });
                    }

                }
            }

            edge = null;
            startPoint = null;
            moveType = 0;
        },
    });