jQuery UI是一款JavaScript庫，提供了大量的交互效果和組件，其中包括拖放功能。拖放是Web應(yīng)用程序中常用的一項功能，能夠方便地移動元素，為用戶提供更好的操作體驗。

使用jQuery UI中的拖動功能非常簡單。首先，在HTML頁面中引入jQuery和jQuery UI的庫文件：

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" >

接著，創(chuàng)建一個需要拖動的元素，并使用jQuery的draggable()方法使其能夠被拖動。

<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>
<script>
$( "#box" ).draggable();
</script>

以上代碼表示創(chuàng)建了一個紅色的正方形盒子，并使其可以被拖動。但是，這個盒子可以被拖到任何地方，我們需要對其進行限制，使其只能在指定的區(qū)域內(nèi)拖動。

<div id="area" style="width: 300px; height: 300px; background-color: gray;">
<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>
</div>
<script>
$( "#box" ).draggable({ containment: "#area" });
</script>

以上代碼表示將紅色的正方形盒子限制在灰色區(qū)域內(nèi)拖動。

除了限制區(qū)域，我們還可以在拖動結(jié)束時進行一些操作，比如記錄元素位置等。這可以通過使用draggable()方法的stop回調(diào)函數(shù)來實現(xiàn)。

<div id="area" style="width: 300px; height: 300px; background-color: gray;">
<div id="box" style="width: 100px; height: 100px; background-color: red;"></div>
</div>
<script>
$( "#box" ).draggable({ 
containment: "#area",
stop: function( event, ui ) {
var top = ui.position.top;
var left = ui.position.left;
console.log( "位置：top:" + top + ", left:" + left );
}
});
</script>

以上代碼表示在拖動結(jié)束時，將元素的top和left位置記錄下來并輸出到瀏覽器控制臺中。