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