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

Draggable+gsap实现拖拽接线代码

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