Javascript jquery UI可拖动-防止冲突 分区集装箱{ 宽度：300px； 高度：300px； 位置：绝对位置； 左：3%； 排名前10%； z指数：10； } 分区HRblock{ 宽度：100%； 身高：20%； 位置：绝对位置； 左：0； 排名：0； z指数：100； } VRblock分区{ 宽度：20%； 身高：100%； 位置：绝对位置； 左：0； 底部：0； z指数：100； } div.hr滑块{ 宽度：50%； 身高：100%； 边框：1px实心#000000； 位置：绝对位置； 排名：0； z指数：1000； } 第五部分{ 宽度：100%； 身高：50%； 边框：1px实心#000000； 位置：绝对位置； 底部：0； z指数：1000； } $（文档）.ready（函数（）{ $（“.HRslider”）.draggable({ 轴：“x”， 安全壳：“.HRblock” }); $（“.VRslider”）.draggable({ 轴：“y”， 安全壳：“.VRblock” }); })
这里我想要的是，当向上拖动“VRslider”时，如果它碰到“HRslider”，那么它将停止拖动，当我向前移动“HRslider”时，它可以向上滑动。Javascript jquery UI可拖动-防止冲突 分区集装箱{ 宽度：300px； 高度：300px； 位置：绝对位置； 左：3%； 排名前10%； z指数：10； } 分区HRblock{ 宽度：100%； 身高：20%； 位置：绝对位置； 左：0； 排名：0； z指数：100； } VRblock分区{ 宽度：20%； 身高：100%； 位置：绝对位置； 左：0； 底部：0； z指数：100； } div.hr滑块{ 宽度：50%； 身高：100%； 边框：1px实心#000000； 位置：绝对位置； 排名：0； z指数：1000； } 第五部分{ 宽度：100%； 身高：50%； 边框：1px实心#000000； 位置：绝对位置； 底部：0； z指数：1000； } $（文档）.ready（函数（）{ $（“.HRslider”）.draggable({ 轴：“x”， 安全壳：“.HRblock” }); $（“.VRslider”）.draggable({ 轴：“y”， 安全壳：“.VRblock” }); }),javascript,jquery,jquery-ui,Javascript,Jquery,Jquery Ui,这里我想要的是，当向上拖动“VRslider”时，如果它碰到“HRslider”，那么它将停止拖动，当我向前移动“HRslider”时，它可以向上滑动。 有人能告诉我怎么做吗？我希望你应该使用这个插件，如果你对这个插件不感兴趣，你可以这样使用 <!DOCTYPE html> <html> <head> <style> div.container{ width:300px; height:300px; position: ab
有人能告诉我怎么做吗？我希望你应该使用这个插件，如果你对这个插件不感兴趣，你可以这样使用
<!DOCTYPE html>
<html>
<head>
<style>
div.container{
width:300px;
height:300px;
position: absolute;
left:3%;
top:10%;
z-index:10;
}
div.HRblock{
width:100%;
height:20%;
position: absolute;
left:0;
top:0;
z-index:100;
}
div.VRblock{
width:20%;
height:100%;
position: absolute;
left:0;
bottom:0;
z-index:100;
}
div.HRslider{
width:50%;
height:100%;
border:1px solid #000000;
position: absolute;
top:0;
z-index:1000;
}
div.VRslider{
width:100%;
height:50%;
border:1px solid #000000;
position: absolute;
bottom:0;
z-index:1000;
}
</style>
<script src="jquery-2.1.4.js"></script>
<script src="jquery-ui.js"></script>
<script src="jquery.ui.touch-punch.js"></script>
<script>
$(document).ready(function(){
$(".HRslider").draggable({
axis:"x",
containment:".HRblock"
});
$(".VRslider").draggable({
axis:"y",
containment:".VRblock"
});
})
</script>
</head>
<body>
<div class="container">
<div class="HRblock">
<div class="HRslider"></div>
</div>
<div class="VRblock">
<div class="VRslider"></div>
</div>
</div>
</body>
</html>