JQuery sortable 的保存

Home > IT technique > JQuery sortable 的保存

March 29th, 2010 Arale Leave a comment Go to comments

最近需要做一种类似Google UI的那种用户自定义的拖拽效果. 经google, Jquery的 sortable可以实现. 现总结如下.
首先是使用了Jquery中的几个库文件.

<script language="javascript" src="js/jquery-1.4.2.js"></script>
<script language="javascript" src="js/jquery.ui.core.js"></script>
<script language="javascript" src="js/jquery.ui.widget.js"></script>
<script language="javascript" src="js/jquery.ui.mouse.js"></script>
<script language="javascript" src="js/jquery.ui.sortable.js"></script>

接下来是定义HTML标记的样式~

<style type="text/css">
	#sortable1, #sortable2,#sortable3 { list-style-type: none; margin: 0; padding: 0; float: left; margin-right: 10px; }
	#sortable1 li, #sortable2 li,#sortable3 li { margin: 0 5px 5px 5px; padding: 5px; font-size: 1.2em; width: 120px; }
</style>

好了, 接下来的就是默认的HTML页面了, 在Jquery的Sortable示例中, 给出了2列的布局, 我这里用的3列.

<div class="demo">
 
<ul id="sortable1" class="connectedSortable">
	<li id="1a" class="ui-state-default">Item 1</li>
	<li id="1b" class="ui-state-default">Item 2</li>
	<li id="1c" class="ui-state-default">Item 3</li>
	<li id="1d" class="ui-state-default">Item 4</li>
	<li id= "1e" class="ui-state-default">Item 5</li>
</ul>
 
<ul id="sortable2" class="connectedSortable">
	<li id="2a" class="ui-state-default">Item 1</li>
	<li id="2b" class="ui-state-default">Item 2</li>
	<li id="2c" class="ui-state-default">Item 3</li>
	<li id="2d" class="ui-state-default">Item 4</li>
	<li id= "2e" class="ui-state-default">Item 5</li>
</ul>
 
 <ul id="sortable3" class="connectedSortable">
	<li id="3a" class="ui-state-default">Item 1</li>
	<li id="3b" class="ui-state-default">Item 2</li>
	<li id="3c" class="ui-state-default">Item 3</li>
	<li id="3d" class="ui-state-default">Item 4</li>
	<li id= "3e" class="ui-state-default">Item 5</li>
</ul>
</div>

在起始的HTML中需要说明的一点是, jquery中, 允许你对父容器中子容器进行sort, 子容器必需要有ID, 否则的话, 在后面的.sort方法中, 你会取不到值. 从而影响到后面的操作.

这里是关键的部份, 声明哪些列是允许拖拽的, 并且定义可以拖拽元素的父容器.

$(function() {
		$("#sortable1, #sortable2,#sortable3,#div1").sortable({
			connectWith: '.connectedSortable',
			stop:saveLayout  //调用savelayot方法. 将内容保存
		}).disableSelection();
	});
function saveLayout() {
    //该方法, 可以取出该容器内的元素的顺序. 元素取出来了, 至于怎么保存就是a piece of cake了~
      var col1 = $("#sortable1").sortable("toArray");
      alert(col1)
       var col2 = $("#sortable2").sortable("toArray");
       alert(col2)
       var col3 = $("#sortable3").sortable("toArray");
	alert(col3)
 }