jQuery Item Selector 是一個(gè)基于 jQuery 的插件，其主要功能是幫助用戶(hù)選擇列表中的項(xiàng)目，同時(shí)能夠方便地移動(dòng)項(xiàng)目的位置。

使用 jQuery Item Selector 插件非常方便，只需在頁(yè)面中引入 jQuery 和該插件的 JS 文件，并創(chuàng)建需要進(jìn)行選擇的列表，即可開(kāi)始使用該插件。

// 引入 jQuery 和 jQuery Item Selector JS 文件
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.itemselector.min.js"></script>
// 創(chuàng)建列表
<ul id="list1">
<li>第一項(xiàng)</li>
<li>第二項(xiàng)</li>
<li>第三項(xiàng)</li>
<li>第四項(xiàng)</li>
<li>第五項(xiàng)</li>
</ul>

一旦列表創(chuàng)建完畢，便可以進(jìn)行項(xiàng)目選擇，只需在 JavaScript 中添加以下代碼：

$(document).ready(function() {
$('#list1').itemSelector({
left: '#selected_items',       // 左側(cè)列表
right: '#available_items'     // 右側(cè)列表
});
});

上述代碼中，我們使用了itemSelector()方法，并傳入了參數(shù)，這些參數(shù)代表了兩個(gè)列表的 ID，左側(cè)列表為#selected_items，右側(cè)列表為#available_items。

在頁(yè)面中添加兩個(gè)空的列表：

<ul id="selected_items"></ul>
<ul id="available_items"></ul>

然后運(yùn)行頁(yè)面，便可以看到如下的效果：

// 初始列表
- 第一項(xiàng)
- 第二項(xiàng)
- 第三項(xiàng)
- 第四項(xiàng)
- 第五項(xiàng)
// 左側(cè)列表（選中）
- （無(wú)）
// 右側(cè)列表（未選中）
- 第一項(xiàng)
- 第二項(xiàng)
- 第三項(xiàng)
- 第四項(xiàng)
- 第五項(xiàng)

現(xiàn)在你可以通過(guò)雙擊列表項(xiàng)，將其從右側(cè)列表移動(dòng)到左側(cè)列表中，并且你可以通過(guò)拖動(dòng)列表項(xiàng)的方式改變項(xiàng)目的位置。

總之，jQuery Item Selector 插件為選擇列表中的項(xiàng)目提供了非常便捷的操作方式，既可以移動(dòng)項(xiàng)目位置，也可以方便地選擇項(xiàng)目，并且還提供了許多可自定義的參數(shù)，同時(shí)還支持拖拽和排序等功能。