Javascript 创建一个分段控件，就像使用可拖动函数一样

我有两个相邻的div和一个背景div。我们将背景

div

“bg

div

”。只要选择了2个

div

中的一个，bg

div

就会被放置在所选

div

的顶部，并进行转换。基本上，类似于分段控制器

我想做的下一步是，我想使bg

div

draggable。如果它被拖动，但不是一直拖到任何一边，那么它应该捕捉到bg

div

主要位于的那一边

我在找这样的东西：

当我将bg

div

设置为可拖动时（使用jqueryui），它是不可拖动的。只有当我删除

z-index:-1

时，它才变得可拖动。它也没有卡在两边。它只有在bg

div

基本上一直被拖到最后的时候才会断开。而且，当我拖动它时，它有一种奇怪的效果。它先等一会儿，然后再拖。我想那是因为过渡

问题

• 如何使用索引为-1的

  使其可拖动

• 我如何使它捕捉到bg

  div

  主要位于哪一侧
• 我怎样才能在不工作的情况下实现过渡

没有问题，但不是可拖动的功能：
有问题：

$（'#bckgrnd'）。可拖动({
轴：“x”，
遏制：“家长”，
捕捉：“.标签”
});
#收音机{
位置：相对位置；
宽度：370px；
}
输入{
显示：无；
}
#bckgrnd，
#bckgrndClear，
.标签{
宽度：50%；
高度：30px；
文本对齐：居中；
显示：内联块；
浮动：左；
填充顶部：10px；
光标：指针；
}
.标签{
外形：1px纯绿色；
}
#bckgrnd{
背景颜色：橙色；
位置：绝对位置；
左：0；
排名：0；
过渡：左线性0.3s；
}
#rad1:选中~#bckgrnd{
左：0；
}
#rad2:已选中#bckgrnd{
左：50%；
}

第一选择
第二种选择
可通过索引-1拖动：为捕获鼠标事件的整个事件（收音机？）设置一个容器div。鼠标向下记录鼠标x值。mousemove（我想在按下按钮的情况下）计算当前鼠标x到mousedown x的“增量”，并将其添加到要“拖动”的对象的原始x值中

捕捉：只是使用最小/最大函数来限制增量，但听起来好像有些动画甚至是“捕捉”的动画。因此，对于位于某个端点区域范围内的鼠标，启动该动画以“捕捉”到一侧或另一侧

此外，在靠近边缘的特定边界内单击会触发相同的快照。
工作解决方案：（我知道您不会使用它：）

如何使其可拖动索引的大小：-1？


添加两个元素，其中一个包含“指针事件：无；”标签将忽略所有鼠标事件和“z-index:3”，
第二个是“按钮”，有“z-index:1”。
就像这样，您将有一个标签，它忽略所有鼠标事件，并以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
}



我如何才能在不工作的情况下实现过渡？


您可以使用混合css和js动画的jQuery“animate”instad设置转换
我可能已经可以使用
无线电元素来完成这项工作了……

但在提交时，您可以通过任何方式发送
数据-*
值

以下是我的看法：



$（“.io toggler”）.each（函数（）{
变量io=$（此）.data（“io”），
$opts=$（this.find（“.io选项”），
$clon=$opts.clone（），
$span=$clon.find（“span”），
宽度=$opts.width（）/2；
$（this.append（$clon）；
功能交换（x）{
$clon.stop（）.animate（{left:x}，150）；
$span.stop（）.animate（{left:-x}，150）；
数据（“io”，x==0？0:1）；
}
$clon.draggable({
轴：“x”，
遏制：“家长”，
拖动：函数（evt、ui）{
$span.css（{left:-ui.position.left}）；
},
停止：功能（evt、ui）{
交换（ui.position.left<宽度/2？0：宽度）；
}
});
$opts.on（“单击”，函数（）{
交换（$clon.position（）.left>0？0:宽度）；
});
//读取并设置初始预定义数据io
如果（！！io）$opts.trigger（“单击”）；
//提交时读取$（“.io触发器”）.data（“io”）值
});
.io切换程序{
光标：指针；
显示：内联块；
位置：相对位置；
字体：20px/1.5无衬线；
背景：url(http://i.stack.imgur.com/XVCAQ.png);
颜色：#fff；
边框：4px实心透明；
边界半径：50px；
用户选择：无；
-webkit用户选择：无；
-webkit触摸标注：无；
}
.io选项{
边界半径：50px；
排名：0；
左：0；
溢出：隐藏；
}
.io选项范围{
位置：相对位置；
文本对齐：居中；
显示：内联块；
填充：3px35px；
}
/*jQ克隆*/
.io选项+.io选项{
位置：绝对位置；
背景：#fff；
宽度：50%；
身高：100%；
空白：nowrap；
}
.io选项+.io选项范围{
颜色：#006cff；
}

事情1
事情2



对
不
没有任何理由不使用现有插件，例如，@AdiDarachi我想自己创建它。@AdiDarachi还有，这是一个开关，不是上面的gif那样的分段控件。这是一个诚实的问题，我喜欢答案。你不能使用z-index:-1，如果它是-1，你不能点击它。你能提供一个例子吗？我不认为这是真正的琐碎或快速。你从哪里得到这个示例图像的？在第一步中，你是说我应该有4个标签在一起？是的，其中两个位置：绝对；排名：0；z指数：3；指针事件：无；'这将保存文本，其中两个就像你一样