zoukankan      html  css  js  c++  java
  • jsPlumb学习笔记

    这就是一个给元素画连接线的工具。

    <!DOCTYPE html>
    <html>
    	<head>
    		<title>jsPlumb</title>
    		<style>
    			.item{
    				100px;
    				height:50px;
    				border:3px solid green;
    				position: absolute;
    			}
    			.item1{
    				left:400px;
    				top:100px; 
    			}
    			.item2{
    				left:300px;
    				top:250px; 
    			}
    			.item3{
    				left:500px;
    				top:250px; 
    			}
    			.item4{
    				left:200px;
    				top:400px; 
    			}
    			.item5{
    				left:400px;
    				top:400px; 
    			}
    			.item6{
    				left:600px;
    				top:400px; 
    			}
    		</style>
    	</head>
    	<body>
    		<div class='demo' id='demo'>
    			<div class='item item1' id='item1'>1</div>
    			<div class='item item2' id='item2'>2</div>
    			<div class='item item3' id='item3'>3</div>
    			<div class='item item4' id='item4'>4</div>
    			<div class='item item5' id='item5'>5</div>
    			<div class='item item6' id='item6'>6</div>
    		</div>	
    	<script src="jquery-2.1.1.js"></script>
    	<script src="jquery-ui-1.9.2.js"></script>
    	<script src="jquery.jsPlumb-1.4.1-all.js"></script>
    	<script>
    	jsPlumb.ready(function(){
    		var color = '#222';
    		var instance = jsPlumb.getInstance({
    			//连线
    			Connector:['Bezier', {curviness:50}],
    			//拖动时的演示
    			DragOptions:{cursor:'pointer', zIndex:2000},
    			//连接线的样式
    			PaintStyle:{strokeStyle:'steelblue', lineWidth:3},
    			//连接点的样式
    			EndpointStyle:{radius:6, fillStyle:'#222'},
    			//hover时线样式
    			HoverPaintStyle:{strokeStyle:'green'},
    			//hover时点的样式
    			EndpointHoverStyle:{fillStyle:'red'},
    			Container:'demo'    //Either an element id, a DOM element, or a selector from the underlying library
    		});
    		instance.doWhileSuspended(function(){
    			var arrowCommon = {foldback: .7, fillStyle: color,  14},
    				overlays = [
    				['Arrow', {location:.8}, arrowCommon],
    				// ['Arrow', {location:.3, direction:-1}, arrowCommon],
    				];
    			var windows = jsPlumb.getSelector('.item');
    
    			for(var i = 0; i<windows.length;i++){
    				instance.addEndpoint(windows[i], {
    					uuid:windows[i].getAttribute('id')+'-bottom',
    					anchor:'Bottom',
    					maxConnections:-1
    				});
    				instance.addEndpoint(windows[i], {
    					uuid:windows[i].getAttribute('id')+'-top',
    					anchor:'Top',
    					maxConnections:-1
    				});
    			}
    			//connect 函数
    			instance.connect({uuids:['item3-bottom','item6-top'], overlays:overlays, detachable:true, reattach:true});
    			instance.connect({uuids:['item1-bottom','item2-top'], overlays:overlays});
    			instance.connect({uuids:['item1-bottom','item3-top'], overlays:overlays});
    			instance.connect({uuids:['item2-bottom','item4-top'], overlays:overlays});
    			instance.connect({uuids:['item2-bottom','item5-top'], overlays:overlays});
    			//jquery ui里的draggable功能
    			instance.draggable(windows);
    		});
    		jsPlumb.fire('jsPlumbdemoLoaded', instance);
    	})
    	</script>
    	</body>
    </html>
    

    这是一个简单的小例子。是官网中一个demo的简化版,在学习了网上的教程之后,给官网的例子加了自己的注释。

    给元素加连接点,给连接点加连接线,给连接线加各种装饰。需要的样式,canvas和SVG中都有,需要的动作,就是拖动。

  • 相关阅读:
    URAL 1998 The old Padawan 二分
    URAL 1997 Those are not the droids you're looking for 二分图最大匹配
    URAL 1995 Illegal spices 贪心构造
    URAL 1993 This cheeseburger you don't need 模拟题
    URAL 1992 CVS
    URAL 1991 The battle near the swamp 水题
    Codeforces Beta Round #92 (Div. 1 Only) A. Prime Permutation 暴力
    Codeforces Beta Round #7 D. Palindrome Degree hash
    Codeforces Beta Round #7 C. Line Exgcd
    Codeforces Beta Round #7 B. Memory Manager 模拟题
  • 原文地址:https://www.cnblogs.com/wang-jing/p/4121559.html
Copyright © 2011-2022 走看看