可拖动的CSS切换开关

Question

我有一个CSS切换开关，是从网上找来的。

它能工作，但不能拖动。当你在任一侧拖动手柄时，旋钮会放大但不会向指定方向移动。改变值的唯一方法是点击其他空间。但我需要拖动操作，如果足够高级，则也可以更改值。在一定程度的拖动后，需要翻转切换。这可能吗？

/* SWITCH */
.form-switch {
  display: inline-block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.form-switch i {
  position: relative;
  display: inline-block;
  margin-right: .5rem;
  width: 46px;
  height: 26px;
  background-color: #e6e6e6;
  border-radius: 23px;
  vertical-align: text-bottom;
  transition: all 0.3s linear;
}

.form-switch i::before {
  content: "";
  position: absolute;
  left: 0;
  width: 42px;
  height: 22px;
  background-color: #fff;
  border-radius: 11px;
  transform: translate3d(2px, 2px, 0) scale3d(1, 1, 1);
  transition: all 0.25s linear;
}

.form-switch i::after {
  content: "";
  position: absolute;
  left: 0;
  width: 22px;
  height: 22px;
  background-color: #fff;
  border-radius: 11px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.24);
  transform: translate3d(2px, 2px, 0);
  transition: all 0.2s ease-in-out;
} 

.form-switch:active i::after {
  width: 28px;
  transform: translate3d(2px, 2px, 0);
}

.form-switch:active input:checked + i::after { transform: translate3d(16px, 2px, 0); }

.form-switch input { display: none; }

.form-switch input:checked + i { background-color: #4BD763; }

.form-switch input:checked + i::before { transform: translate3d(18px, 2px, 0) scale3d(0, 0, 0); }

.form-switch input:checked + i::after { transform: translate3d(22px, 2px, 0); }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<label class="form-switch">
  <input type="checkbox">
  <i></i>
  Select Me
</label>

- gene b.

---

你解决了吗？ - Eduardo Molteni

没有，还没有解决。 - gene b.

Answer 1

你已经使用了JQuery，所以只需使用*.draggable*设置CSS行为

 $(".victim").draggable({
      //css animation here
 });

同时将victim类设置为*input*

- O.Rares