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;
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;
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 : '取消'
    }
  });
});

保存布局演示
最后提供原始文件下载