cell的连接区域经常和拖动事件误触，我想加入一个按住ctrl键位来单击两个cell进行连接动作，单击一个cell后鼠标移动能也会和原拖动事件一样，有edge的预览，请问如何实现这个功能
给每个cell添加一个事件监听器，监听鼠标按下事件和鼠标移动事件。
在鼠标按下事件中，判断是否按下了ctrl键，如果按下了，则记录当前点击的cell。
在鼠标移动事件中，判断是否按下了ctrl键，如果按下了，则显示一个edge的预览，并跟随鼠标移动。
在鼠标松开事件中，判断是否按下了ctrl键，如果按下了，则连接两个cell，并隐藏edge的预览。
var graph = new mxGraph(container);
var sourceCell = null;
var edgePreview = null;
graph.addListener(mxEvent.MOUSE_DOWN, function(sender, evt) {
if (mxEvent.isControlDown(evt)) {
sourceCell = evt.getProperty('cell');
}
});
graph.addListener(mxEvent.MOUSE_MOVE, function(sender, evt) {
if (mxEvent.isControlDown(evt) && sourceCell != null) {
var point = mxUtils.convertPoint(container, mxEvent.getClientX(evt), mxEvent.getClientY(evt));
if (edgePreview == null) {
edgePreview = new mxPolyline([], mxConstants.EDGE_STYLE_ELBOW, '#000000');
edgePreview.setTerminalPoint(point, true);
edgePreview.setTerminalPoint(point, false);
edgePreview.geometry.relative = true;
edgePreview.geometry.sourcePoint = point.clone();
edgePreview.geometry.targetPoint = point.clone();
edgePreview.geometry.points = [new mxPoint(0, 0)];
edgePreview.edge = true;
edgePreview.dashed = true;
edgePreview.pointerEvents = false;
graph.getModel().beginUpdate();
try {
graph.addCell(edgePreview);
} finally {
graph.getModel().endUpdate();
}
} else {
edgePreview.geometry.points[0] = new mxPoint(point.x - sourceCell.geometry.x, point.y - sourceCell.geometry.y);
edgePreview.geometry.targetPoint = point.clone();
graph.getModel().setGeometry(edgePreview, edgePreview.geometry);
}
}
});
graph.addListener(mxEvent.MOUSE_UP, function(sender, evt) {
if (mxEvent.isControlDown(evt) && sourceCell != null) {
var targetCell = evt.getProperty('cell');
if (targetCell != null && targetCell != sourceCell) {
graph.getModel().beginUpdate();
try {
graph.insertEdge(graph.getDefaultParent(), null, '', sourceCell, targetCell);
} finally {
graph.getModel().endUpdate();
}
}
if (edgePreview != null) {
graph.getModel().remove(edgePreview);
edgePreview = null;
}
sourceCell = null;
}
});