jQuery-UI是一款非常流行的JavaScript框架，其中包含的寬帶左右拖動功能可以讓用戶方便地調(diào)整元素之間的距離。下面是一個簡單的示例：
<!doctype html>
<html>
<head>
<link rel="stylesheet" >
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
#draggable {
width: 150px;
height: 50px;
background: #ccc;
position: absolute;
left: 50px
}
#resizable {
width: 150px;
height: 50px;
background: #eee;
position: absolute;
left: 250px
}
</style>
<script>
$(function() {
$( "#draggable" ).draggable();
$( "#resizable" ).resizable();
});
</script>
</head>
<body>
<div id="draggable">
<p>Drag Me</p>
</div>
<div id="resizable">
<p>Resize Me</p>
</div>
</body>
</html>上面的代碼中，我們通過引入jQuery-UI的CSS和JavaScript文件，并定義了兩個元素，分別是id為draggable和resizable的div。在JavaScript中，我們通過調(diào)用draggable和resizable方法來實現(xiàn)元素的拖動和縮放。
實際上，只需一行JavaScript代碼就可以實現(xiàn)寬帶左右拖動的效果：
$( "#draggable" ).draggable();
這里的 "#draggable" 是我們要操作的元素的選擇器，可以根據(jù)實際情況進行修改。同樣，如果想要實現(xiàn)寬帶的上下拖動，只需要調(diào)用draggable方法時加上"axis: 'y'"參數(shù)即可。
總體來說，jQuery-UI寬帶左右拖動功能非常靈活，可以應用于各種項目中，大大提高了用戶體驗。如果您還沒有嘗試過這個功能，不妨在自己的項目中加入一下吧。