在網頁開發中，我們經常會用到Draggable這個jQuery插件來實現拖拽功能。Draggable提供了非常豐富的配置和事件，可以滿足絕大部分需求，其中之一就是對齊的功能。

對齊功能可以將拖拽元素對齊到指定的參考線上，例如網頁中的網格線、元素邊框等。這樣可以使頁面布局更加整齊美觀。下面我們來看看如何使用Draggable實現對齊功能。

$( "#draggable" ).draggable({
grid: [ 50, 50 ]
});

如上所示，使用grid選項可以將拖拽元素對齊到以指定長度為單位的網格線上。在上面的例子中，拖拽元素將會對齊到每個50px的網格線上。

$( "#draggable" ).draggable({
snap: ".ui-widget-header",
snapMode: "outer"
});

除了使用grid選項外，我們還可以使用snap選項，將拖拽元素對齊到指定的元素上。在上面的例子中，拖拽元素將會對齊到所有具有class為ui-widget-header的元素上。而snapMode選項則表示對齊位置是元素內部還是邊框外側。

拖拽對齊功能可以讓網頁設計更加規整美觀，增加頁面的用戶體驗。使用Draggable插件可以輕松實現對齊功能。