基于新信息技術(shù)的jQuery開發(fā)基礎(chǔ)教程課件：jQuery UI鍵鼠交互

jQuery?UI鍵鼠交互9.1元素拖放draganddrop9.2元素排序sortable9.3元素縮放resizable9.4元素選取selectable單元總結(jié)

9.1元素拖放draganddrop

拖放是網(wǎng)頁中用于移動項目的常用操作，可以使用鼠標將元素拖動，放到另一個頁面元素上。拖放包含兩個操作：拖拽和放置。雖然這兩個操作通常都是在一起使用，但jQueryUI還是對這兩個操作進行了區(qū)分，將它們分為“drag”(對象的移動)和“drop”(正在移動的對象的存放)操作，并為我們提供了draggable()和droppable()兩個方法。

9.1.1draggable()方法

draggable()方法用于創(chuàng)建一個可拖拽(draggable)元素。語法如下：

$(selector).draggable(options)

$(selector).draggable("action",param)

其中：options是以對象鍵值對的形式傳參，每個鍵值對表示一個選項；action是操作對話框方法的字符串，param則是options的某個選項。

比如在頁面中有一個div元素，為了元素能被我們觀察到，給它設(shè)定200?px的寬度和高度以及一個背景顏色，接下來通過jQueryUI提供的draggable()方法設(shè)置它為可拖拽元素，代碼如下：

頁面運行效果如圖9-1和圖9-2所示。圖9-1頁面打開效果圖9-2元素拖拽效果

表9-1列出了draggable()方法的設(shè)置選項。

表9-2列舉了可拖拽元素的一些控制方法。

表9-3列舉了可拖拽元素的事件。

9.1.2droppable()方法

droppable()方法用于創(chuàng)建一個可放置(droppable)元素。與可拖拽元素不同，可放置元素必須依賴可拖拽元素存在，它只作為可拖拽元素的目的地元素存在，所以單獨設(shè)置一個可放置元素而不設(shè)置可拖動元素并沒有什么意義。語法如下：

$(selector).droppable(options)

$(selector).droppable("action",param)

其中：options是以對象鍵值對的形式傳參，每個鍵值對表示一個選項；action是操作對話框方法的字符串，param則是options的某個選項。

表9-4列出了droppable()方法的設(shè)置選項。

表9-5列舉了可放置元素的一些控制方法。

表9-6列舉了可放置元素的事件。

9.1.3元素拖放綜合示例

如圖9-3所示，頁面左側(cè)有4張圖片，右側(cè)有一個回收站，編程實現(xiàn)用戶可以拖動圖片放入回收站中，也可以將回收站中的圖片拖動出來。圖9-3元素拖放綜合示例

運行代碼后，可以拖動圖片到回收站，效果如圖9-4所示。圖9-4拖動圖片放入回收站效果圖

9.2元素排序sortable

排序功能在項目開發(fā)中也經(jīng)常會遇到，大多數(shù)包含有表格、列表等的頁面都是支持排序的。jQueryUI也為我們提供了排序功能，而且使用起來非常的簡單。下面是一個簡單的排序例子，在頁面上有一個無序列表(ul)，我們可以拖動列表中的項(li)改變它們的順序。

頁面代碼如下：

頁面效果如圖9-5所示。圖9-5元素排序效果圖

jQueryUI的排序功能是通過對元素使用sortable()方法實現(xiàn)的。這里有一點需要注意：jQueryUI的排序(sortable())方法是針對元素的子元素進行排序，因此，如果我們要設(shè)置表格的行為可排序，需要對tbody元素應(yīng)用sortable()方法，而不是對table元素應(yīng)用sortable()方法。雖然我們經(jīng)常會省略tbody元素，但是它會自動生成。比如下面的表格代碼：

在頁面中我們使用開發(fā)者工具檢查表格后會發(fā)現(xiàn)瀏覽器為我們添加了tbody元素，如圖9-6所示。圖9-6開發(fā)者工具中的表格

9.2.1sortable()方法

sortable()方法的作用是讓元素變?yōu)榭膳判蛐〔考?，它針對的是被選擇元素的子元素。語法如下：

$(selector).sortable(options)

$(selector).sortable("action",param)

其中：options是以對象鍵值對的形式傳參，每個鍵值對表示一個選項；action是操作對話框方法的字符串，param則是options的某個選項。

表9-7列出了sortable()方法的設(shè)置選項。

表9-8列舉了元素排序的一些控制方法。

表9-9列舉了元素排序的事件。

9.2.2元素排序綜合示例

如圖9-7所示，頁面中有兩個無序(ul)列表，編程實現(xiàn)可以拖動列表中的項自由排序或者把第一個列表中的項放到第二個列表中排序。圖9-7排序示例頁面

頁面實現(xiàn)效果如圖9-8所示。圖9-8排序效果圖

9.3元素縮放resizable

jQueryUI也為我們提供了縮放元素的功能，可以應(yīng)用于任意的元素，非常方便。當把縮放功能應(yīng)用于一個元素時，將賦予元素一個控制點，并且可以使用鼠標可視化地縮放元素的尺寸。對話框(dialog)部件就是一個典型的可縮放部件，在介紹dialog時，我們已經(jīng)間接地看到了縮放元素的功能。下面的代碼展示了縮放元素的方法：

在頁面中我們定義了一個寬、高均為200?px的div元素，并顯示它的邊框，使用jQuery代碼給元素應(yīng)用resizable()方法后，頁面效果如圖9-9所示。圖9-9設(shè)置元素為可縮放

resizable()方法讓被選元素可調(diào)整尺寸(意味著它們有可拖拽的調(diào)整大小的手柄)。我們可以指定一個或多個手柄，也可以指定寬度和高度的最小值及最大值。語法如下：

$(selector).resizable(options)

$(selector).resizable("action",param)

其中：options是以對象鍵值對的形式傳參，每個鍵值對表示一個選項；action是操作對話框方法的字符串，param則是options的某個選項。

表9-10列出了resizable()方法的設(shè)置選項。

表9-11列舉了resizable()方法的一些控制方法。

表9-12列舉了resizable()方法的事件。

9.4元素選取selectable

jQueryUI提供了selectable()方法，讓元素變?yōu)榭蛇x擇元素，允許通過鼠標拖拽選擇元素，也可以在按住Ctrl鍵的同時單擊或拖動來選擇多個不連續(xù)的元素。selectable()方法語法如下：$(selector).selectable(options)$(selector).selectable("action",param)

其中：options是以對象鍵值對的形式傳參，每個鍵值對表示一個選項；action是操作對話框方法的字符串，param則是options的某個選項。

表9-13列出了selectable()方法的設(shè)置選項。

表9-14列舉了selectable()方法的一些控制方法。

表9-15列舉了selectable()方法的事件。

單?元?總?結(jié)

本單元完成了對jQueryUI提供的鍵鼠交互功能的簡要介紹。介紹了諸如拖拽和置放這樣的交互性部件，以及如何在這些部件的基礎(chǔ)之上實現(xiàn)更加復(fù)雜的交互性功能，比如重新