Let’s start with the renderings
For the convenience of API engineers like me, no more nonsense, directly on the code, there should be comments where there are comments, if you do not understand you hammer me
<! DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="Width = device - width, initial - scale = 1.0" />
<title>Attachment 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">Access to the attachment</button></div>
<textarea rows="5" cols="50" class="textarea"> </textarea>
<div id="container"></div>
</div>
<script>
// Define list data
let data;
// Define default connection data
let relationship;
// Define jsplumb instance variables
let instance;
data = [
[
{
title: "I'm A1 la la.".id: "a1"}, {title: "I'm A2 la la.".id: "a2"}, {title: "I'm A3 la la.".id: "a3",},], [{title: "I'm B1 la la la.".id: "b1"}, {title: "I'm b2 la la la.".id: "b2"}, {title: "I'm B3 la la.".id: "b3",},], [{title: "I'm C1 la la la.".id: "c1"}, {title: "I'm C2 la la.".id: "c2"}, {title: "I'm C3 la la la.".id: "c3",}]]; relationship = [ {source: "a1".target: "b1" },
{ source: "a1".target: "b2" },
{ source: "b1".target: "c3"},];// Loop list data render list ul
data.forEach((v1, i1) = > {
let ul = document.createElement("ul");
// Add a class name for later retrieval
ul.classList.add("ul-list");
let lis = "";
v1.forEach((v2) = > {
// id must be set to the id of the data and add the custom attribute index value to the index of the current list
lis += `<li id=${v2.id} index=${i1}>${v2.title}</li>`;
});
ul.innerHTML = lis;
document.getElementById("container").appendChild(ul);
});
jsPlumb.ready(function () {
// Initialize jsPlumb create an instance of jsPlumb
init();
// Sets the elements that can be the start and end of the line
setContainer();
// Set the default connection
setConnect();
// Only adjacent lists are allowed to join in a wire event, not across lists
setRule();
jsPlumb.fire("jsPlumbDemoLoaded", instance);
});
// Initialize jsPlumb create an instance of jsPlumb
function init() {
instance = jsPlumb.getInstance({
Connector: "Straight".Flowchart: flow line with 90-degree turning point; StateMachine; Straight
// PaintStyle: {strokeWidth: 3, stroke: "#ffa500", "dashstyle": "2 4"}, // connect line style
Endpoint: ["Dot", { radius: 5}]./ / the endpoint
EndpointStyle: { fill: "#ffa500" }, // Endpoint style
Container: "container".// Target container ID
ListStyle: {
endpoint: ["Rectangle", { width: 30.height: 30}],}}); }// Sets the elements that can be wired
function setContainer() {
// CSS selectors can also use id selection, etc
let uls = jsPlumb.getSelector(".ul-list");
// Set the DOM element to the starting or ending point of the wire
instance.batch(function () {
uls.forEach((ul) = > {
let lis = ul.querySelectorAll("li");
lis.forEach((li) = > {
// Set li as the starting point
instance.makeSource(li, {
allowLoopback: false.anchor: ["Left"."Right"].// Set the endpoint position
});
// Set li as the destination
instance.makeTarget(li, {
anchor: ["Left"."Right"]}); }); }); }); }// Set the default connection
function setConnect() {
relationship.forEach(function (el) {
// source is the element ID of the starting line. Target is the element ID of the ending line
instance.connect({ source: el.source, target: el.target });
});
}
// Only contiguous lists are allowed to join
function setRule() {
// // Connection events are not allowed to connect to the current list
instance.bind("connection".function (connInfo, originalEvent) {
// connInfo is the jsPlumb object that can print out what kangkang has
// Only adjacent UL lists are allowed to join according to li's index attribute
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)];
}
Delete the line if the end element (targetId) is not in the ul list before and after the start element (sourceId)
if (allow.indexOf(connInfo.connection.targetId) == -1) {
// Delete the connectioninstance.deleteConnection(connInfo.connection); }}); }// Register button click events to get connections
document.getElementById("btn").addEventListener("click".function () {
let newRelationship = ' ';
instance.getAllConnections().forEach((el) = > {
newRelationship+=` ${el.sourceId}Connect the${el.targetId}`;
});
document.querySelector('.textarea').value = newRelationship
console.log(document.querySelector('.textarea'));
// jsplumb common method
// jsplumb.getConnections({souce: 'sourceID', target: 'targetID'}); // Get the specified connection
/ / 1. JsPlumb. GetAllConnections () for all connections
// 2. jsPlumb.deleteEveryConnection(); Clear all connections
// 3. jsPlumb.deleteConnection(connInfo.connection); // Delete the connection line
// 4. jsPlumb.setContainer(document.getElementById("main")); // Initialize the instantiated component
});
</script>
</body>
</html>
Copy the codeCode is very simple, but also to achieve the effect of highlighting the line, you can refer to the document, if there is a problem with the line can leave a message to me, the other don’t look for me ha ha