Question

<!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>

这里我想要的是拖动＆＃34; VRslider＆＃34;如果碰到＆＃34; HRslider＆＃34;然后它会停止拖动，当我移动＆＃34; HRslider＆＃34;然后它可以向上滑动。谁能告诉我怎么做???

jquery UI可拖动 - 防止碰撞

0 个答案: