块可拖动元素出现在另一个元素之后
Block draggable element from appearing after another
在同一个x轴上有两个可拖动元素。我想重现滑块效果,我的意思是滑块1不能在滑块2后面。
我不知道怎么做。有人能帮我吗?
我使用jQuery和可拖动插件从jQuery UI。
编辑:
代码:HTML:
<div id="chrono-bar">
<div id="slider-left" class="slider-left draggable obstacle"></div>
<div id="slider-right" class="slider-right draggable"></div>
<ul class="chrono-bar-ul block">
<li class="chrono-bar-item">Janvier</li>
<li class="chrono-bar-item">Février</li>
<li class="chrono-bar-item">Mars</li>
<li class="chrono-bar-item">Avril</li>
<li class="chrono-bar-item">Mai</li>
<li class="chrono-bar-item">Juin</li>
<li class="chrono-bar-item">Juillet</li>
<li class="chrono-bar-item">Aout</li>
<li class="chrono-bar-item">Septembre</li>
<li class="chrono-bar-item">Octobre</li>
<li class="chrono-bar-item">Novembre</li>
<li class="chrono-bar-item last">Décembre</li>
</ul>
<div class="chrono-bar-footer">
<div class="line"></div>
</div>
Javascript:
<script>
$("#slider-left").draggable({
axis: 'x',
containment: 'parent',
'snap': '#slider-right',
collide: 'block',
drag: function() {
console.log($('#slider-left').offset().left);
}
});
$("#slider-right").draggable({ axis: 'x', containment: 'parent','snap': '#slider-left' });
您的slider-left
的containment
应该是slider-right
,如果你不希望滑块左后滑块右。谢谢。
我的解决方案是在每次拖动时更改遏制区域。我和你分享我的代码:
var left = $('#chrono-bar').offset().left;
$("#slider-left").draggable({
axis: 'x',
containment: [left,100,left+944-46,100],
'snap': '#slider-right',
collide: 'block',
drag: function() {
$("#slider-right" ).draggable( "option", "containment", [$(this).position().left+left+46-5, 100, left+944-46, 1000] );
autoWidth = $("#slider-right" ).position().left - $(this).position().left-46;
$('#slider-middle-auto').css({width:autoWidth+'px', left: $(this).position().left + 46+'px'});
$("#slider-left").css({'background-position':'0px -68px'});
},
stop:function(e) {
autoWidth = $("#slider-right" ).position().left - $(this).position().left-46;
$('#slider-middle-auto').css({width:autoWidth+'px', left: $(this).position().left + 46+'px'});
$("#slider-left").css({'background-position':'0px 0px'});
refreshListEvent(e);
},
grid : [77,77]
});
$("#slider-right").draggable({
axis: 'x',
containment: 'parent',
'snap': '#slider-left',
drag : function() {
$("#slider-left" ).draggable( "option", "containment", [left-5, 100, $(this).position().left+left, 1000] );
autoWidth = $(this).position().left - $("#slider-left" ).position().left - 46;
$('#slider-middle-auto').css({width:autoWidth+'px', left: $("#slider-left" ).position().left + 46+'px'});
$("#slider-right").css({'background-position':'0px -68px'});
},
stop:function(e) {
autoWidth = $(this).position().left - $("#slider-left" ).position().left - 46;
$('#slider-middle-auto').css({width:autoWidth+'px', left: $("#slider-left" ).position().left + 46+'px'});
$("#slider-right").css({'background-position':'0px 0px'});
refreshListEvent(e);
},
grid : [77,77]
});
$("#slider-right" ).draggable( "option", "containment", [$("#slider-left" ).position().left+left+46, 100, left+944-46, 1000] );
$("#slider-left" ).draggable( "option", "containment", [left-5, 100, $("#slider-right" ).position().left+left, 1000] );
autoWidth = $("#slider-right" ).position().left - $("#slider-left" ).position().left - 46;
$('#slider-middle-auto').css({width:autoWidth+'px', left: $("#slider-left" ).position().left + 46+'px'});
有一些错误,但我认为这是一个好的开始
相关文章:
- 使用clickToggle并在单击另一个元素时关闭元素
- 按我自己的类克隆另一个元素的内容和顺序
- 如何通过HTML+CSS中的另一个元素Selector更改元素的属性值
- 使用svg和javascript将一个类的元素动画化为另一个类
- 将html元素插入到文本字符串中,以匹配另一个html字符串
- jQuery-将列表项的一个元素移动到同一项的另一个元素中+对我的列表中的每个项执行此操作
- jquery从另一个元素中移除移除
- DIV怎么能像Javascript中的另一个元素一样工作呢
- 使用数据属性将HTML数据复制到另一个元素
- 如何从另一个带下划线的数组中筛选带元素的数组
- 将鼠标悬停在Angular JS中的一个元素上,并将Class添加到另一个元素中
- 在类JavaScript选择的另一个元素中选择一个标记元素
- 只要存在,就用另一个元素替换一个元素
- 检查一个元素是否有一个类与另一个类总是返回true
- 初学者反应查询(如何删除一个元素并附加另一个元素)
- 将jquery ui窗口的父元素设置为另一个元素
- 如何激活下拉菜单:在一个元素上单击768px宽度下方,在另一个元素上将鼠标悬停在768px上方
- Pixijs将元素附加到另一个元素
- 将SVG元素拖动到另一个SVG元素上
- JavaScript:将输入范围行为链接到另一个元素