先上效果图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>连线demo</title>
<script type="text/javascript" src="./jsplumb.js"></script>
<style>
.ul-list {
display: inline-block;
}
.ul-list li {
list-style-type: none;
border: 1px solid red;
height: 30px;
line-height: 30px;
text-align: center;
width: 100px;
}
</style>
</head>
<body>
<div>
<div><button id="btn">获取连线</button></div>
<textarea rows="5" cols="50" class="textarea"> </textarea>
<div id="container"></div>
</div>
<script>
// 定义列表数据
let data;
// 定义默认连线关系数据
let relationship;
// 定义jsplumb实例变量
let instance;
data = [
[
{
title: "我是a1啦啦",
id: "a1",
},
{
title: "我是a2啦啦",
id: "a2",
},
{
title: "我是a3啦啦",
id: "a3",
},
],
[
{
title: "我是b1啦啦",
id: "b1",
},
{
title: "我是b2啦啦",
id: "b2",
},
{
title: "我是b3啦啦",
id: "b3",
},
],
[
{
title: "我是c1啦啦",
id: "c1",
},
{
title: "我是c2啦啦",
id: "c2",
},
{
title: "我是c3啦啦",
id: "c3",
},
],
];
relationship = [
{ source: "a1", target: "b1" },
{ source: "a1", target: "b2" },
{ source: "b1", target: "c3" },
];
// 循环列表数据 渲染列表ul
data.forEach((v1, i1) => {
let ul = document.createElement("ul");
// 添加一个类名 方便后期获取
ul.classList.add("ul-list");
let lis = "";
v1.forEach((v2) => {
// id必须设置为数据的id 再添加自定义属性index值为当前列表索引 后期需要用到
lis += `<li id=${v2.id} index=${i1}>${v2.title}</li>`;
});
ul.innerHTML = lis;
document.getElementById("container").appendChild(ul);
});
jsPlumb.ready(function () {
// 初始化jsPlumb 创建jsPlumb实例
init();
// 设置可以为连线起点和连线终点的元素
setContainer();
// 设置默认连线
setConnect();
// 在连线事件中 只允许连接相邻的列表 不能跨列表连接
setRule();
jsPlumb.fire("jsPlumbDemoLoaded", instance);
});
// 初始化jsPlumb 创建jsPlumb实例
function init() {
instance = jsPlumb.getInstance({
Connector: "Straight", //连接线形状 Bezier: 贝塞尔曲线Flowchart: 具有90度转折点的流程线 StateMachine: 状态机 Straight: 直线
// PaintStyle: { strokeWidth: 3, stroke: "#ffa500", "dashstyle": "2 4" }, //连接线样式
Endpoint: ["Dot", { radius: 5 }], //端点
EndpointStyle: { fill: "#ffa500" }, //端点样式
Container: "container", //目标容器id
ListStyle: {
endpoint: ["Rectangle", { width: 30, height: 30 }],
},
});
}
// 设置可以连线的元素
function setContainer() {
//相当于css选择器 也可以使用id选择等
let uls = jsPlumb.getSelector(".ul-list");
// 将dom元素设置为连线的起点或者终点 设置了起点的元素才能开始连线 设置为终点的元素才能为连线终点
instance.batch(function () {
uls.forEach((ul) => {
let lis = ul.querySelectorAll("li");
lis.forEach((li) => {
// 将li设置为起点
instance.makeSource(li, {
allowLoopback: false,
anchor: ["Left", "Right"], // 设置端点位置
});
// 将li设置为终点
instance.makeTarget(li, {
anchor: ["Left", "Right"],
});
});
});
});
}
// 设置默认连线
function setConnect() {
relationship.forEach(function (el) {
// source是连线起点元素id target是连线终点元素id
instance.connect({ source: el.source, target: el.target });
});
}
// 只允许连接相邻的列表
function setRule() {
// // 连线事件 不不允许连接当前所在list
instance.bind("connection", function (connInfo, originalEvent) {
// connInfo是jsPlumb对象 可以打印出来康康有哪些东西
// 根据sourceId拿到开始连接元素li 再根据li的index自定义属性 判断只允许连接相邻的ul列表
let index = Number(
document
.getElementById(connInfo.connection.sourceId)
.getAttribute("index")
);
let allow = [];
if (data[index + 1]) {
allow = [...allow, ...data[index + 1].map((_) => _.id)];
}
if (data[index - 1]) {
allow = [...allow, ...data[index - 1].map((_) => _.id)];
}
// 如果连线终点元素(targetId)不在起点元素(sourceId)的前后ul列表范围 就删除该连线
if (allow.indexOf(connInfo.connection.targetId) == -1) {
// 删除连线
instance.deleteConnection(connInfo.connection);
}
});
}
// 给button注册点击事件获取连线关系
document.getElementById("btn").addEventListener("click", function () {
let newRelationship = '';
instance.getAllConnections().forEach((el) => {
newRelationship+=` ${el.sourceId}连接了${el.targetId}`;
});
document.querySelector('.textarea').value = newRelationship
console.log(document.querySelector('.textarea'));
// jsplumb常用方法
// jsplumb.getConnections({souce: 'sourceID', target: 'targetID'}); //获取指定连线
// 1. jsPlumb.getAllConnections() 获取所有连接线
// 2. jsPlumb.deleteEveryConnection(); 清空所有连接线
// 3. jsPlumb.deleteConnection(connInfo.connection); //删除连接线
// 4. jsPlumb.setContainer(document.getElementById("main"));//初始化实例化组件
});
</script>
</body>
</html>
代码非常简单，还可以实现连线高亮等效果，可以自己查阅文档，要是有连线这块的有问题可以给我留言，其他的就不要找我啦 哈哈
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 找不到素材资源介绍文章里的示例图片？
- 模板不会安装或需要功能定制以及二次开发？
发表评论
还没有评论，快来抢沙发吧！