首页 > 代码库 > jQuery制作div板块拖动层排序

jQuery制作div板块拖动层排序

2024-07-20 19:43:14   217人阅读

  html结构：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />    <style type="text/css">	body { font-family:Arial; font-size:12pt; padding:20px; width:820px; margin:20px auto; border:solid 1px black; }	h1 { font-size:16pt; }	h2 { font-size:13pt; }	ul { margin:0px; padding:0px; margin-left:20px; }	#list1, #list2 { width:350px; list-style-type:none; margin:0px; }	#list1 li, #list2 li { float:left; padding:5px; width:100px; height:100px; }	#list1 div, #list2 div { width:90px; height:50px; border:solid 1px black; background-color:#E0E0E0; text-align:center; padding-top:40px; }	#list2 { float:right; }	.placeHolder div { background-color:white !important; border:dashed 1px gray !important; }
   </style>   <title>jQuery制作div板块层拖动排序功能</title></head><body>	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>	<script type="text/javascript" src="http://www.mamicode.com/jquery.dragsort-0.5.1.min.js"></script>	<h1>jQuery List DragSort?</h1>	<br/>	<script type="text/javascript">		$("ul:first").dragsort();	</script>	<h2>2D list with drag and drop between lists:</h2>	<ul id="list2">		<li><div>10</div></li>		<li><div>11</div></li>		<li><div>12</div></li>		<li><div>13</div></li>		<li><div>14</div></li>		<li><div>15</div></li>		<li><div>16</div></li>		<li><div>17</div></li>		<li><div>18</div></li>	</ul>	<ul id="list1">		<li><div>1</div></li>		<li><div>2</div></li>		<li><div>3</div></li>		<li><div>4</div></li>		<li><div>5</div></li>		<li><div>6</div></li>		<li><div>7</div></li>		<li><div>8</div></li>		<li><div>9</div></li>	</ul>	<!-- save sort order here which can be retrieved on server on postback -->	<input name="list1SortOrder" type="hidden" />	<script type="text/javascript">		$("#list1, #list2").dragsort({ dragSelector: "div", dragBetween: true, dragEnd: saveOrder, placeHolderTemplate: "<li class=‘placeHolder‘><div></div></li>" });				function saveOrder() {			var data = http://www.mamicode.com/$("#list1 li").map(function() { return $(this).children().html(); }).get();			$("input[name=list1SortOrder]").val(data.join("|"));		};	</script></body></html>

下载地址: Demo

 

jQuery制作div板块拖动层排序


联系
我们