baoxu
/
Scrum


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201
							<!DOCTYPE html>
<html lang = "en">
<head>
	<meta charset = "UTF-8">
	<title>TEMP</title>
	<link rel = "stylesheet" href = "./css/style.css">
	<link rel = "stylesheet" href = "./css/bootstrap.min.css">
	<!--需要的JS文件-->
	<script src = "./js/jquery-1.12.1.min.js"></script>
	<script src = "./js/jquery-ui.js"></script>
	<script src = "./js/jquery.ui.touch-punch.min.js"></script>
	<script src = "./js/bootstrap.min.js"></script>
	<script src = "./js/global.js"></script>
	<script src = "./js/function.js"></script>
	<script>
		$(function () {
			$("ul").sortable({
				revert: true,                       //是否使用一个流畅的动画还原到它的新位置
				connectWith: ".connectedSortable",  //关联在一起的所有可排序对象
				placeholder: "sortable-placeholder",//在新位置占位的元素
				containment: "#task",               //被拖动元素可移动的范围
				cursor: "move",                     //拖动过程中鼠标样式
				items: "> li",                      //可排序的父级元素下哪些子元素可以被排序
				opacity: 0.8,                       //被拖动的Helper在移动过程中的透明度
				handle: ".task-name, .task-head"    //可以执行拖动的目标元素
			});

			$('[data-toggle="tooltip"]').tooltip()
		});
	</script>
</head>

<body>

<!--页头导航区域-->
<div id = "header">
	<div class = "container">
		<div id = "logo">SCRUM</div>
		<nav>
			<a class = "nav-item active">Task</a> <a class = "nav-item">Project</a>
			<a class = "nav-item">Member</a> <a class = "nav-item">About</a>
		</nav>
	</div>
</div>

<!--任务表格区域-->
<div id = "task" class = "container">
	<table>
		<!--任务表格的表头区域-->
		<tr class = "th-task">
			<th class = "th-member">MEMBER</th>
			<th class = "th-todo">TODO</th>
			<th class = "th-doing">DOING</th>
			<th class = "th-done">DONE</th>
		</tr>
		<!--任务表格的的任务列表区域-->
		<tr class = "tb-task">
			<td>保需</td>
			<td>
				<ul class = "connectedSortable task-todo">
					<li>
						<div class = "task-head"></div>
						<div class = "task-name">测试一下看看</div>
						<div class = "task-more" data-toggle = "tooltip" data-placement = "right" title = "Tooltip on right">
							03-26
						</div>
					</li>
					<li>
						<div class = "task-head"></div>
						<div class = "task-name">测试一下看看</div>
						<div class = "task-more"></div>
					</li>
					<li>
						<div class = "task-head"></div>
						<div class = "task-name">测试一下看看</div>
						<div class = "task-more"></div>
					</li>
					<li>
						<div class = "task-head"></div>
						<div class = "task-name">测试一下看看</div>
						<div class = "task-more"></div>
					</li>
				</ul>
			</td>
			<td>
				<ul class = "connectedSortable task-doing">
					<li>
						<div class = "task-head"></div>
						<div class = "task-name">测试一下看看</div>
						<div class = "task-more"></div>
					</li>
					<li>
						<div class = "task-head"></div>
						<div class = "task-name">测试一下看看</div>
						<div class = "task-more"></div>
					</li>
					<li>
						<div class = "task-head"></div>
						<div class = "task-name">测试一下看看</div>
						<div class = "task-more"></div>
					</li>
				</ul>
			</td>
			<td>
				<ul class = "connectedSortable task-done"></ul>
			</td>
		</tr>
		<tr class = "tb-task">
			<td>保需</td>
			<td>
				<ul class = "connectedSortable task-todo">
					<li>
						<div class = "task-head"></div>
						<div class = "task-name">测试一下看看测试一下看看测试一下看看测试一下看看</div>
						<div class = "task-more" data-toggle = "tooltip" data-placement = "right" title = "Tooltip on right">
							03-26
						</div>
					</li>
					<li>
						<div class = "task-head"></div>
						<div class = "task-name">测试一下看看</div>
						<div class = "task-more"></div>
					</li>
					<li>
						<div class = "task-head"></div>
						<div class = "task-name">测试一下看看</div>
						<div class = "task-more"></div>
					</li>
					<li>
						<div class = "task-head"></div>
						<div class = "task-name">测试一下看看</div>
						<div class = "task-more"></div>
					</li>
				</ul>
			</td>
			<td>
				<ul class = "connectedSortable task-doing">
					<li>
						<div class = "task-head"></div>
						<div class = "task-name">测试一下看看</div>
						<div class = "task-more"></div>
					</li>
					<li>
						<div class = "task-head"></div>
						<div class = "task-name">测试一下看看</div>
						<div class = "task-more"></div>
					</li>
					<li>
						<div class = "task-head"></div>
						<div class = "task-name">测试一下看看</div>
						<div class = "task-more"></div>
					</li>
				</ul>
			</td>
			<td>
				<ul class = "connectedSortable task-done"></ul>
			</td>
		</tr>
		<!--任务表的新增行，用于点击添加任务之后，新增独立一行-->
		<tr class = "add-task">
			<td>
				<div class = "dropdown">
					<button class = "btn btn-default dropdown-toggle" type = "button" id = "dropdownMenu" data-toggle = "dropdown" aria-haspopup = "true" aria-expanded = "false">
						添加成员 <span class = "caret"></span>
					</button>
					<ul class = "dropdown-menu" aria-labelledby = "dropdownMenu">
						<li><a href = "#">陈保需</a></li>
						<li><a href = "#">董菲</a></li>
						<li><a href = "#">王佳颖</a></li>
						<li><a href = "#">孔蓉</a></li>
						<li><a href = "#">董菲</a></li>
						<li><a href = "#">王佳颖</a></li>
						<li><a href = "#">孔蓉</a></li>
						<li><a href = "#">董菲</a></li>
						<li><a href = "#">王佳颖</a></li>
						<li><a href = "#">孔蓉</a></li>
					</ul>
				</div>
			</td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
		<!--任务表格最后一行，用于添加任务和人员的占位-->
		<tr class = "tf-task">
			<td><a></a></td>
			<td></td>
			<td></td>
			<td></td>
		</tr>
	</table>
</div>

<!--页面尾部区域-->
<footer id = "footer">
	<p>Scrum by <a href = "http://git.bxthing.com/Scrum.git/" target = "_blank">Baoxu</a> @ 2016
	</p>
</footer>

</body>
</html>