Welcome, Old Sport!

可拖拽排序框架

by ilikecss ON 2012/06/12 17213

可拖拽排序框架

今天给大家制作了一款利用UI插件的可随意拖拽排序的框架布局,框架里可以是内容,文字,图片均可。UI插件包已压缩,删除了不必要的脚本。目前测试下来兼容大众浏览器,说明这款脚本包还是挺给力的。

Step1. 创建HTML

<ul id="demo">
    <li><img src="img/images01.jpg" alt="images01"
    width="200" height="300" />
    <span>1</span></li>
</ul>

Step2. 创建CSS

#demo {
	list-style: none;
}
#demo li {
	float: left;
	display: block;
	width: 200px;
	height: 320px;
	cursor: pointer;
	background:#FFF;
	margin: 0 5px 5px 0;
	padding:10px;
	-webkit-border-radius: 7px;
	-moz-border-radius: 7px;
	border-radius: 7px;
}
#demo li.active {
	background:#f75d88;
}
#demo li span {
	font-weight: bold;
}

Step3. 插入jQuery和脚本包

$(function() {
	$('#demo').sortable({
		
		start: function(event, ui) {
			ui.item.addClass('active');
		},
		stop: function(event, ui) {
			ui.item.removeClass('active').effect(
				'highlight', 
				{ color : '#000' }, 1000, function() {
				$.each($('#demo li'), function(index, event) {
					$(this).children('span').html(parseInt(index, 10) 1);
				});
			});
		}
		
	});
	$('#demo').disableSelection();
	
});
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.14.custom.min.js" type="text/javascript"></script>
20条评论
  1. #1

    金刚禅狮子吼说道:

    真好玩~ 可以给女朋友做一个简单的爱心拼图游戏~

  2. #2

    Duoqiu说道:

    :idea: 下载了。

  3. #3

    混乱羽翼说道:

    不错呀,这个JQuery的效果,说不定某天能用到,不过感觉不够平滑

  4. #4

    Beautyleg说道:

    不错,还可以记录下cookies来保存移动了的位置

  5. #5

    wmtimes说道:

    可以拿来作拼图游戏玩。

  6. #6

    海岸说道:

    想请教一下,如何记录下排列后的顺序信息?就比如说,我初始化一组照片给用户按他的喜好从高到低排序。那我想获取他排序后的信息,ajax到服务端后统计用户的喜好。但在ajax前,怎么获取它的顺序信息呢?

    • 你好,这款效果并没有你说的那样通过ajax发出请求,只是单纯的脚本通过函数运算得到返回值而已。 :smile:

      • 海岸说道:

        如果要自己写ajax呢?我可以自己写网络传输那部分。但是我想知道js怎么获取到它的顺序信息呢?

      • 我上面这段脚本就是,你看下后面span的部分。

  7. #7

    slj说道:

    这个我也要




TOP