<!DOCTYPE html>
<html><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>jquery 列表选择</title>
<meta charset="utf-8">
<link rel="stylesheet" href="images/list-style.css">
</head>
<body>
<h2 style="text-align:center;">列表选择</h2>
<div id="selectTitle" class="list-select ui-draggable">
<div class="list-title ui-draggable-handle">
<h4>挑选你的最爱（选项可拖动、双击、单击进行选择）</h4>
</div>
<div class="list-body">
<ul class="item-box left-box ui-sortable ui-droppable">
<!-- 左边框初始化待选项 -->
<li class="item ui-sortable-handle" data-id="xigua">西瓜</li>
<li class="item ui-sortable-handle" data-id="pingguo">苹果</li>
<li class="item ui-sortable-handle" data-id="boluo">菠萝</li>
<li style="" class="item ui-sortable-handle" data-id="mitao">蜜桃</li>
<li class="item ui-sortable-handle" data-id="sangguo">桑果</li>
<li class="item ui-sortable-handle" data-id="putao">葡萄</li>
</ul>
<div class="center-box">
<button class="add-one" title="添加选中项">></button>
<button class="add-all" title="添加全部">>></button>
<button class="remove-one" title="移除选中项"><</button>
<button class="remove-all" title="移除全部"><<</button>
</div>
<ul class="item-box right-box ui-sortable ui-droppable">
<!-- 右边框存放已选项 -->
<li class="item ui-sortable-handle" data-id="xiangjiao">香蕉</li>
<li class="item ui-sortable-handle" data-id="caomei">草莓</li>
<li class="item ui-sortable-handle" data-id="yali">鸭梨</li>
<li class="item ui-sortable-handle" data-id="yangmei">杨梅</li></ul>
</div>
<div class="list-footer">
<button class="selected-val" title="获取选择值，输出到控制台">GET</button>
</div>
</div>
<script src="images/jquery.js"></script>
<script src="images/jquery-ui.min.js"></script>
<script src="images/list-script.js"></script>
<script>
$(function () {
// 是否开启选项可拖动，选项可双击
$('#selectTitle').initList({
openDrag: true,
openDblClick: true
});
});
</script>
</body></html>
多项选择的列表框，左右选择，带排序功能
5星 · 超过95%的资源 需积分: 50 98 浏览量
2017-10-29
21:15:54
上传
评论
收藏 133KB RAR 举报 
列表选择插件.rar （5个子文件） 
列表选择插件 images 
jquery.js 268KB list-script.js 4KB list-style.css 2KB jquery-ui.min.js 232KB 列表选择并排序.htm 2KB资源评论
nate_lu2018-02-03可以用，问下楼主$.fn.initList里面的方法怎么调用，比如initItemEvent()，小白望解释
asdf6582018-06-27代码很好用，学习了
