Jquery-UI是一個(gè)功能強(qiáng)大的JavaScript庫(kù)，它提供了豐富的交互式控件和效果。其中，在jquery-ui中，左右拖動(dòng)是常見(jiàn)的一種交互方式。下面我們來(lái)講講如何使用jquery-ui實(shí)現(xiàn)左右拖動(dòng)的效果。

//HTML
<div id="draggable"></div>
//JS
$(function() {
$("#draggable").draggable({
axis: "x",
containment: "parent",
drag: function(event, ui) {
$(this).css('cursor', 'col-resize');
$(this).css('width', ui.position.left + $(this).width() / 2);
},
stop: function() {
$(this).css('cursor', 'auto');
}
});
});

代碼中，我們用到了jquery-ui中的draggable()方法，axis選項(xiàng)指定只能在水平方向拖動(dòng)，containment選項(xiàng)指定拖動(dòng)范圍并將拖動(dòng)限制在父元素中。在drag事件中，我們跟蹤拖動(dòng)的位置并設(shè)置元素的寬度，stop事件中將鼠標(biāo)指針還原成默認(rèn)狀態(tài)。

一些Web應(yīng)用程序需要使用左右拖動(dòng)功能，如拖動(dòng)調(diào)整大小的面板或分隔符。上述代碼示例提供了使用jQuery-UI的方法，可以實(shí)現(xiàn)這種效果。學(xué)會(huì)這個(gè)技巧可以極大地提高Web應(yīng)用程序的交互體驗(yàn)。