jquery easy widgets plugin 插件(拖动布局)

这个插件在功能上来说是比较强大的了，但用起来却比较简单，对想做拖动布局的来说简直是福音。它不但可做到拖动布局，还能保存拖动后的布局，也封装了和拖动布局相关的一些操作，比如折叠，隐藏拖动块，编辑等。闲话少说，还是看看怎么用吧！

首先当然是引入相关的js文件：

jquery.min.js jq框架

jquery-ui.min.js jq的ui

jquery.easywidgets.js 插件文件

接着写初始的布局代码：


程序代码

<div id="top">头部</div>

<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


程序代码

<style type="text/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>

最后，就是用这个插件了：


程序代码

$(document).ready(function(){

$.fn.EasyWidgets();

});

看看效果

呵呵！是不是不能拖动？？不用急，你只要给可拖动块的class属性增加一个值movable就得了，也就是把

<div class="widget">...</div>变为<div class="widget movable">...</div>。

好了，再看看效果。拖动演示

怎 么样，一个拖动效果就这样搞定了！现在看看怎么实现拖动的其他操作。其实也很简单，不需要任何js代码！你只要给可拖动块的class属性增加一个值 collapsable就可以实现折叠，增加一个值removable就可以实现隐藏折叠块，增加一个值editable就可以实现编辑。当然若可以编辑 你当然要给一个装编辑内容的容器。看看下面的修改后的代码：


程序代码

<div class="widget movable 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增加几个参数就可以了：


程序代码

$(document).ready(function(){

$.fn.EasyWidgets({

i18n : {

editText : '编辑',

closeText : '关闭',

extendText : '展开',

collapseText : '折叠',

cancelEditText : '取消'

}

});

});

演示效果

就说这些基本的了，还有太多的功能就靠自己去研究了，比如拖动时实现一些效果，把“编辑”，“关闭”用图片代替，点击“编辑”，“关闭”等回调一些函数等等。

最后说说怎么保存拖动后的布局。

你 要把每一列增加一个id属性：第一列id="widget-place-1"，第二列id="widget-place-2"，一次类推，把每一个拖动块 也增加一个id属性：第一个拖动块id="identifierwidget-1",第二个拖动块id="identifierwidget-2",以此 类推，至于哪个是第一个拖动块，哪个是第二个拖动块，你可以随意自己取，没有什么顺序，最后就是设置一个参数就可以了：


程序代码

$(document).ready(function(){

$.fn.EasyWidgets({

//这个就可以保存布局了

behaviour : {

useCookies : true

},

i18n : {

editText : '编辑',

closeText : '关闭',

extendText : '展开',

collapseText : '折叠',

cancelEditText : '取消'

}

});

});

保存布局演示

最后提供原始文件下载