jsPlumb 连线工具实现的左右两部分连线（可单独下拉）需求：左右两侧列表需要连线做数据映射，同时数据量可能超出指定

需求：左右两侧列表需要连线做数据映射，同时数据量可能超出指定范围，需要有单独下拉功能，展示连接线条
<!DOCTYPE html>

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <script src='https://cdnjs.cloudflare.com/ajax/libs/jsPlumb/2.13.2/js/jsplumb.min.js'></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
    		<style>
        #diagramContainer{
          width: 800px;
          height: 300px;
          position:relative;
          overflow: hidden;
          background-color: blanchedalmond;
        }
        ul{
          height: 100%;
          overflow: auto;
          display: inline-block;
          width: 30%;
          padding: 0;
          margin: 0;
          position: relative;
          background-color: #ccc;
        }
        ul.left-box{
            float: left;
        }
        ul.right-box{
            float: right;
        }
        ul li {
            height:30px;
            border: 1px solid #ccc;
            width: 95%;
            list-style: none;
            margin: 3px 0;
            /* position: absolute; */
            background-color: aquamarine;
        }
      #item_left{
        position: absolute;
        right: 0;
        bottom:0;
        width: 100px;
        height:100px;
        border: 1px solid #f00;
      }
      #item_right{
        position: absolute;
        left: 0;
        top:0;  
        width: 100px;
        height:100px;
        border: 1px solid #0f0;
      }
      </style>

    <title>Vite + Vue</title>

  </head>
  <body>
    <div id="diagramContainer">
      <ul class="left-box">
          <li class="left"></li>
          <li class="left"></li>
          <li class="left"></li>
          <li class="left"></li>
          <li class="left"></li>
          <li class="left"></li>
          <li class="left"></li>
          <li class="left"></li>
          <li class="left"></li>
          <li class="left"></li>
      </ul>
      <ul class="right-box">
        <li class="right"></li>
        <li class="right"></li>
        <li class="right"></li>
        <li class="right"></li>
        <li class="right"></li>
        <li class="right"></li>
        <li class="right"></li>
        <li class="right"></li>
        <li class="right"></li>
        <li class="right"></li>
    </ul>
      <!-- <div id="item_left" class="item"></div>
      <div id="item_right" class="item" style="left:150px;"></div> -->
    </div>

    <script>
      
     /* global jsPlumb */
     jsPlumb.ready(function () {
      
      jsPlumb.setContainer('diagramContainer')
      const common = {
        isSource: true,
        isTarget: true,
        connector: ['Bezier'],
        maxConnections: -1
      }
      var source= {
        isSource: true,
        isTarget: false,
        connector: ['Bezier'],
        maxConnections: -1
      }
      var target ={
        isSource: false,
        isTarget: true,
        connector: ['Bezier'],
        maxConnections: -1
      }

      const lefts = document.querySelectorAll('.left')
      console.log(lefts)
      const rights = document.querySelectorAll('.right')
      lefts.forEach(element => {
        jsPlumb.addEndpoint(element, {
          anchors: ['Right']
        }, source)
        // jsPlumb.draggable(element)
        // jsPlumb.setContainer(element)
      });

      rights.forEach(element => {
        jsPlumb.addEndpoint(element, {
          anchors: ['Left']
        }, common)
        // jsPlumb.setContainer(element)
        // jsPlumb.draggable(element)
      });

// 新增节点
// jsPlumb.addEndpoint('item\_left', {
//   anchors: \['Left']
// }, target)
// 连接
//       jsPlumb.connect({
//         source: 'item\_left',
//         target: 'item\_right',
//         endpoint: 'Rectangle',
//         paintStyle: { stroke: 'lightgray', strokeWidth: 3 },
//   endpointStyle: { fill: 'lightgray', outlineStroke: 'darkgray', outlineWidth: 2 },
//   overlays: \[ \['Arrow', { width: 12, length: 12, location: 0.5 }] ]
//       })
// 可拖拽
//       jsPlumb.draggable('item\_left')
//       jsPlumb.draggable('item\_right')
const elements=document.querySelectorAll('ul')

    elements.forEach(ele=>{
      ele.addEventListener('scroll',
         _.debounce((e)=>{
          console.log(e,1)
              
          jsPlumb.repaintEverything()
        }, 150)
      )  
    })
    })


    </script>

  </body>
</html>