这一段时间在学习用jquery UI做东西,从demo中找到了Sortable这个组件再结合jquery.layout.js做首页的布局,官网地址如下http://jqueryui.com/demos/sortable/#portlets.
但是在项目中仅仅可拖动还是不行的,有时候用户改变了每个模块的位置还希望能保持下来。这里利用cookies存储,也可以试试用数据库存储。
Sortable组件的代码如下,为了省去再去官网看的时间,再复制粘贴一遍:
<style>
.column
{
width: 170px;
float: left;
padding-bottom: 100px;
}
.portlet
{
margin: 0 1em 1em 0;
}
.portlet-header
{
margin: 0.3em;
padding-bottom: 4px;
padding-left: 0.2em;
}
.portlet-header .ui-icon
{
float: right;
}
.portlet-content
{
padding: 0 .ui-sortable-placeholder *
{
visibility: hidden;
}
</style>
<script> $(function () { $(".column").sortable({ connectWith: ".column" }); $(".portlet").addClass("ui-widget ui-widget-content ui-helper-clearfix ui-corner-all").find(".portlet-header").addClass("ui-widget-header ui-corner-all").prepend("<span class='ui-icon ui-icon-minusthick'></span>").end().find(".portlet-content"); $(".portlet-header .ui-icon").click(function () { $(this).toggleClass("ui-icon-minusthick").toggleClass("ui-icon-plusthick"); $(this).parents(".portlet:first").find(".portlet-content").toggle(); }); $(".column").disableSelection(); });</script>
<div class="demo">
<div class="column">
<div class="portlet">
<div class="portlet-header">
Feeds</div>
<div class="portlet-content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet">
<div class="portlet-header">
News</div>
<div class="portlet-content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">
Shopping</div>
<div class="portlet-content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
<div class="column">
<div class="portlet">
<div class="portlet-header">
Links</div>
<div class="portlet-content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
<div class="portlet">
<div class="portlet-header">
Images</div>
<div class="portlet-content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit</div>
</div>
</div>
</div>
<!-- End demo -->
<div class="demo-description">
<p>
Enable portlets (styled divs) as sortables and use the <code>connectWith</code>option
to allow sorting between columns.</p>
</div>
<!-- End demo-description -->
.4em;
}
.ui-sortable-placeholder
{
border: 1px dotted black;
visibility: visible !important;
height: 50px !important;
}
记得要给每一个class为column或portlet的div添加一个id属性
Sortable有个method叫Sortable,可以将每一列的portlet的id按照顺序获取返回成一个数组,当然你也可以使用DOM获取。
存储位置的js方法代码如下:
portlets = {};
//存储拖动结果
function sortableItems() {
//获得列
var colums = $(".column");
for (var i = 0; i < colums.length; i++) {
var colum = colums.eq(i);
//获得列中可拖动的成员
var cItem = colum.sortable("toArray");
portlets[colum.attr("id")] = {};
for (var t = 0; t < cItem.length; t++) {
//获得可拖动模块的id
var portletId = cItem[t];
//获得可拖动模块所在的列id
var columId = $("#" + portletId).parent().attr("id");
portlets[columId]["portlet" + t] = portletId;
}
}
//将拖动结果存储在cooke里
$.cookies.set("portlets", portlets);
初始化的时候调用代码如下:
var portletcookie = $.cookies.get("portlets");
if (portletcookie) {
for (column in portletcookie) {
var col = portletcookie[column];
for (portlet in col) {
var portletId = col[portlet];
$("#" + portletId).remove().appendTo($("#" + column));
}
}
}
思路总结:其实就是按照顺序获得每个column的id和它子portlet的id,存在cooke里是构造了一个json存放,格式为{"columnOne":{"portlet0":"commInfo","portlet1":"favorite","portlet2":"contacts"}然后页面初始化的时候按照json存放的数据,把每个protle移动到对应的column下面