Draggable+gsap实现拖拽接线代码-html代码-BFW代码库

代码语言：html
所属分类：拖放
代码描述：Draggable+gsap实现拖拽接线代码，左右两侧是不同颜色的线，拖拽将相同颜色的线连起来。
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
  
<style>
body {
  margin: 0;
  display: grid;
  place-items: center;
  background: black;
  height: 100vh;
  overflow: hidden;
}

svg {
  width: 90vmin;
  height: auto;
}

.light {
  opacity: 0;
}

.drag {
  fill: white;
  opacity: 0;
}

.line {
  stroke-width: 18px;
  pointer-events: none;
}

.line-back {
  stroke-width: 30px;
  pointer-events: none;
}

.line-1 {
  stroke: #324d9c;
}
.line-1.line-back {
  stroke: #25378d;
}

.line-2 {
  stroke: #e52320;
}
.line-2.line-back {
  stroke: #a71916;
}

.line-3 {
  stroke: #ffeb13;
}
.line-3.line-back {
  stroke: #aa9f17;
}

.line-4 {
  stroke: #a6529a;
}
.line-4.line-back {
  stroke: #90378c;
}

.c {
  fill: #273065;
  stroke: #1a1b36;
}

.c, .d, .e, .f, .k, .u {
  stroke-miterlimit: 10;
}

.c, .d, .e, .f, .u, .y {
  stroke-width: 5px;
}

.d {
  fill: #71160e;
  stroke: #280f10;
}

.e {
  fill: #8c6c15;
}

.e, .u {
  stroke: #38321a;
}

.f {
  fill: #212021;
  stroke: #000;
}

.h {
  fill: #9b3015;
  stroke: #471d12;
}

.h, .y {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.k, .y {
  fill: none;
}

.k {
  stroke: #1d1d1b;
  stroke-width: 6px;
}

.l {
  fill: #d9c905;
}

.m {
  fill: #25378d;
}

.n {
  fill: #324d9c;
}

.o {
  fill: #a71916;
}

.p {
  fill: #e52320;
}

.q {
  fill: #aa9f17;
}

.r {
  fill: #ffeb13;
}

.s {
  fill: #90378c;
}

.t {
  fill: #a6529a;
}

.u {
  fill: #1d1d1b;
}

.v {
  fill: #5b5c64;
}

.w {
  fill: #292829;
}

.x {
  fill: #2f3038;
}

.y {
  stroke: #252526;
}
</style>

  
  
</head>

<body translate="no">
  <svg width="907" height="907" viewBox="0 0 907 907">
  <linearGradient id="a" y1="453.5" x2="907" y2="453.5" gradientUnits="userSpaceOnUse">
    <stop offset="0" stop-color="#1d1d1b"/>
    <stop offset="0" stop-color="#272726"/>
    <stop offset=".2" stop-color="#262625" stop-opacity=".93"/>
    <stop offset=".35" stop-color="#232322" stop-opacity=".69"/>
    <stop offset=".48" stop-color="#1e1e1c" stop-opacity=".29"/>
    <stop offset=".51" stop-color="#1d1d1b" stop-opacity=".2"/>
    <stop offset="1" stop-color="#1d1d1b"/>
  </linearGradient>
  <linearGradient id="b" x1="35" y1="-2.43" x2="35" y2="890.57" gradientUnits="userSpaceOnUse">
    <stop offset=".77" stop-color="#393e42"/>
    <stop offset=".83" stop-color="#35393d"/>
    <stop offset=".9" stop-color="#292c2e"/>
    <stop offset=".98" stop-color="#151616"/>
    <stop offset="1" stop-color="#0f0f0f"/>
  </linearGradient>
  <linearGradient id="c" x1="874" y1="-2.43" x2="874" y2="890.57" xlink:href="#b"/>
  <g style="isolation:isolate">
    <path fill="#1e2021" d="M0 0h907v907H0z"/>
    <path class="c" d="M838 615.45c-.54-.06-1.51-.13-2.87-.24-75.79-6-130.78-23.35-163.56-36.9-41.49-17.15-75-39.34-99.63-65.94-30.57-33-47.53-73-50.43-118.77-5.21-82.25 15.57-282 46.35-389.22L588 5c-30.3 105.55-52.63 306.59-47.52 387.4 4.79 75.74 51.34 132.38 138.36 168.35 31.51 13 84.47 29.77 157.79 35.52 1.59.12 2.73.22 3.36.28z"/>
    <path class="d" d="M723.54 409.4q-9.16 0-18.14-.41c-54.53-2.51-106.1-16.15-162.27-42.91-45.22-21.55-77.07-89.15-94.69-200.95C435.59 83.58 435.28 7 435.28 6.2h19c0 .75.32 76.1 13 156.23C483.6 266 512.66 330.52 551.3 348.92c110.05 52.44 210.92 54.93 348.16 8.58l6.08 18c-67.37 22.75-127.14 33.9-182 33.9z"/>
    <path class="e" d="M802.12 286.19c-48.89 0-116.11-4.85-174.4-26.27-28.81-10.59-52.24-31.05-69.63-60.8-13.58-23.21-23.48-52.12-29.45-85.9-10-56.88-5.56-107.58-5.36-109.71l18.92 1.74c-.06.68-4.44 50.72 5.22 105 12.6 70.9 41.82 115.24 86.86 131.79 113.27 41.67 265.24 18.83 266.72 18.6l3 18.77c-1.61.25-39.91 6.11-93.22 6.73-2.84.03-5.72.05-8.66.05zM542.2 5.25l-9.46-.87 9.46.87z"/>
    <path class="d" d="M564.31 908.05c-.12-2.15-12.69-218-22.63-436.16C521.47 28.25 531.45 7.87 535.21.2l17.06 8.36c-1.78 4.08-5.66 27.56-2.84 156.19 1.68 76.69 5.48 180.3 11.31 308 9.91 217.4 22.42 432.05 22.54 434.25z"/>
    <path class="f" d="M437.33 908l-19-.23c0-2.19 2.74-221.32 8.25-440.78C437.82 19.6 449.22 6.94 454.7.85l14.12 12.71a4.64 4.64 0 00.61-.82c-2.06 4-7.52 27.05-13.71 155.12-3.69 76.35-7.16 179.62-10.33 306.93-5.39 216.84-8.03 431.07-8.06 433.21zM809.3 715.45c-18.52 0-38.52-.48-58.78-1.76-106.86-6.78-169.57-32.1-186.37-75.24C526.86 542.7 546.94 27.68 547.82 5.8l19 .76c-.21 5.31-20.81 532.91 15.05 625 13.68 35.12 72.35 57 169.67 63.16 75.88 4.84 148.36-1.94 149.08-2l1.8 18.92c-.56.03-40.92 3.81-93.12 3.81z"/>
    <path class="e" d="M60.47 726.62c-31.85 0-51.9-.78-52.35-.8l.76-19c1 0 103.72 4 215.44-6.35 145.77-13.52 240.53-44.87 274-90.65 33.94-46.39 51-164.9 49.35-342.73-1.23-135.54-13.13-258.44-13.25-259.66l18.91-1.86c.12 1.24 12.09 124.85 13.37 261.23 1.73 184.63-16.11 303.82-53 354.26-37.35 51-134.18 84.14-287.8 98.37-63.64 5.89-124.35 7.19-165.43 7.19z"/>
    <path class="c" d="M132.2 545.37a1197 1197 0 01-125.82-6.61l2.24-18.86c2.75.32 275.82 31.71 364.55-47.49 36.15-32.26 60.91-122.55 71.6-261.1 8.19-106.14 5-203.52 5-204.49l19-.64c0 1 3.23 99.26-5 206.42-11.22 145.7-37.43 237.88-77.89 274-40.3 36-116.66 55.62-227 58.45-9.05.22-17.98.32-26.68.32z"/>
    <path class="e" d="M286.57 299.68a345.5 345.5 0 01-37.6-2.24C146.67 286.3 8.79 188.39 3 184.23l11-15.46c1.38 1 139.66 99.19 237 109.79 63 6.86 103.74-6.26 140.25-32C463 196 449.1 125 455 6l19 1c-3.27 65.51 3 118-11.6 163.48-12.69 39.51-34 69.45-58.8 90.57-36.42 31.04-79.72 38.63-117.03 38.63z"/>
    <path class="d" d="M251.21 228.7c-31.08 0-62.8-5.84-94.43-17.41-27.89-10.2-55.77-24.86-82.86-43.55C27.89 136 .3 103.85-.85 102.5l14.46-12.33c.27.32 27.42 31.87 71.53 62.22 40.25 27.7 103.36 60.09 175.47 57.12 78-3.23 121.3-15.37 149.4-41.89 30.54-28.82 45.72-78.74 49.25-161.85l19 .81c-1.87 44.19-7 79.2-15.55 107-8.91 28.88-21.87 51.07-39.64 67.84-31.77 30-78.6 43.62-161.66 47.05-3.41.16-6.8.23-10.2.23z"/>
    <path class="f" d="M226.25 455.3q-42.93 0-100.76-12a967.1 967.1 0 01-122.4-34.5L9.67 391a948.51 948.51 0 00119.89 33.76c82.92 17.18 142.67 15.09 172.82-6 7.09-5 14.24-9.69 21.15-14.26 35.29-23.31 68.62-45.33 94.2-99.51 29.13-61.71 32.7-160.09 35.61-300.77l19 .4c-3 145.39-6.71 243.41-37.43 308.48-27.85 59-65 83.53-100.91 107.25-6.8 4.5-13.84 9.15-20.72 14-19.98 13.94-49.1 20.95-87.03 20.95z"/>
    <path style="mix-blend-mode:darken" fill="url(#a)" d="M0 0h907v907H0z"/>
    <path fill="none" stroke="black" stroke-width="14" d="M0 0h907v907H0z"/>
    
    
    <path class="h" d="M106 381.86a20.48 20.48 0 01-4.77-.49l2-7.75a17.64 17.64 0 0010.15-1.29l3.2 7.34a26.29 26.29 0 01-10.58 2.19zM74.33 370.94l-7-3.88c1.76-3.16 6.4-10.66 11.53-11.94l1.94 7.76c-1.24.43-4.4 4.36-6.47 8.06zM93.31 367.15L85 364c4.78-3.74 12.29-12.63 14.65-12.31s5.93 5.36 5.93 5.36c-1.33 1.48-9.02 7.56-12.27 10.1zM85 396c-2 0-8.59-8.63-8.86-9.28l7.38-3.1S89 390 89 391s-2 5-4 5z"/>
    <path class="h" d="M108.89 393.66c-.32-1.94-4.79-8.62-8.89-9.66l1.59-3.68c2.3.57 13.83 3.85 15.19 12z"/>
    <path class="h" d="M110 387.89a35.18 35.18 0 00-9.08-1.9l.52-8a42.92 42.92 0 0111.64 2.49z"/>
    <path class="h" d="M103.05 383.85l-1.58-7.85c1.16-.24 18.53-2 19.53 1s-1.19 5.44-3.59 6.72-11.79-.39-14.36.13zM105.19 367.85L97 364c.07 0 14.27-8.13 18.13-8.56s4.41 4.69 3.64 7.12-13.28 5.2-13.58 5.29zM73.19 384.18l-6.71-4.36C71.51 372.09 79 360 83 360a5.18 5.18 0 015.06 3.33l.08-.06c-1.77 1.43-9.14 11.97-14.95 20.91z"/>
    <path class="h" d="M76 390.45l-6.32-4.9c7.26-9.37 15.64-20.76 16.52-22.83a.94.94 0 00-.06.18l7.69 2.2C93 368.19 83.65 380.59 76 390.45z"/>
    <path class="h" d="M87.14 388.26l-6.6-4.52c5.62-8.21 11.9-18.59 12.31-21a1.77 1.77 0 000 .22h8c-.01 4.37-7.46 16.17-13.71 25.3z"/>
    <path class="h" d="M96.05 388.18l-6.7-4.36c5.5-8.44 9.39-20.88 9.43-21l7.64 2.36c-.17.56-4.27 13.64-10.37 23z"/>
    <path class="h" d="M102.05 388.18l-6.7-4.36c5.5-8.44 9.61-19.7 9.65-19.82l7 2c-.17.55-3.85 12.82-9.95 22.18zM106 564.86a20.48 20.48 0 01-4.77-.49l2-7.75a17.64 17.64 0 0010.15-1.29l3.2 7.34a26.29 26.29 0 01-10.58 2.19zM74.33 553.94l-7-3.88c1.76-3.16 6.4-10.66 11.53-11.94l1.94 7.76c-1.24.43-4.4 4.36-6.47 8.06zM93.31 550.15L85 547c4.78-3.74 12.29-12.63 14.65-12.31s5.93 5.36 5.93 5.36c-1.33 1.48-9.02 7.56-12.27 10.1zM85 579c-2 0-8.59-8.63-8.86-9.28l7.38-3.1S89 573 89 574s-2 5-4 5z"/>
    <path class="h" d="M108.89 576.66c-.32-1.94-4.79-8.62-8.89-9.66l1.59-3.68c2.3.57 13.83 3.85 15.19 12z"/>
    <path class="h" d="M110 570.89a35.18 35.18 0 00-9.08-1.9l.52-8a42.92 42.92 0 0111.64 2.49z"/>
    <path class="h" d="M103.05 566.85l-1.58-7.85c1.16-.24 18.53-2 19.53 1s-1.19 5.44-3.59 6.72-11.79-.39-14.36.13zM105.19 550.85L97 547c.07 0 14.27-8.13 18.13-8.56s4.41 4.69 3.64 7.12-13.28 5.2-13.58 5.29zM73.19 567.18l-6.71-4.36C71.51 555.09 79 543 83 543a5.18 5.18 0 015.06 3.33l.08-.06c-1.77 1.43-9.14 11.97-14.95 20.91z"/>
    <path class="h" d="M76 573.45l-6.32-4.9c7.26-9.37 15.64-20.76 16.52-22.83a.94.94 0 00-.06.18l7.69 2.2C93 551.19 83.65 563.59 76 573.45z"/>
    <path class="h" d="M87.14 571.26l-6.6-4.52c5.62-8.21 11.9-18.59 12.31-21a1.77 1.77 0 000 .22h8c-.01 4.37-7.46 16.17-13.71 25.3z"/>
    <path class="h" d="M96.05 571.18l-6.7-4.36c5.5-8.44 9.39-20.88 9.43-21l7.64 2.36c-.17.56-4.27 13.64-10.37 23z"/>
    <path class="h" d="M102.05 571.18l-6.7-4.36c5.5-8.44 9.61-19.7 9.65-19.82l7 2c-.17.55-3.85 12.82-9.95 22.18zM106 752.86a20.48 20.48 0 01-4.77-.49l2-7.75a17.64 17.64 0 0010.15-1.29l3.2 7.34a26.29 26.29 0 01-10.58 2.19zM74.33 741.94l-7-3.88c1.76-3.16 6.4-10.66 11.53-11.94l1.94 7.76c-1.24.43-4.4 4.36-6.47 8.06zM93.31 738.15L85 735c4.78-3.74 12.29-12.63 14.65-12.31s5.93 5.36 5.93 5.36c-1.33 1.48-9.02 7.56-12.27 10.1zM85 767c-2 0-8.59-8.63-8.86-9.28l7.38-3.1S89 761 89 762s-2 5-4 5z"/>
    <path class="h" d="M108.89 764.66c-.32-1.94-4.79-8.62-8.89-9.66l1.59-3.68c2.3.57 13.83 3.85 15.19 12z"/>
    <path class="h" d="M110 758.89a35.18 35.18 0 00-9.08-1.9l.52-8a42.92 42.92 0 0111.64 2.49z"/>
    <path class="h" d="M103.05 754.85l-1.58-7.85c1.16-.24 18.53-2 19.53 1s-1.19 5.44-3.59 6.72-11.79-.39-14.36.13zM105.19 738.85L97 735c.07 0 14.27-8.13 18.13-8.56s4.41 4.69 3.64 7.12-13.28 5.2-13.58 5.29zM73.19 755.18l-6.71-4.36C71.51 743.09 79 731 83 731a5.18 5.18 0 015.06 3.33l.08-.06c-1.77 1.43-9.14 11.97-14.95 20.91z"/>
    <path class="h" d="M76 761.45l-6.32-4.9c7.26-9.37 15.64-20.76 16.52-22.83a.94.94 0 00-.06.18l7.69 2.2C93 739.19 83.65 751.59 76 761.45z"/>
    <path class="h" d="M87.14 759.26l-6.6-4.52c5.62-8.21 11.9-18.59 12.31-21a1.77 1.77 0 000 .22h8c-.01 4.37-7.46 16.17-13.71 25.3z"/>
    <path class="h" d="M96.05 759.18l-6.7-4.36c5.5-8.44 9.39-20.88 9.43-21l7.64 2.36c-.17.56-4.27 13.64-10.37 23z"/>
    <path class="h" d="M102.05 759.18l-6.7-4.36c5.5-8.44 9.61-19.7 9.65-19.82l7 2c-.17.55-3.85 12.82-9.95 22.18z"/>
    <g>
      <path class="h" d="M763.69 751.86a20.48 20.48 0 004.77-.49l-2-7.75a17.64 17.64 0 01-10.15-1.29l-3.2 7.34a26.33 26.33 0 0010.58 2.19zM795.4 740.94l7-3.88c-1.76-3.16-6.4-10.66-11.53-11.94l-1.94 7.76c1.24.43 4.4 4.36 6.47 8.06zM776.42 737.15l8.31-3.15c-4.78-3.74-12.29-12.63-14.64-12.31s-5.94 5.36-5.94 5.36c1.33 1.48 9.02 7.56 12.27 10.1zM784.73 766c2 0 8.59-8.63 8.86-9.28l-7.37-3.1s-5.49 6.38-5.49 7.38 2 5 4 5z"/>
      <path class="h" d="M760.84 763.66c.32-1.94 4.79-8.62 8.89-9.66l-1.59-3.68c-2.3.57-13.83 3.85-15.19 12z"/>
      <path class="h" d="M759.76 757.89a35.14 35.14 0 019.09-1.9l-.53-8a42.81 42.81 0 00-11.63 2.49z"/>
      <path class="h" d="M766.68 753.85l1.58-7.84c-1.16-.24-18.53-2-19.53 1s1.19 5.44 3.59 6.72 11.79-.4 14.36.12zM764.54 737.85l8.19-3.85c-.06 0-14.27-8.13-18.13-8.56s-4.4 4.69-3.64 7.12 13.28 5.2 13.58 5.29zM796.54 754.18l6.71-4.36c-5-7.73-12.52-19.82-16.52-19.82a5.16 5.16 0 00-5.05 3.33l-.09-.06c1.77 1.43 9.14 11.97 14.95 20.91z"/>
      <path class="h" d="M793.73 760.45l6.32-4.9c-7.26-9.37-15.64-20.76-16.51-22.83a1.89 1.89 0 00.06.18l-7.7 2.2c.89 3.09 10.19 15.49 17.83 25.35z"/>
      <path class="h" d="M782.59 758.26l6.61-4.52c-5.62-8.21-11.91-18.59-12.32-21a1.77 1.77 0 010 .22h-8c.01 4.37 7.46 16.16 13.71 25.3z"/>
      <path class="h" d="M773.68 758.18l6.7-4.36c-5.5-8.44-9.39-20.88-9.43-21l-7.64 2.36c.17.56 4.27 13.64 10.37 23z"/>
      <path class="h" d="M767.68 758.18l6.7-4.36c-5.5-8.44-9.61-19.7-9.65-19.82l-7 2c.17.55 3.85 12.82 9.95 22.18z"/>
    </g>
    <g>
      <path class="h" d="M763.69 566.86a20.48 20.48 0 004.77-.49l-2-7.75a17.64 17.64 0 01-10.15-1.29l-3.2 7.34a26.33 26.33 0 0010.58 2.19zM795.4 555.94l7-3.88c-1.76-3.16-6.4-10.66-11.53-11.94l-1.94 7.76c1.24.43 4.4 4.36 6.47 8.06zM776.42 552.15l8.31-3.15c-4.78-3.74-12.29-12.63-14.64-12.31s-5.94 5.36-5.94 5.36c1.33 1.48 9.02 7.56 12.27 10.1zM784.73 581c2 0 8.59-8.63 8.86-9.28l-7.37-3.1s-5.49 6.38-5.49 7.38 2 5 4 5z"/>
      <path class="h" d="M760.84 578.66c.32-1.94 4.79-8.62 8.89-9.66l-1.59-3.68c-2.3.57-13.83 3.85-15.19 12z"/>
      <path class="h" d="M759.76 572.89a35.14 35.14 0 019.09-1.9l-.53-8a42.81 42.81 0 00-11.63 2.49z"/>
      <path class="h" d="M766.68 568.85l1.58-7.84c-1.16-.24-18.53-2-19.53 1s1.19 5.44 3.59 6.72 11.79-.4 14.36.12zM764.54 552.85l8.19-3.85c-.06 0-14.27-8.13-18.13-8.56s-4.4 4.69-3.64 7.12 13.28 5.2 13.58 5.29zM796.54 569.18l6.71-4.36c-.........完整代码请登录后点击上方下载按钮下载查看