Mikel
[转载]jquery easy widgets plugin 插件(拖动布局) – goody9807 – 博客园.
这个插件在功能上来说是比较强大的了，但用起来却比较简单，对想做拖动布局的来说简直是福音。它不但可做到拖动布局，还能保存拖动后的布局，也封装了和拖 动布局相关的一些操作，比如折叠，隐藏拖动块，编辑等。闲话少说，还是看看怎么用吧！
首先当然是引入相关的js文件：
JQuery.min.js jq框架
JQuery-ui.min.js jq的ui
jQuery.easywidgets.js 插件文件
接着写初始的布局代码：
程序代码<div id=”main”>
<div class=”widget-place column1″>
<div class=”widget”>
<div class=”widget-header”> <strong>可以拖动</strong> </div>
<div class=”widget-content”>可以拖动布局的内容</div>
</div>
<div class=”widget”>
<div class=”widget-header”> <strong>可以拖动</strong> </div>
<div class=”widget-content”> 可以拖动布局 可以拖动布局 可以拖动布局 可以拖动布局 可以拖动布局</div>
</div>
</div>
<div class=”widget-place column2″>
<div class=”widget”>
<div class=”widget-header c2_1″> <strong>可以拖动有样式</strong> </div>
<div class=”widget-content”> 可以拖动布局 可以拖动布局 可以拖动布局 可以拖动布局 可以拖动布局 可以拖动布局</div>
</div>
<div class=”widget”>
<div class=”widget-header”> <strong>可以拖动</strong> </div>
<div class=”widget-content”> 可以拖动布局 可以拖动布局 可以拖动布局 可以拖动布局 可以拖动布局</div>
</div>
</div>
<div class=”widget-place column3″>
<div class=”widget”>
<div class=”widget-header”> <strong>可以拖动</strong> </div>
<div class=”widget-content”> 可以拖动布局 可以拖动布局 可以拖动布局 可以拖动布局 可以拖动布局</div>
</div>
<div class=”widget”>
<div class=”widget-header”> <strong>可以拖动</strong> </div>
<div class=”widget-content”> 可以拖动布局 可以拖动布局 可以拖动布局 可以拖动布局</div>
</div>
</div>
<div style=”clear:both;”></div>
</div>
<div id=”bottom”>底部</div>
我 上面的代码是三列的布局，每列有两个拖动块。看看，是不是很有规律？？<div class=”widget-place”>…</div>就是一列，而<div class=”widget”>…</div>就是一个拖动块，<div id=”widget-header”></div>就是拖动手柄，就是鼠标按在这里可以拖动，结构就这么简单，至于列的class属 性值column1,column2,column3是为了让你区别每一列的，当然也是为了写css,这些你可以随便取，至于其他用来美化布局的样式你可 以自己根据需要添加，比如上面的我在拖动手柄上添加的c2_1。
要实现三列，少不了css
程序代码body{
margin:0px;
font-size:12px;
}
#top,#main,#bottom{
margin:0px auto;
width:960px;
border:1px solid #CC6666;
}
#top{
height:100px;
margin-bottom:5px;
}
#main{
padding:5px 0px 5px 0px;
}
#bottom{
height:50px;
margin-top:5px;
}
#main .widget-place{
float:left;
width:310px;
/*拖动块的高度是一定要的
不然当你把一列的所有可拖动
的块东拖到其他列的时候会有
问题，这个你可以根据具体情
况设置*/
height:auto;
min-height:200px;
/*height:400px;*/
}
#main .column1{
margin-left:4px;
}
#main .column2{
margin-left:5px;
margin-right:5px;
}
#main .widget{
border:1px solid #CC99CC;
margin-bottom:5px;
}
#main .widget-header{
line-height:25px;
}
.c2_1{
divne-height:30px;
background:#999966;
}
/*这个是拖动的时候用来占位的样式*/
.widget-placeholder {
border:1px dashed #FF99CC;
}
</style>
最后，就是用这个插件了：
程序代码$.fn.EasyWidgets();
});
呵呵！是不是不能拖动？？不用急，你只要给可拖动块的class属性增加一个值movable就得了，也就是把
<div class=”widget”>…</div>变为<div class=”widget movable”>…</div>。
好了，再看看效果。拖动演示
怎 么样，一个拖动效果就这样搞定了！现在看看怎么实现拖动的其他操作。其实也很简单，不需要任何js代码！你只要给可拖动块的class属性增加一个值 collapsable就可以实现折叠，增加一个值removable就可以实现隐藏折叠块，增加一个值editable就可以实现编辑。当然若可以编辑 你当然要给一个装编辑内容的容器。看看下面的修改后的代码：
程序代码<div class=”widget-header”> <strong>可以拖动</strong> </div>
<div class=”widget-editbox” style=”background:#CC6699″>
这里就是放编辑的内容,为了显眼，我加了背景
</div>
<div class=”widget-content”> 可以拖动布局 可以拖动布局 可以拖动布局 可以拖动布局 可以拖动布局</div>
</div
为了使拖动块的内容初始是折叠的，你还可以给可拖动块的class属性增加一个值collapse。
这些文字是因为的，能不能变成汉字呢？？当然能，作者已经考虑到这个问题了。只要给js增加几个参数就可以了：
程序代码$.fn.EasyWidgets({
i18n : {
editText : ‘编辑’,
closeText : ‘关闭’,
extendText : ‘展开’,
collapseText : ‘折叠’,
cancelEditText : ‘取消’
}
});
});
就说这些基本的了，还有太多的功能就靠自己去研究了，比如拖动时实现一些效果，把“编辑”，“关闭”用图片代替，点击“编辑”，“关闭”等回调一些函数等 等。
最后说说怎么保存拖动后的布局。
你 要把每一列增加一个id属性：第一列id=”widget-place-1″，第二列id=”widget-place-2″，一次类推，把每一个拖动块 也增加一个id属性：第一个拖动块id=”identifierwidget-1″,第二个拖动块id=”identifierwidget-2″,以此 类推，至于哪个是第一个拖动块，哪个是第二个拖动块，你可以随意自己取，没有什么顺序，最后就是设置一个参数就可以了：
程序代码$.fn.EasyWidgets({
//这个就可以保存布局了
behaviour : {
useCookies : true
},
i18n : {
editText : ‘编辑’,
closeText : ‘关闭’,
extendText : ‘展开’,
collapseText : ‘折叠’,
cancelEditText : ‘取消’
}
});
});
