jQuery draggable是jQuery UI庫中的一個插件，它允許用戶通過鼠標拖動元素。使用jQuery draggable可以為我們的網站創建出更加直觀、用戶友好的交互體驗。

首先，我們需要在頁面中引入jQuery UI庫。可以通過鏈接到在線庫或者下載保存在本地的方式引入：

<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>

然后，我們需要選中要拖動的元素，使用draggable()方法即可：

$( "#element" ).draggable();

其中，#element是拖動的元素ID。可以通過設置參數來調整拖動的行為，例如限制元素在某個范圍內拖動、指定拖動的方向等。

下面是一個例子，展示如何創建一個可拖動的元素，并在拖動完成后顯示拖動的距離：

<style>.draggable {
width: 100px;
height: 100px;
background-color: #3498db;
color: #fff;
text-align: center;
line-height: 100px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
cursor: move;
}
</style>
<div class="draggable">拖動我</div>
<script>
$(function() {
var startX, startY;
$( ".draggable" ).draggable({
start: function(event, ui) {
startX = event.pageX;
startY = event.pageY;
},
stop: function(event, ui) {
var endX = event.pageX;
var endY = event.pageY;
var distance = Math.round(Math.sqrt(Math.pow(endX - startX, 2) + Math.pow(endY - startY, 2)));
$( this ).text("拖動距離：" + distance + "像素");
}
});
});
</script>

在上面的例子中，我們首先創建了一個可拖動的div元素，并樣式化該元素。使用jQuery的draggable()方法創建該元素的拖動功能。在start和stop參數中，我們定制了元素拖動開始和結束的行為。在stop行為中，我們計算了拖動的距離，并將該距離顯示在元素中。

通過使用jQuery draggable插件，我們可以實現更加靈活、優雅的頁面元素交互。希望以上的介紹對您有所幫助。