jQuery-UI是一款非常流行的JavaScript框架，其中包含的寬帶左右拖動(dòng)功能可以讓用戶方便地調(diào)整元素之間的距離。下面是一個(gè)簡單的示例：
<!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文件，并定義了兩個(gè)元素，分別是id為draggable和resizable的div。在JavaScript中，我們通過調(diào)用draggable和resizable方法來實(shí)現(xiàn)元素的拖動(dòng)和縮放。
實(shí)際上，只需一行JavaScript代碼就可以實(shí)現(xiàn)寬帶左右拖動(dòng)的效果：
$( "#draggable" ).draggable();
這里的 "#draggable" 是我們要操作的元素的選擇器，可以根據(jù)實(shí)際情況進(jìn)行修改。同樣，如果想要實(shí)現(xiàn)寬帶的上下拖動(dòng)，只需要調(diào)用draggable方法時(shí)加上"axis: 'y'"參數(shù)即可。
總體來說，jQuery-UI寬帶左右拖動(dòng)功能非常靈活，可以應(yīng)用于各種項(xiàng)目中，大大提高了用戶體驗(yàn)。如果您還沒有嘗試過這個(gè)功能，不妨在自己的項(xiàng)目中加入一下吧。