拖动和对齐切换开关

Question

继续here，想要添加切换按钮的平滑拖动，并根据mainToggle的释放位置将其锁定到任一侧。另外，在拖动和悬停时更改鼠标指针。

• 问题1：工作正常，但不流畅/引人注目（例如：拖动时打开/关闭文本外观）。
• 问题2：鼠标指针在变化，但是还有什么更好的方法吗？
• 其他任何改进/建议

const totSwtch = 1;
const digSwtchNmbrs = [2];
const ssLen = 2; // substringLength

window.addEventListener('DOMContentLoaded', function() {
    var swConnection =  ["a0"];
    var swPos = [];
    var req = [];

    for (var i = 0; i < totSwtch; i++) {
        (function(i){
          if (Math.random() >= 0.5){
              swPos[i] = true;
          } else {
              swPos[i] = false;
          }
          
          drawSwitch(pad(i,ssLen),swPos[i]);
        })(i);
      }

    let isDown = false;
    var selectedSwitch;

    var togglebtns = document.getElementsByClassName('togglebtn');
    for (var i = 0; i < togglebtns.length; i++) {
        togglebtns[i].addEventListener('click', function() {
            changingSwtch = Number(this.id.substr(ssLen));
            swPos[changingSwtch] = !swPos[changingSwtch];

            drawSwitch(this.id.substr(ssLen),swPos[changingSwtch]);
        });    

        togglebtns[i].addEventListener('mousedown', function () {
            isDown = true;
            selectedSwitch = this.id;
            this.classList.add("active");
        });

        togglebtns[i].addEventListener('mouseup', function () {
            isDown = false;
            tbSnap4mouseUp(selectedSwitch.substr(2),swPos,digSwtchNmbrs);
            this.classList.remove("active");
        });
    }
    
    window.addEventListener('mouseup', function () {
        if(!isDown) return;
        isDown = false;
        tbSnap4mouseUp(selectedSwitch.substr(2),swPos,digSwtchNmbrs);
        var btnWrapper = document.getElementById(selectedSwitch);
        btnWrapper.classList.remove("active");
    });

    window.addEventListener('mousemove', function (event) {
        if (!isDown) return;        

        var btnWrapper = document.getElementById(selectedSwitch);
        var btn = document.getElementById('mt'+selectedSwitch.substr(2));

        document.body.style.cursor = "grabbing";
        btn.style.cursor = "grabbing";
        
        if (event.clientX <= btnWrapper.getBoundingClientRect().left + btn.getBoundingClientRect().width/2 + 2){
            btn.style.left = '0px';
        } else if (event.clientX >= btnWrapper.getBoundingClientRect().right - btn.getBoundingClientRect().width/2 - 2){
            btn.style.left = (btnWrapper.offsetWidth - btn.offsetWidth - 2)+'px';
        } else {
            btn.style.left = event.clientX-btnWrapper.getBoundingClientRect().left-btn.getBoundingClientRect().width/2 - 2 +'px';
            if (btn.style.left<=(btnWrapper.offsetWidth - btn.offsetWidth - 2)/2+'px'){
                btnWrapper.classList.remove("on-text");
                btnWrapper.classList.add("off-text");
            } else {
                btnWrapper.classList.add("on-text");
                btnWrapper.classList.remove("off-text");
            }
        }
    });
}, false);

function tbSnap4mouseUp(tbStr,swPos,digSwtchNmbrs){
    var btnWrapper = document.getElementById('tb'+tbStr);
    var btn = document.getElementById('mt'+tbStr);

    document.body.style.cursor = "auto";
    btn.style.cursor = "grab";

    if (btn.style.left<=(btnWrapper.offsetWidth - btn.offsetWidth - 2)/2+'px'){
        swPos[Number(tbStr)] = false;
    } else {
        swPos[Number(tbStr)] = true;
    }
    
    drawSwitch(tbStr,swPos[Number(tbStr)]);
}

function drawSwitch(pinNoStr,state){
    var btnWrapper = document.getElementById('tb'+pinNoStr);
    var btn = document.getElementById('mt'+pinNoStr);

    if (state == true) {
        btn.style.left = (btnWrapper.offsetWidth - btn.offsetWidth - 2)+'px';
        btnWrapper.style.background = '#7bc77b';
        btnWrapper.style.border = '1px solid #7bc77b';
        btnWrapper.classList.add("on-text");
        btnWrapper.classList.remove("off-text");
        
        document.getElementById('l'+pinNoStr).style.cssText = 'background: #b9f3fe;\
            background: gradient-gradient(#ffffff, #77a1b9);\
            box-shadow: inset 0 1px 0 rgba(0,0,0,0.1),  0 1px 0 rgba(255,255,255,0.1),  0 0 10px rgba(100,231,253,1),  inset 0 0 8px rgba( 61,157,247,0.8),  inset 0 -2px 5px rgba(185,231,253,0.3),  inset 0 -3px 8px rgba(185,231,253,0.5);'
    } else {
        btn.style.left = '0px';
        btnWrapper.style.background = 'lightgrey';
        btnWrapper.style.border = '1px solid lightgrey';
        btnWrapper.classList.remove("on-text");
        btnWrapper.classList.add("off-text");

        document.getElementById('l'+pinNoStr).style.cssText = 'background: #283446;\
            background: gradient-gradient(#36455b, #283446);\
            box-shadow: inset 0 1px 0 rgba(0,0,0,0.2),  0 1px 0 rgba(255,255,255,0.1),  0 0 10px rgba(185,231,253,0),  inset 0 0 8px rgba(0,0,0,0.9),  inset 0 -2px 5px rgba(0,0,0,0.3),  inset 0 -5px 5px rgba(0,0,0,0.5);'
    }
}

function pad(n, width, z) {
    z = z || '0';
    n = n + '';
    return n.length >= width ? n : new Array(width - n.length + 1).join(z) + n;
}

* {
  margin: 0;
  padding: 0;
}

.dc {
  margin: 10px 50px 10px 50px;
  padding: 10px 10px 10px 10px;
  background: rgb(183, 154, 216);
}

.tbanimate {
  transition: all 0.3s ease-in-out;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
}

.togglebtn {
  width: 75px;
  height: 33px;
  float: left;
  background: lightgray;
  border-radius: 9999px;
  border: 2px solid lightgray;
  position: relative;
}

.on-text:before {
  content: 'On';
  position: absolute;
  top: 8px;
  left: 8px;
}

.off-text:after {
  content: 'Off';
  position: absolute;
  top: 8px;
  right: 8px;
}

.mainToggle {
  width: 33px;
  height: 33px;
  background: whitesmoke;
  border-radius: 9999px;
  position: relative;
  left: 0;
}

.mainToggle:active{
    cursor: -webkit-grabbing;
    cursor:    -moz-grabbing;
    cursor:         grabbing;
}
.mainToggle:hover{
    cursor: move; /* fallback: no `url()` support or images disabled */
    cursor: -webkit-grab; /* Chrome 1-21, Safari 4+ */
    cursor:    -moz-grab; /* Firefox 1.5-26 */
    cursor:         grab; /* W3C standards syntax, should come least */
}

.light {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  margin: 10px;
  border-radius: 9999px;
  -webkit-transition: all .5s ease;
  transition: all .5s ease;
  z-index: 2;
}

<section class="dc" id="00">
  <div>
    <div class="togglebtn tbanimate" id="tb00">
      <div class="mainToggle tbanimate" id="mt00"></div>
    </div>
    <div class="light" id="l00"></div>
  </div>
</section>

仅使用JS，CSS。