效果如下：
画线部分借鉴了“https://blogweb.cn/article/1403842582411”此链接文章作者的代码，感谢！
直接放出代码：
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>配对</title>
<script type="text/javascript" src="../../libs/easyui/jquery.min.js"></script>
<script type="text/javascript" src="../../libs/easyui/jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
<div title="帮助" data-options="iconCls:'icon-help',closable:true" style="padding:10px">
<button id="remove-btn" style="margin-left: 100px;font-size: 20px" onclick="removeBtn()">撤销</button>
<form id="checkbox-from0" style="float: left">
</form>
<form id="checkbox-from1" style="float: left;margin-left: 100px">
</form>
<input id="logText" class="easyui-textbox" data-options="multiline:true"
value="This TextBox will allow the user to enter multiple lines of text."
style="width:300px;height:500px;float: left">
</div>
<script>
var webAppName = "/" + window.location.pathname.split("/")[1];
var lineCache = [];
var index0_id = null;
var index1_id = null;
var logText;
var logStr = "";
var colorArray = ['red','green','orange','blue','purple','pink','brown'];
var colorIndex = 0;
initTextBox();
initData();
function initTextBox() {
logText = $('#logText').textbox();
logText.textbox('setValue', logStr);
logStrAppend('已配对记录:');
}
function initData() {
var checkDataItem0 = [];
var checkDataItem1 = [];
for (let i = 0; i < 10; i++) {
var item0 = {};
item0['label'] = 'item' + i;
item0['value'] = 'item' + i;
item0['checked'] = false;
checkDataItem0.push(item0);
var item1 = {};
item1['label'] = 'item' + (9 - i);
item1['value'] = 'item' + (9 - i);
item1['checked'] = false;
checkDataItem1.push(item1);
}
var checkboxFrom0 = $('#checkbox-from0');
for (let i = 0; i < checkDataItem0.length; i++) {
var item = checkDataItem0[i];
var checkboxId = 'checkbox-0-' + i;
var checkboxItem0 = $('<h2 id="' + checkboxId + '" style="text-align: center;padding:5px;border: 2px solid #b2b2b2">'+item.label+'</h2></br></br>');
checkboxFrom0.append(checkboxItem0);
var checkboxView = document.getElementById(checkboxId);
checkboxView.onclick = function () {
if (updateObjId('checkbox-0-' + i)){
index0_id = 'checkbox-0-' + i;
}
if (index0_id != null && index1_id != null){
drawLine(index0_id,index1_id);
}
}
}
var checkboxFrom1 = $('#checkbox-from1');
for (let i = 0; i < checkDataItem1.length; i++) {
item = checkDataItem1[i];
checkboxId = 'checkbox-1-' + i;
var checkboxItem1 = $('<h2 id="' + checkboxId + '" style="text-align: center;padding:5px;border: 2px solid #b2b2b2">'+item.label+'</h2></br></br>');
checkboxFrom1.append(checkboxItem1);
checkboxView = document.getElementById(checkboxId);
checkboxView.onclick = function () {
if (updateObjId('checkbox-1-' + i)){
index1_id = 'checkbox-1-' + i;
}
if (index0_id != null && index1_id != null){
drawLine(index0_id,index1_id);
}
}
}
console.log("testSelector.html");
drawLine('checkbox-0-1','checkbox-1-8');
}
function updateObjId(id){
for (let i = 0; i < lineCache.length; i++) {
var link0 = lineCache[i]['link0'];
var link1 = lineCache[i]['link1'];
if (id === link0 || id === link1){
return false;
}
}
return true;
}
function drawLine (id0, id1) {
var obj1 = document.getElementById(id0);
var obj2 = document.getElementById(id1);
var color = colorArray[colorIndex];
obj1.style.color = color;
obj2.style.color = color;
if (colorIndex < colorArray.length){
colorIndex ++;
}if (colorIndex >= colorArray.length){
colorIndex = 0;
}
// 起点坐标
var x1 = obj1.getBoundingClientRect().left + obj1.clientWidth / 2
var y1 = obj1.getBoundingClientRect().top + obj1.clientHeight / 2
// 终点坐标
var x2 = obj2.getBoundingClientRect().left + obj2.clientWidth / 2
var y2 = obj2.getBoundingClientRect().top + obj2.clientHeight / 2
// 计算连接线长度
var length = Math.sqrt((x2 -x1) * (x2 -x1) + (y2 -y1) * (y2 -y1))
// 计算连接线旋转弧度值
var rad = Math.atan2((y2 -y1), (x2 -x1))
// 连接线未旋转前，起点坐标计算
var top = (y1 + y2) / 2
var left = (x1 + x2) / 2 - length / 2
// 创建连接线 dom 节点，并设置样式
var line = document.createElement('div')
var style = 'position: absolute; background-color: '+color+'; height: 3px; top:' +
top + 'px; left:' + left + 'px; width: ' + length + 'px; transform: rotate(' + rad + 'rad);'
line.setAttribute('style', style)
document.body.appendChild(line);
var lineObj = {};
lineObj['link0'] = id0;
lineObj['link1'] = id1;
lineObj['line'] = line;
lineCache.push(lineObj);
index0_id = null;
index1_id = null;
logStrAppend(obj1.innerText + "-----" + obj2.innerText);
}
function removeBtn() {
let length = lineCache.length;
if (length > 0){
var link0 = lineCache[length - 1]['link0'];
var link1 = lineCache[length - 1]['link1'];
var line = lineCache[length - 1]['line'];
document.body.removeChild(line);
lineCache.splice(length - 1,1);
}
}
function logStrAppend(str) {
logStr += "\n" + str;
let len = logStr.split('\n').length;
if (len > 200) {
let index = logStr.indexOf("\n", 2);
logStr = logStr.substring(index, logStr.length);
}
logText.textbox('setValue', logStr);
}
</script>
</body>
</html>