JsPlumb使用心得(1)

最新推荐文章于 2024-09-16 08:06:01 发布

避于核桃之内自誉为无疆限之君主

最新推荐文章于 2024-09-16 08:06:01 发布

阅读量3.1k

点赞数

分类专栏：前端-三方

本文链接：https://blog.csdn.net/shenqikai0319/article/details/86631797

版权

本文分享了JsPlumb库的使用经验，包括初始化、建立连接、添加端点、调整尺寸、限定拖动范围及拖动操作等核心功能的详细说明，为后续的实践提供基础。

摘要由CSDN通过智能技术生成

1.初始化方法(必须要)

jsPlumb.bind('ready',function(){))  //类似window.onload

2.连接方法 connect()

jsPlumb.connect({
	source:'d1',  //开始位置(id)
	target:'js2',  //结束位置(id)
	endpoint:[ "Rectangle", {  //点样式
		cssClass:"myEndpoint", 
		width:1, 
		height:1 
	}],
/**
Dot{
    radius，默认为10px，定义圆点的半径
    cssClass，附加到Endpoint创建的元素的CSS类
    hoverClass，一个CSS类，当鼠标悬停在元素或连接的线上时附加到EndPoint创建的元素
}
Rectangle{
    width，默认为20，定义矩形的宽度
    height，默认为20，定义矩形的高度
    cssClass，附加到Endpoint创建的元素的CSS类
    hoverClass，当鼠标悬停在元素或连接的线上时附加到EndPoint创建的元素
}
image{
    src，必选，指定要使用的图像的URL，
    cssClass，附加到Endpoint创建的元素的CSS类
    hoverClass，当鼠标悬停在元素或连接的线上时附加到EndPoint创建的元素，
}从给定的URL中绘制图像
*/
		connector:['Flowchart'],  //连接线样式
/**
Bezier(curvi