jquery上移、下移、置顶、置底、添加、移除事件

jquery上移、下移、置顶、置底、添加、移除事件

引入jquery.js

1.css

ul {
			border: 1px solid #AAAAAA;
			height: 100px;
			overflow-y: scroll;
		}
		
		ul li {
			list-style: none;
		}
		
		a {
			text-decoration: none;
			color: #000000;
		}
		.active{
			color: red;
		}

2.html

<ul class="dropdown-menu showScroll" id="dom1">
			<li>
				<a href="javascript:void(0)">张三（交大一附院，神经内科）</a>
			</li>
			<li>
				<a href="javascript:void(0)">李四（交大一附院，消化内科）</a>
			</li>
			<li>
				<a href="javascript:void(0)">王五（西京医院，神经内科）</a>
			</li>
			<li>
				<a href="javascript:void(0)">诸葛亮（交大一附院，消化内科）</a>
			</li>
			<li>
				<a href="javascript:void(0)">钟馗（西京医院，神经内科）</a>
			</li>
			<li>
				<a href="javascript:void(0)">孙6（交大一附院，消化内科）</a>
			</li>
			<li>
				<a href="javascript:void(0)">子墨（西京医院，神经内科）</a>
			</li>
		</ul>
		<p>
			<button class="btn btn-success btn-small" id="addTable">
				添加
			</button>
		</p>
		<p>
			<button class="btn btn-small" id="removeList">
				移除
			</button>
		</p>
		<ul id="demo" class="dropdown-menu showScroll rightChild" role="menu" aria-labelledby="dropdownMenu">

3.js

$(document).ready(function() {
				var sttr = ""; //选中左边li的值
				var obj = ""; //左边选中的第几列
				$("#dom1").on('click', 'a', function() {
					obj = $(this.parentNode).index();
					sttr = $(this).text();
					$(this).addClass("active");
					$(this).parent().siblings().find("a").removeClass("active");
				});

				///添加
				var str = ""; //构造右边新的li
				$("#addTable").click(function() {
					if(sttr != "") {
						$("#dom1").find("li").eq([obj]).remove();
						str += (" <li>");
						str += ("                    <input name=\'docName\' type=\'checkbox\' value=\'\' /><span>" + sttr + "</span>");
						str += ("                    <a href=\'javascript:void(0)\' class=\'top\'>置顶</a>");
						str += ("                    <a href=\'javascript:void(0)\' class=\'up\'>上移</a>");
						str += ("                    <a href=\'javascript:void(0)\' class=\'down\'>下移</a>");
						str += ("                    <a href=\'javascript:void(0)\' class=\'bottom\'>置底</a>");
						str += ("                    <a href=\'javascript:void(0)\' class=\'remove\'>移除</a>");
						str += ("                </li>");
						str += ("");
						$("#demo").append(str);
						sttr = "";
						str = "";
					}
				});

				/多选移除
				var rLiText = ""; //右边li中span的text值（可多选）
				var rDLi = ""; //构造左边新的li
				$("#removeList").click(function() {
					var check = document.getElementsByName("docName");
					for(var i = 0; i < check.length; i++) {
						if(check[i].checked) {
							rLiText = $("#demo").find("li").eq([i]).find("span").text();
							rDLi += ("<li>");
							rDLi += ("<a href=\'javascript:void(0)\'>" + rLiText + "</a>");
							rDLi += ("</li>");
							$("#dom1").append(rDLi);
							rLiText = "";
							rDLi = "";
							$("#demo").find("li").eq([i]).remove();
							i--;
						}
					}
				});

			});
			var stttr = ""; //右边单个li中span的text值
			var rLi = ""; //构造左边新的li
			$("#demo").on('click', 'a', function() {
				var parent = $(this).parent();
				var parents = $(this).parents("#demo");
				var len = parents.children().length;
				if(($(this).is(".up") || $(this).is(".top")) && parent.index() == 0) {
					alert("已经置顶！");
					return false;
				} else if(($(this).is(".down") || $(this).is(".bottom")) && parent.index() == len - 1) {
					alert("已经置底！");
					return false;
				}
				switch(true) {
					//上移
					case $(this).is(".up"):
						var prev = parent.prev();
						parent.insertBefore(prev);
						break;
						//下移
					case $(this).is(".down"):
						var next = parent.next();
						parent.insertAfter(next);
						break;
						//置顶
					case $(this).is(".top"):
						parents.prepend(parent);
						break;
						//置底
					case $(this).is(".bottom"):
						parents.append(parent);
						break;
						//移除
					case $(this).is(".remove"):
						stttr = $(this.parentNode).find("span").text();
						rLi += ("<li>");
						rLi += ("<a href=\'javascript:void(0)\'>" + stttr + "</a>");
						rLi += ("</li>");
						$("#dom1").append(rLi);
						stttr = "";
						rLi = "";
						$(this.parentNode).remove();
						break;
				}

			});

效果：

1.

2.选中某一列

3.点击添加按钮

4.移除支持多选