react实现拖拽旋钮调节器效果代码-html代码-BFW代码库

react实现拖拽旋钮调节器效果代码

代码语言：html

所属分类：拖放

代码描述：react实现拖拽旋钮调节器效果代码，按住鼠标左键不放拖拽即可实现旋转旋钮指示值变化。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

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

<style>
    html, body {
  height: 100vh;
}

body {
  margin: 0;
  background-image: radial-gradient(30% 50%, #555 6%, #333 90%);
  display: flex;
  justify-content: center;
  align-items: center;
}

.App {
  display: grid;
  justify-content: center;
  align-items: center;
  grid-template-columns: 1fr 1fr;
  grid-gap: 5em;
}

.knob {
  display: flex;
  position: relative;
}

.knob .ticks {
  position: absolute;
}

.knob .ticks .tick {
  position: absolute;
  background: black;
  box-shadow: inset 0 0 0 0 black;
  width: 3px;
  transition: box-shadow 0.5s;
}

.knob .ticks .tick.active {
  box-shadow: inset 0 0 5px 2px #509eec, 0 0 0 1px #369;
}

.knob.outer {
  border-radius: 50%;
  border: 1px solid #222;
  border-bottom: 5px solid #222;
  background-image: radial-gradient(100% 70%, #666 6%, #333 90%);
  box-shadow: 0 5px 15px 2px black, 0 0 5px 3px black, 0 0 0 12px #444;
}

.knob.inner {
  border-radius: 50%;
}

.knob.inner .grip {
  position: absolute;
  width: 5%;
  height: 5%;
  bottom: 2%;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #509eec;
  box-shadow: 0 0 3px 1px black;
}
</style>
</head>

<body>
    <!-- partial:index.partial.html -->

    <!-- partial -->
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react.production.16.13.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/react-dom.production.16.13.js"></script>
    <script >
        function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}class Knob extends React.Component {
  constructor(props) {
    super(props);_defineProperty(this, "startDrag",

    e => {
      e.preventDefault();
      const knob = e.target.getBoundingClientRect();
      const pts = {
        x: knob.left + knob.width / 2,
        y: knob.top + knob.height / 2 };

      const moveHandler = e => {
        this.currentDeg = this.getDeg(e.clientX, e.clientY, pts);
        if (this.currentDeg === this.startAngle) this.currentDeg--;
        let newValue = Math.floor(
        this.convertRange(
        this.startAngle,
        this.endAngle,
        this.props.min,
        this.props.max,
        this.currentDeg));


        this.setState({ deg: this.currentDeg });
        this.props.onChange(newValue);
      };
      document.addEventListener("mousemove", moveHandler);
      document.addEventListener("mouseup", e => {
        document.removeEventListener("mousemove", moveHandler);
      });
    });_defineProperty(this, "getDeg",

    (cX, cY, pts) => {
      const x = cX - pts.x;
      const y = cY - pts.y;
      let deg = Math.atan(y / x) * 180 / Math.PI;
      if (x < 0 && y >= 0 || x < 0 && y < 0) {
        deg += 90;
      } else {
        deg += 270;
      }
      let finalDeg = Math.min(Math.max(this.startAngle, deg), this.endAngle);
      return finalDeg;
    });_defineProperty(this, "convertRange",

    (oldMin, oldMax, newMin, newMax, oldValue.........完整代码请登录后点击上方下载按钮下载查看