Question

我有2个div彼此相邻，还有一个背景div。我们将调用背景div“bg div”。每当选择2个divs中的一个时，bg div就会定位在所选div的顶部并进行转换。基本上，像分段控制器。

我想要做的下一步是，我想让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/（我知道你不会用它:)）

如何使用index：-1？

使其可拖动

添加两个元素，其中包含＆＃39; pointer-events：none;＆＃39;这将忽略所有鼠标事件和＆＃39; z-index：3＆＃39;，第二个是＆＃39;按钮＆＃39;并且将具有＆＃39; z-index：1＆＃39;。就像那样，你将有一个忽略所有鼠标事件的标签，并使用z-index：3漂浮在所有元素之上，以及＆＃39;背景＆＃39;仍然可以拖延

如何将其捕捉到bg div主要位于哪一侧？

您可以使用＆＃39; offset＆＃39;非常轻松地计算它和＃＆＃39;宽度＆＃39;功能如此

//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＆＃39; animate＆＃39;设置过渡。混合css和js动画的instad。

Answer 2

带有索引-1的draggable：有一个容器div用于整个事物（无线电？）捕获鼠标事件。 mousedown你记录鼠标x值。 mousemove（我想按下按钮）你计算从当前鼠标x到mousedown x的“delta”，并将其添加到你“拖动”的东西的原始x值。

捕捉：只使用最小/最大功能来限制增量，但听起来有些动画甚至是“快照”。因此，对于某个结束区域范围内的鼠标，触发该动画以“捕捉”到一侧或另一侧。

此外，靠近边缘的某些边界内的单击会触发相同的捕捉。

Answer 3

我可以使用<input>无线电元素完成此操作...
但是，无论如何提交，您都可以发送data-*值。

这是我的看法：

$(".io-toggler").each(function(){
  
  
  var io = $(this).data("io"),
      $opts = $(this).find(".io-options"),
      $clon = $opts.clone(),
      $span = $clon.find("span"),
      width = $opts.width()/2;
  
  $(this).append($clon);
  
  function swap(x) {
    $clon.stop().animate({left:  x}, 150);
    $span.stop().animate({left: -x}, 150);
    $(this).data("io", x===0 ? 0 : 1);
  }
  
  $clon.draggable({
    axis:"x",
    containment:"parent",
    drag:function(evt, ui){
      $span.css({left: -ui.position.left});
    },
    stop:function(evt, ui){
      swap( ui.position.left < width/2 ? 0 : width );
    }
  });
  
  $opts.on("click", function(){
    swap( $clon.position().left>0 ? 0 : width );
  });
  
  // Read and set initial predefined data-io
  if(!!io)$opts.trigger("click");
  // on submit read $(".io-toggler").data("io") value
  
});

.io-toggler{
  cursor:pointer;
  display:inline-block;
  position:relative;
  font:20px/1.5 sans-serif;
  background:url(http://i.stack.imgur.com/XVCAQ.png);
  color:#fff;
  border:4px solid transparent;
  border-radius: 50px;
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;
}
.io-options{
  border-radius:50px;
  top:0;
  left:0;
  overflow:hidden;
}
.io-options span{
  position:relative;
  text-align:center;
  display:inline-block;
  padding: 3px 35px;
}

/* the jQ clone */
.io-options + .io-options{
  position:absolute;
  background:#fff;
  width:50%;
  height:100%;
  white-space:nowrap;
}
.io-options + .io-options span{
  color:#006cff;
}

<link href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" />
<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>

<span class="io-toggler" data-io="0">
  <span class="io-options">
    <span>Thing1</span>
    <span>Thing2</span>
  </span>
</span>

<br><br>

<span class="io-toggler" data-io="1">
  <span class="io-options">
    <span>Yes</span>
    <span>No</span>
  </span>
</span>

创建一个带有可拖动函数的分段控件

3 个答案: