说明

通过定义draggable区域的边界来约束每个draggable的运动。设置axis选项来限制draggable的路径为x轴或者y轴


示例

<!DOCTYPEhtml><html><head><metacharset="utf-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge"><title>draggable</title><linkrel="stylesheet"href="js/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.min.css"><style>.draggable{width:90px;height:90px;padding:0.5em;float:left;margin:010px10px0;}#draggable1,#draggable2{margin-bottom:20px;}#draggable1{cursor:e-resize;}#draggable2{cursor:n-resize;}h4{clear:left;}</style></head><body><h4>沿着X轴约束运动：</h4><divid="draggable1"class="draggableui-widget-content"><p>只能水平拖拽</p></div><h4>沿着Y轴约束运动：</h4><divid="draggable2"class="draggableui-widget-content"><p>只能垂直拖拽</p></div><scriptsrc="js/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/external/jquery/jquery.js"type="text/javascript"></script><scriptsrc="js/jquery-ui-1.12.1.custom/jquery-ui-1.12.1.custom/jquery-ui.min.js"></script><script>$("#draggable1").draggable({axis:"x"});$("#draggable2").draggable({axis:"y"});</script></body></html>


输出