javascript - 创建具有可拖动功能的分段控件

Question

我有 2 个彼此相邻的 div 和一个背景 div。我们将背景 div 称为“bg div”。每当 2 个 div 中的一个被选中时，bg div 就会定位在所选 div 的顶部，并带有一个过渡。基本上，类似于分段 Controller 。

下一步我想做的是，我想让 bg div 可以拖动。如果它被拖动，但没有一直拖到任一侧，那么它应该捕捉到 bg div 大部分所在的一侧。

我正在寻找这样的东西:

当我将 bg div 设置为可拖动时，(使用 JQuery UI)它不可拖动。只有当我删除 z-index: -1 时它才变得可拖动。它也没有折断到任何一侧。只有当 bg div 基本上一直被拖动时，它才会崩溃。另外，当我拖动它时，它会产生奇怪的效果。它稍等片刻，然后拖拽。我认为这是因为过渡。

问题

• 如何使用 index: -1 使其可拖动？
• 如何让它吸附到 bg div 大部分位于的一侧？
• 我怎样才能在不奇怪的情况下实现过渡？

没有问题，但没有可拖动的功能:JSFiddle
有问题:JSFiddle

$('#bckgrnd').draggable({
  axis: "x",
  containment: "parent",
  snap: ".labels"
});

#radios {
  position: relative;
  width: 370px;
}
input {
  display: none;
}
#bckgrnd,
#bckgrndClear,
.labels {
  width: 50%;
  height: 30px;
  text-align: center;
  display: inline-block;
  float: left;
  padding-top: 10px;
  cursor: pointer;
}
.labels {
  outline: 1px solid green;
}
#bckgrnd {
  background-color: orange;
  position: absolute;
  left: 0;
  top: 0;
  transition: left linear 0.3s;
}
#rad1:checked ~ #bckgrnd {
  left: 0;
}
#rad2:checked ~ #bckgrnd {
  left: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="radios">
  <input id="rad1" type="radio" name="radioBtn" checked>
  <label class="labels" for="rad1">First Option</label>
  <input id="rad2" type="radio" name="radioBtn">
  <label class="labels" for="rad2">Second Option</label>
  <div id="bckgrnd"></div>
</div>

Answer 1

工作解决方案:http://jsfiddle.net/6j0538cr/ (我知道你不会用它:))

如何使用 of index: -1 使其可拖动？

• 添加两个元素，其中一个包含带有“pointer-events:none;”的标签这将忽略所有鼠标事件和“z-index:3”， 第二个是“按钮”，将有“z-index:1”。 这样，您将拥有一个忽略所有鼠标事件并 float 在所有 z-index:3 元素上方的标签，并且“背景”仍将是可拖动的

我怎样才能让它捕捉到 bg div 大部分位于的一侧？

• 您可以像这样使用“偏移”和“宽度”函数非常轻松地计算它

  //calculating the middle of the 'background'
  var backgroundX = $('#bckgrnd').offset().left;
  var backgroundWidth = $('#bckgrnd').outerWidth();
  var backgroundMiddle = backgroundX + (backgroundWidth/2);
  
  //calculating the middle of the radios on the page
  var radiosX = $('#radios').offset().left;
  var radiosWidth = $('#radios').outerWidth();
  var radiosMiddle = radiosX + (radiosWidth/2);
  
  //compare the two
  if(radiosMiddle > backgroundMiddle){
      //closer to the left
  }else{
     //closer to the right
  }
  

如何在不奇怪的情况下实现过渡？

• 您可以使用 jQuery“animate”而不是混合 css 和 js 动画来设置过渡。