mxGraph浅入之 makeDraggable

最新推荐文章于 2023-02-19 15:54:22 发布

孺子牛丶

最新推荐文章于 2023-02-19 15:54:22 发布

阅读量1.6k

点赞数

分类专栏： mxGraph 文章标签： makeDraggable

本文链接：https://blog.csdn.net/weixin_37745913/article/details/103398341

版权

mxGraph 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

makeDraggable

主要用来构建拖动源，鼠标拖动实现向graph图中添加图形。文章转译自mxGraph官方github，

官方定义：

将给定的DOM元素配置为指定graph的拖动源。返回一个新的mxDragSource对象。如果mxDragSource.guidesEnabled为true，则必须在funct中使用x和y参数来匹配预览位置。

makeDraggable: function(element,   // 要被拖动的DOM元素
                        graphF,    // 一个mxGraph对象，作为drop到的目标或者接受鼠标事件并返回当前mxGraph的一个函数。
                        funct,     // 拖动成功之后执行的方法
                        dragElement,  // 可选的DOM节点用于拖动预览
                        dx,        // 可选，光标和拖动预览框之间的水平偏移量
                        dy,        // 可选，光标和拖动预览框之间的垂直偏移量
                        autoscroll,// 可选的布尔值，指定是否使用autoscroll，默认是mxGraph.autoscroll(默认是true,即从拖动面板拖动图元到graph区域的边界时，会进行方向上的移动，类似滚动条效果)
                        scalePreview, // 可选的布尔值，指定预览元素是否应该根据图形缩放比例进行缩放。如果为true，那么偏移量也会被缩放。默认为false
                        highlightDropTargets,  // 可选的布尔值，指定drop target是否应该高亮显示，默认为true
                        getDropTarget)  // 可选的函数，用于返回drop target的给定位置（x,y），默认是mxGraph.getCellAt

官方demo：

<html>
<head>
	<title>Dragsource example for mxGraph</title>

	<!-- Sets the basepath for the library if not in same directory -->
	<script type="text/javascript">
		mxBasePath = '../src';
	</script>

	<!-- Loads and initializes the library -->
	<script type="text/javascript" src="../src/js/mxClient.js"></script>

	<script type="text/javascript">
		function main()
		{
			// 检查浏览器是否支持
			if (!mxClient.isBrowserSupported())
			{
				// 不支持，提示信息
				mxUtils.error('Browser is not supported!', 200, false);
			}
			else
			{
				// 拖动时显示导航线
				mxGraphHandler.prototype.guidesEnabled = true;
				
			    // 拖动时，按下Alt键不显示导航线
			    mxGuide.prototype.isEnabledForEvent = function(evt)
			    {
			    	return !mxEvent.isAltDown(evt);
			    };
				
				// Enables snapping waypoints to terminals
				mxEdgeHandler.prototype.snapToTerminals = true;
				
				var graphs = [];
				
				// 创建两个graph区域
				for (var i = 0; i < 2; i++)
				{
					var container = document.createElement('div');
					container.style.overflow = 'hidden';
					container.style.position = 'relative';
					container.style.width = '321px';
					container.style.height = '241px';
					container.style.background = 'url(\'editors/images/grid.gif\')';
					container.style.cursor = 'default';

					document.body.appendChild(container);
					
					var graph = new mxGraph(container);
					graph.gridSize = 30;
					
					// Uncomment the following if you want the container
					// to fit the size of the graph
					//graph.setResizeContainer(true);
					
					// Enables rubberband selection
					new mxRubberband(graph);
					
                    //获取用于插入新单元格的默认父元素。这通常是根的第一个子结点
					var parent = graph.getDefaultParent();
									
					// 事务开始
					graph.getModel().beginUpdate();
					try
					{
                        // 绘制初始graph上的图形内容
						var v1 = graph.insertVertex(parent, null, 'Hello,', 20, 20, 80, 30);
						var v2 = graph.insertVertex(parent, null, 'World!', 200, 150, 80, 30);
						var e1 = graph.insertEdge(parent, null, '', v1, v2);
					}
					finally
					{
						// 事务结束
						graph.getModel().endUpdate();
					}
					
					graphs.push(graph);
				}
				
				// 返回鼠标移入的graph对象（即该参数的第二种情况）
				var graphF = function(evt)
				{
					var x = mxEvent.getClientX(evt);
					var y = mxEvent.getClientY(evt);
					var elt = document.elementFromPoint(x, y);
					
					for (var i = 0; i < graphs.length; i++)
					{
						if (mxUtils.isAncestorNode(graphs[i].container, elt))
						{
							return graphs[i];
						}
					}
					
					return null;
				};
				
				// 在指定位置插入cell（拖动完成后执行的方法）
				var funct = function(graph, evt, target, x, y)
				{
					var cell = new mxCell('Test', new mxGeometry(0, 0, 120, 40));
					cell.vertex = true;
					var cells = graph.importCells([cell], x, y, target);

					if (cells != null && cells.length > 0)
					{
						graph.scrollCellToVisible(cells[0]);
						graph.setSelectionCells(cells);
					}
				};
				
				// 创建一个作为拖动源得到DOM元素
				var img = mxUtils.createImage('images/icons48/gear.png');
				img.style.width = '48px';
				img.style.height = '48px';
				document.body.appendChild(img);
				
				// 在IE中禁用内置DnD
				if (mxClient.IS_IE)
				{
					mxEvent.addListener(img, 'dragstart', function(evt)
					{
						evt.returnValue = false;
					});
				}
				// 创建拖动预览元素.
				var dragElt = document.createElement('div');
				dragElt.style.border = 'dashed black 1px';
				dragElt.style.width = '120px';
				dragElt.style.height = '40px';
                // 构建mxDragSource实例
				var ds = mxUtils.makeDraggable(img, graphF, funct, dragElt, null, null, graph.autoscroll, true);
				
				// Redirects feature to global switch. Note that this feature should only be used
				// if the the x and y arguments are used in funct to insert the cell.
				ds.isGuidesEnabled = function()
				{
					return graph.graphHandler.guidesEnabled;
				};
				// 在graph外部显示原始的拖动源图标样子
				ds.createDragElement = mxDragSource.prototype.createDragElement;
			}
		};
	</script>
</head>

<!-- 作为graph的容器 -->
<body onload="main();">
</body>
</html>

孺子牛丶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
mxGraph浅入之 makeDraggable

makeDraggable主要用来构建拖动源，鼠标拖动实现向graph图中添加图形。文章转译自mxGraph官方github，官方定义：将给定的DOM元素配置为指定graph的拖动源。返回一个新的mxDragSource对象。如果mxDragSource.guidesEnabled为true，则必须在funct中使用x和y参数来匹配预览位置。makeDraggable: func...
复制链接

扫一扫