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.........完整代码请登录后点击上方下载按钮下载查看