Jquery-UI是一個功能強大的JavaScript庫，它提供了豐富的交互式控件和效果。其中，在jquery-ui中，左右拖動是常見的一種交互方式。下面我們來講講如何使用jquery-ui實現左右拖動的效果。

//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選項指定只能在水平方向拖動，containment選項指定拖動范圍并將拖動限制在父元素中。在drag事件中，我們跟蹤拖動的位置并設置元素的寬度，stop事件中將鼠標指針還原成默認狀態。

一些Web應用程序需要使用左右拖動功能，如拖動調整大小的面板或分隔符。上述代碼示例提供了使用jQuery-UI的方法，可以實現這種效果。學會這個技巧可以極大地提高Web應用程序的交互體驗。