首页 - 互联网

ASP.NET MVC5+EF6+EasyUI 后台管理系统（80）

作者: 五速梦信息网
时间: 2026年04月04日 13:50

前言

这次我们来做一个有趣的事情，有朋友跟做了很远，找我要自由桌面的代码，这次我们将演示自由桌面的代码。

自由桌面：用户可以随意增删改桌面的布局、个数（只留自己需要看到的数据），这次纯属EasyUI前端

当然您抛弃EasyUI你同样也能为你的系统桌面定制有趣自由布局

结果预览

实现思路

本次实现主要用到EasyUI一个非常不常用的组件Draggable（拖拽）

虽然图显示简单，但是实际做起来非常的耗时，有兴趣的朋友在尾部下来看看拖拽和实现，下面是实现思路和功能：

拖拽之后DIV中保存了DIV的位置
部件筛选是以Css 的Display属性来控制的
部件复位是初始化全部部件
保存是保存整个范围内的Div内容来保存到数据库

实现代码

整个拖拽功能的代码如下（展开查看）

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;meta http-equiv=“Content-Type” content=“text/html; charset=utf-8”/&gt;


&lt;title&gt;&lt;/title&gt;<br/>
&lt;script src=&#34;jquery-easyui-1.5/jquery.min.js&#34;&gt;&lt;/script&gt;<br/>
&lt;script src=&#34;jquery-easyui-1.5/jquery.easyui.min.js&#34;&gt;&lt;/script&gt;<br/>
&lt;link href=&#34;jquery-easyui-1.5/themes/metro/easyui.css&#34; rel=&#34;stylesheet&#34; /&gt;<br/>
&lt;meta charset=&#34;utf-8&#34; /&gt;<br/>


&lt;/head&gt;

&lt;body&gt;


&lt;style&gt;


.alphac {


        filter: Alpha(Opacity=);<br/>
        -moz-opacity: 0.7;<br/>
        opacity: 0.7;<br/>
    }


.cc {


        position: relative;<br/>
        width: %;<br/>
        height: 200px;<br/>
    }


.groupSave {


        display: none;<br/>
    }


.cc .panel-tool {


        display: none;<br/>
    }


.checkBoxPart {


        width: 150px;<br/>
        height: 26px;<br/>
        line-height: 40px;<br/>
        padding-left: 20px;<br/>
    }


.checkBoxPart input, .checkBoxPart lable {


            vertical-align: middle;<br/>
            vertical-align: middle;<br/>
            margin: 0px;<br/>
            margin-right: 4px;<br/>
        }


#dd1, #dd2, #dd3, #dd4, #dd5, #dd6, #dd7, #dd8, #dd9 {


        overflow: hidden;<br/>
        position: absolute;<br/>
        border: 1px #e7eaec solid;<br/>
        border-radius: 4px;<br/>
    }


.ddcontent {


        min-height: 50px;<br/>
        padding: 5px;<br/>
    }<br/>
&lt;/style&gt;<br/>
&lt;script type=&#34;text/javascript&#34;&gt;<br/>
//修改，筛选，保存<br/>
$(function () {<br/>
    $(&#34;.groupSave&#34;).hide();<br/>
    var editFlag = false;<br/>
    $(&#34;.cc&#34;).height($(window).height() - );<br/>
    $(window).resize(function () { $(&#34;.cc&#34;).height($(window).height() - ); });<br/>
    $(&#39;#dd1,#dd2,#dd3,#dd4,#dd5,#dd6,#dd7,#dd8,#dd9&#39;).draggable({ edge:  }).resizable();<br/>
    //选中的将变成最顶层<br/>
    $(&#34;.cc div&#34;).mousedown(function () {<br/>
        $(&#34;.cc div&#34;).css(&#34;z-index&#34;, &#34;&#34;).removeClass(&#34;alphac&#34;);<br/>
        $(this).css(&#34;z-index&#34;, &#34;&#34;).addClass(&#34;alphac&#34;);<br/>
    }).mouseup(function () {<br/>
        $(&#34;.cc div&#34;).removeClass(&#34;alphac&#34;);<br/>
    });


$(“.cc div”).mousedown(function () {


        $(&#34;.cc div&#34;).css(&#34;z-index&#34;, &#34;&#34;).removeClass(&#34;alphac&#34;);<br/>
        $(this).css(&#34;z-index&#34;, &#34;&#34;).addClass(&#34;alphac&#34;);<br/>
    }).mouseup(function () {<br/>
        $(&#34;.cc div&#34;).removeClass(&#34;alphac&#34;);<br/>
    });<br/>
    $(&#39;#dd1,#dd2,#dd3,#dd4,#dd5,#dd6,#dd7,#dd8,#dd9&#39;).draggable(&#39;disable&#39;).resizable(&#39;disable&#39;);<br/>
    $(&#34;#mydialog input[type=&#39;checkbox&#39;]&#34;).each(function (i) {<br/>
        if ($(this).prop(&#34;checked&#34;)) {


}


    });<br/>
    //初始化筛选<br/>
    for (var i = ; i &lt; ; i++) {<br/>
        if ($(&#34;#dd&#34; + i).is(&#34;:hidden&#34;)) {<br/>
            $(&#34;#cdd&#34; + i).removeAttr(&#34;checked&#34;);<br/>
        }<br/>
        else {


$(“#cdd” + i).attr(“checked”, “true”);


        }<br/>
    }<br/>
    $(&#34;#Edit&#34;).click(function () {


$.messageBox5s(‘@Resource.Tip’, ‘您现在可以进行部件删减，以及部件大小的调整！’);


        $(&#39;#dd1,#dd2,#dd3,#dd4,#dd5,#dd6,#dd7,#dd8,#dd9&#39;).draggable(&#39;enable&#39;).resizable(&#39;enable&#39;).css(&#34;border&#34;, &#34;1px #ff6600 dashed&#34;);<br/>
        $(&#34;.panel-tool&#34;).show();<br/>
        $(&#34;.groupSave&#34;).show();<br/>
        $(&#34;.groupEdit&#34;).hide();<br/>
        editFlag = true;<br/>
    });<br/>
    //单项去除<br/>
    $(&#34;.cc .panel-tool-close&#34;).click(function () {<br/>
        $(this).parent().parent().parent().hide();


$.messageBox5s(‘@Resource.Tip’, ‘您可以［部件筛选］中让他重新显示！’);


    });<br/>
    $(&#34;#Save&#34;).click(function () {<br/>
        if (editFlag) {<br/>
            editFlag = false;<br/>
            //取出数据，保存html<br/>
            for (var i = ; i &lt; ; i++) {<br/>
                $(&#34;#content&#34; + i).html(&#34;&#34;);<br/>
            }<br/>
            $(&#39;#dd1,#dd2,#dd3,#dd4,#dd5,#dd6,#dd7,#dd8,#dd9&#39;).draggable(&#39;disable&#39;).resizable(&#39;disable&#39;).css(&#34;border&#34;, &#34;&#34;);<br/>
            $(&#34;.cc .panel-tool&#34;).hide();


//此处进行保存数据


            //////////////////////////////////////////////////////////////////////////////////////<br/>
            $(&#34;#JsSet&#34;).html(&#34;&#34;);<br/>
            alert(&#34;这里来保存到数据库获取内容的代码：$(&#39;.cc&#39;).html()&#34;);<br/>
            alert($(&#34;.cc&#34;).html())<br/>
            /////////////////////////////////////////////////////////////////////////////////////<br/>
            //重新加载数据，重新绑定<br/>
            $(&#34;.cc div&#34;).unbind().mousedown(function () {<br/>
                $(&#34;.cc div&#34;).css(&#34;z-index&#34;, &#34;&#34;).removeClass(&#34;alphac&#34;);<br/>
                $(this).css(&#34;z-index&#34;, &#34;&#34;).addClass(&#34;alphac&#34;);<br/>
            }).mouseup(function () {<br/>
                $(&#34;.cc div&#34;).removeClass(&#34;alphac&#34;);<br/>
            });<br/>
            LoadData();


\(.messageBox5s(&#39;@Resource.Tip&#39;, &#39;保存成功！&#39;);
\)(“.groupSave”).hide();


            $(&#34;.groupEdit&#34;).show();<br/>
        } else {


$.messageBox5s(‘@Resource.Tip’, ‘没有什么需要保存的！’);


        }<br/>
    });<br/>
    $(&#34;#Choice&#34;).click(function () {<br/>
        $(&#34;#modalwindow&#34;).window({ title: &#39;筛选&#39;, width: , height: , iconCls: &#39;fa fa-filter&#39;, resizable: false }).window(&#39;open&#39;);<br/>
    });<br/>
    $(&#34;#ChoiceSave&#34;).click(function () {<br/>
        $(&#34;#modalwindow&#34;).window(&#34;close&#34;);


});


    $(&#34;.checkBoxPart input&#34;).click(function () {<br/>
        if ($(this).prop(&#34;checked&#34;)) {<br/>
            $(&#34;#&#34; + $(this).val()).show();<br/>
        }<br/>
        else {<br/>
            $(&#34;#&#34; + $(this).val()).hide();<br/>
        }<br/>
    });<br/>
    $(&#34;#Reset&#34;).click(function () {<br/>
        $.messager.confirm(&#39;复位提醒&#39;, &#39;您确定要重置部件的位置和个数吗?&#39;, function (r) {<br/>
            if (r) {<br/>
                alert(&#34;这里初始化原始的DIV&#34;);<br/>
            }<br/>
        });<br/>
    });<br/>
    LoadData();<br/>
});<br/>
//加载<br/>
function LoadData() {<br/>
    //初始化筛选<br/>
    for (var i = ; i &lt; ; i++) {<br/>
        $(&#34;#content&#34; + i).html(&#34;&lt;div class=\&#34;panel-loading\&#34;&gt;Loading...&lt;/div&gt;&#34;);<br/>
    }<br/>
    //如果部件，没有被去掉，那么就加载数据<br/>
    if (!$(&#34;#dd1&#34;).is(&#34;:hidden&#34;)) { Load_1(); }<br/>
    if (!$(&#34;#dd2&#34;).is(&#34;:hidden&#34;)) { Load_2(); }<br/>
    if (!$(&#34;#dd3&#34;).is(&#34;:hidden&#34;)) { Load_3(); }<br/>
    if (!$(&#34;#dd4&#34;).is(&#34;:hidden&#34;)) { Load_4(); }<br/>
    if (!$(&#34;#dd5&#34;).is(&#34;:hidden&#34;)) { Load_5(); }<br/>
    if (!$(&#34;#dd6&#34;).is(&#34;:hidden&#34;)) { Load_6(); }<br/>
    if (!$(&#34;#dd7&#34;).is(&#34;:hidden&#34;)) { Load_7(); }<br/>
    if (!$(&#34;#dd8&#34;).is(&#34;:hidden&#34;)) { Load_8(); }<br/>
    if (!$(&#34;#dd9&#34;).is(&#34;:hidden&#34;)) { Load_9(); }<br/>
}<br/>
//动态设置宽度<br/>
function promptValue(id) {<br/>
    $.messager.prompt(&#39;设置部件宽度&#39;, &#39;请输入宽度，格式：&lt;font color=&#34;red&#34;&gt;50%&lt;/font&gt;或&lt;font color=&#34;red&#34;&gt;500px&lt;/font&gt;&#39;, function (r) {<br/>
        if (r) {<br/>
            $(&#34;#&#34; + id).width(r);<br/>
        }<br/>
    });<br/>
}


function Load_1() { $(“#content1”).html(“我是框里的内容（1）”); }


function Load_2() { $(&#34;#content1&#34;).html(&#34;我是框里的内容（2）&#34;); }<br/>
function Load_3() { $(&#34;#content1&#34;).html(&#34;我是框里的内容（3）&#34;); }<br/>
function Load_4() { $(&#34;#content1&#34;).html(&#34;我是框里的内容（4）&#34;); }<br/>
function Load_5() { $(&#34;#content1&#34;).html(&#34;我是框里的内容（5）&#34;); }<br/>
function Load_6() { $(&#34;#content1&#34;).html(&#34;我是框里的内容（6）&#34;); }<br/>
function Load_7() { $(&#34;#content1&#34;).html(&#34;我是框里的内容（7）&#34;); }<br/>
function Load_8() { $(&#34;#content1&#34;).html(&#34;我是框里的内容（8）&#34;); }<br/>
function Load_9() { $(&#34;#content1&#34;).html(&#34;我是框里的内容（9）&#34;); }


function ShowInfo(name, url) {


    window.parent.addTab(name, &#34;/MIS/InfoCenter/Show?id=&#34; + url);<br/>
}<br/>
function SetWebpartLayout()<br/>
{<br/>
    var _windowWidth = ;<br/>
    var _windowHeight = ;<br/>
    $(&#34;#dd1,#dd2,#dd3,#dd4,#dd5,#dd6,#dd7,#dd8,#dd9&#34;).width(_windowWidth /  - ).height(_windowHeight /  - );<br/>
    var ddw = $(&#34;#dd1&#34;).width();<br/>
    var ddh = $(&#34;#dd1&#34;).height()<br/>
    $(&#34;#dd1,#dd4,#dd7&#34;).css(&#34;left&#34;, );<br/>
    $(&#34;#dd2,#dd5,#dd8&#34;).css(&#34;left&#34;, ddw + );<br/>
    $(&#34;#dd3,#dd6,#dd9&#34;).css(&#34;left&#34;, ddw *  + );<br/>
    $(&#34;#dd1,#dd2,#dd3&#34;).css(&#34;top&#34;, );<br/>
    $(&#34;#dd4,#dd5,#dd6&#34;).css(&#34;top&#34;, ddh+);<br/>
    $(&#34;#dd7,#dd8,#dd9&#34;).css(&#34;top&#34;, ddh *  + );<br/>
    $(&#34;.ddcontent&#34;).height(ddh-)<br/>
}<br/>
$.extend({<br/>
    messageBox5s: function (title, msg) {<br/>
        $.messager.show({<br/>
            title: &#39;&lt;span class=&#34;fa fa-info&#34;&gt;&amp;nbsp;&amp;nbsp;&#39; + title + &#39;&lt;/span&gt;&#39;, msg: msg, timeout: , showType: &#39;slide&#39;, style: {<br/>
                left: &#39;&#39;,<br/>
                right: ,<br/>
                top: &#39;&#39;,<br/>
                bottom: ,<br/>
                width: ,


}


        });<br/>
    }<br/>
});<br/>
$.extend({<br/>
    messageBox10s: function (title, msg) {<br/>
        $.messager.show({<br/>
            title: &#39;&lt;span class=&#34;fa fa-info&#34;&gt;&amp;nbsp;&amp;nbsp;&#39; + title + &#39;&lt;/span&gt;&#39;, msg: msg, height: &#39;auto&#39;, width: &#39;auto&#39;, timeout: , showType: &#39;slide&#39;, style: {<br/>
                left: &#39;&#39;,<br/>
                right: ,<br/>
                top: &#39;&#39;,<br/>
                bottom: -document.body.scrollTop - document.documentElement.scrollTop +<br/>
            }<br/>
        });<br/>
    }<br/>
});<br/>
$.extend({<br/>
    show_alert: function (strTitle, strMsg) {<br/>
        $.messager.alert(strTitle, strMsg);<br/>
    }<br/>
});


&lt;/script&gt;


&lt;div id=&#34;modalwindow&#34; class=&#34;easyui-window&#34; style=&#34;width:250px; height:320px;&#34; data-options=&#34;modal:true,closed:true,minimizable:false,shadow:false&#34;&gt;<br/>
    &lt;div class=&#34;mvctool bgb&#34;&gt;<br/>
        &lt;a id=&#34;ChoiceSave&#34; style=&#34;float: left;&#34; class=&#34;l-btn l-btn-plain&#34;&gt;&lt;span class=&#34;l-btn-left&#34;&gt;&lt;span class=&#34;l-btn-text fa fa-save&#34; style=&#34;font-size:14px&#34;&gt;&lt;/span&gt;&lt;span style=&#34;font-size:12px&#34;&gt;完成&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;div class=&#34;datagrid-btn-separator&#34;&gt;&lt;/div&gt;<br/>
    &lt;/div&gt;<br/>
    &lt;div class=&#34;checkBoxPart&#34;&gt;<br/>
        &lt;input id=&#34;cdd1&#34; type=&#34;checkbox&#34; value=&#34;dd1&#34; /&gt;&lt;lable&gt;待办事项&lt;/lable&gt;<br/>
    &lt;/div&gt;<br/>
    &lt;div class=&#34;checkBoxPart&#34;&gt;<br/>
        &lt;input id=&#34;cdd2&#34; type=&#34;checkbox&#34; value=&#34;dd2&#34; /&gt;站内信箱<br/>
    &lt;/div&gt;<br/>
    &lt;div class=&#34;checkBoxPart&#34;&gt;<br/>
        &lt;input id=&#34;cdd3&#34; type=&#34;checkbox&#34; value=&#34;dd3&#34; /&gt;最新信息<br/>
    &lt;/div&gt;<br/>
    &lt;div class=&#34;checkBoxPart&#34;&gt;<br/>
        &lt;input id=&#34;cdd4&#34; type=&#34;checkbox&#34; value=&#34;dd4&#34; /&gt;我的申请<br/>
    &lt;/div&gt;<br/>
    &lt;div class=&#34;checkBoxPart&#34;&gt;<br/>
        &lt;input id=&#34;cdd5&#34; type=&#34;checkbox&#34; value=&#34;dd5&#34; /&gt;我的批准<br/>
    &lt;/div&gt;<br/>
    &lt;div class=&#34;checkBoxPart&#34;&gt;<br/>
        &lt;input id=&#34;cdd6&#34; type=&#34;checkbox&#34; value=&#34;dd6&#34; /&gt;我的项目<br/>
    &lt;/div&gt;<br/>
    &lt;div class=&#34;checkBoxPart&#34;&gt;<br/>
        &lt;input id=&#34;cdd7&#34; type=&#34;checkbox&#34; value=&#34;dd7&#34; /&gt;会议邀请<br/>
    &lt;/div&gt;<br/>
    &lt;div class=&#34;checkBoxPart&#34;&gt;<br/>
        &lt;input id=&#34;cdd8&#34; type=&#34;checkbox&#34; value=&#34;dd8&#34; /&gt;共享中心<br/>
    &lt;/div&gt;<br/>
    &lt;div class=&#34;checkBoxPart&#34;&gt;<br/>
        &lt;input id=&#34;cdd9&#34; type=&#34;checkbox&#34; value=&#34;dd9&#34; /&gt;备忘记事<br/>
    &lt;/div&gt;<br/>
&lt;/div&gt;<br/>
&lt;div class=&#34;mvctool&#34; style=&#34;height:30px;&#34;&gt;<br/>
    &lt;div class=&#34;groupEdit&#34;&gt;<br/>
        &lt;a id=&#34;Edit&#34; style=&#34;float: left;&#34; class=&#34;l-btn l-btn-plain&#34;&gt;&lt;span class=&#34;l-btn-left&#34;&gt;&lt;span class=&#34;l-btn-text fa fa-pencil&#34; style=&#34;font-size:14px&#34;&gt;&lt;/span&gt;&lt;span style=&#34;font-size:12px&#34;&gt;编辑部件&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;<br/>
    &lt;/div&gt;<br/>
    &lt;div class=&#34;groupSave&#34; style=&#34;display: block;&#34;&gt;<br/>
        &lt;a id=&#34;Save&#34; style=&#34;float: left;&#34; class=&#34;l-btn l-btn-plain&#34;&gt;&lt;span class=&#34;l-btn-left&#34;&gt;&lt;span class=&#34;l-btn-text fa fa-save&#34; style=&#34;font-size:14px&#34;&gt;&lt;/span&gt;&lt;span style=&#34;font-size:12px&#34;&gt;完成&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;div class=&#34;datagrid-btn-separator&#34;&gt;&lt;/div&gt;<br/>
        &lt;a id=&#34;Choice&#34; style=&#34;float: left;&#34; class=&#34;l-btn l-btn-plain&#34;&gt;&lt;span class=&#34;l-btn-left&#34;&gt;&lt;span class=&#34;l-btn-text fa fa-filter&#34; style=&#34;font-size:14px&#34;&gt;&lt;/span&gt;&lt;span style=&#34;font-size:12px&#34;&gt;部件筛选&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;&lt;div class=&#34;datagrid-btn-separator&#34;&gt;&lt;/div&gt;<br/>
        &lt;a id=&#34;Reset&#34; style=&#34;float: left;&#34; class=&#34;l-btn l-btn-plain&#34;&gt;&lt;span class=&#34;l-btn-left&#34;&gt;&lt;span class=&#34;l-btn-text fa fa-refresh&#34; style=&#34;font-size:14px&#34;&gt;&lt;/span&gt;&lt;span style=&#34;font-size:12px&#34;&gt;部件复位&lt;/span&gt;&lt;/span&gt;&lt;/a&gt;<br/>
    &lt;/div&gt;<br/>
&lt;/div&gt;<br/>
&lt;div class=&#34;cc&#34;&gt;


&lt;div id=“dd1” class=“easyui-draggable panel” data-options=“handle:‘#title1’”&gt;


        &lt;div id=&#34;title1&#34; class=&#34;panel-header&#34; style=&#34;border: 0&#34;&gt;<br/>
            &lt;div class=&#34;panel-title&#34; style=&#34;&#34;&gt;<br/>
                待办事项<br/>
            &lt;/div&gt;<br/>
            &lt;div class=&#34;panel-tool&#34;&gt;<br/>
                &lt;a href=&#34;javascript:promptValue(&#39;dd1&#39;)&#34; class=&#34;panel-tool-max&#34;&gt;&lt;/a&gt;&lt;a href=&#34;javascript:void(0)&#34;<br/>
                                                                                      class=&#34;panel-tool-close&#34;&gt;&lt;/a&gt;<br/>
            &lt;/div&gt;<br/>
        &lt;/div&gt;<br/>
        &lt;div id=&#34;content1&#34; class=&#34;panel-body ddcontent&#34; style=&#34;border: 0&#34;&gt;<br/>
            &lt;div class=&#34;panel-loading&#34;&gt;<br/>
                Loading...<br/>
            &lt;/div&gt;<br/>
        &lt;/div&gt;<br/>
    &lt;/div&gt;<br/>
    &lt;div id=&#34;dd2&#34; class=&#34;easyui-draggable&#34; data-options=&#34;handle:&#39;#title2&#39;&#34;&gt;<br/>
        &lt;div id=&#34;title2&#34; class=&#34;panel-header&#34; style=&#34;border: 0&#34;&gt;<br/>
            &lt;div class=&#34;panel-title&#34; style=&#34;&#34;&gt;<br/>
                站内信箱<br/>
            &lt;/div&gt;<br/>
            &lt;div class=&#34;panel-tool&#34;&gt;<br/>
                &lt;a href=&#34;javascript:promptValue(&#39;dd2&#39;)&#34; class=&#34;panel-tool-max&#34;&gt;&lt;/a&gt;&lt;a href=&#34;javascript:void(0)&#34;<br/>
                                                                                      class=&#34;panel-tool-close&#34;&gt;&lt;/a&gt;<br/>
            &lt;/div&gt;<br/>
        &lt;/div&gt;<br/>
        &lt;div id=&#34;content2&#34; class=&#34;panel-body ddcontent&#34; style=&#34;border: 0&#34;&gt;<br/>
            &lt;div class=&#34;panel-loading&#34;&gt;<br/>
                Loading...<br/>
            &lt;/div&gt;<br/>
        &lt;/div&gt;<br/>
    &lt;/div&gt;<br/>
    &lt;div id=&#34;dd3&#34; class=&#34;easyui-draggable&#34; data-options=&#34;handle:&#39;#title3&#39;&#34;&gt;<br/>
        &lt;div id=&#34;title3&#34; class=&#34;panel-header&#34; style=&#34;border: 0&#34;&gt;<br/>
            &lt;div class=&#34;panel-title&#34; style=&#34;&#34;&gt;<br/>
                最新信息<br/>
            &lt;/div&gt;<br/>
            &lt;div class=&#34;panel-tool&#34;&gt;<br/>
                &lt;a href=&#34;javascript:promptValue(&#39;dd3&#39;)&#34; class=&#34;panel-tool-max&#34;&gt;&lt;/a&gt;&lt;a href=&#34;javascript:void(0)&#34;<br/>
                                                                                      class=&#34;panel-tool-close&#34;&gt;&lt;/a&gt;<br/>
            &lt;/div&gt;<br/>
        &lt;/div&gt;<br/>
        &lt;div id=&#34;content3&#34; class=&#34;panel-body ddcontent&#34; style=&#34;border: 0&#34;&gt;<br/>
        &lt;/div&gt;<br/>
    &lt;/div&gt;<br/>
    &lt;div id=&#34;dd4&#34; class=&#34;easyui-draggable&#34; data-options=&#34;handle:&#39;#title4&#39;&#34;&gt;<br/>
        &lt;div id=&#34;title4&#34; class=&#34;panel-header&#34; style=&#34;border: 0&#34;&gt;<br/>
            &lt;div class=&#34;panel-title&#34; style=&#34;&#34;&gt;<br/>
                我的申请<br/>
            &lt;/div&gt;<br/>
            &lt;div class=&#34;panel-tool&#34;&gt;<br/>
                &lt;a href=&#34;javascript:promptValue(&#39;dd4&#39;)&#34; class=&#34;panel-tool-max&#34;&gt;&lt;/a&gt;&lt;a href=&#34;javascript:void(0)&#34;<br/>
                                                                                      class=&#34;panel-tool-close&#34;&gt;&lt;/a&gt;<br/>
            &lt;/div&gt;<br/>
        &lt;/div&gt;<br/>
        &lt;div id=&#34;content4&#34; class=&#34;panel-body ddcontent&#34; style=&#34;border: 0&#34;&gt;<br/>
            &lt;div class=&#34;panel-loading&#34;&gt;<br/>
                Loading...<br/>
            &lt;/div&gt;<br/>
        &lt;/div&gt;<br/>
    &lt;/div&gt;<br/>
    &lt;div id=&#34;dd5&#34; class=&#34;easyui-draggable&#34; data-options=&#34;handle:&#39;#title5&#39;&#34;&gt;<br/>
        &lt;div id=&#34;title5&#34; class=&#34;panel-header&#34; style=&#34;border: 0&#34;&gt;<br/>
            &lt;div class=&#34;panel-title&#34; style=&#34;&#34;&gt;<br/>
                我的批准<br/>
            &lt;/div&gt;<br/>
            &lt;div class=&#34;panel-tool&#34;&gt;<br/>
                &lt;a href=&#34;javascript:promptValue(&#39;dd5&#39;)&#34; class=&#34;panel-tool-max&#34;&gt;&lt;/a&gt;&lt;a href=&#34;javascript:void(0)&#34;<br/>
                                                                                      class=&#34;panel-tool-close&#34;&gt;&lt;/a&gt;<br/>
            &lt;/div&gt;<br/>
        &lt;/div&gt;<br/>
        &lt;div id=&#34;content5&#34; class=&#34;panel-body ddcontent&#34; style=&#34;border: 0&#34;&gt;<br/>
            &lt;div class=&#34;panel-loading&#34;&gt;<br/>
                Loading...<br/>
            &lt;/div&gt;<br/>
        &lt;/div&gt;<br/>
    &lt;/div&gt;<br/>
    &lt;div id=&#34;dd6&#34; class=&#34;easyui-draggable&#34; data-options=&#34;handle:&#39;#title6&#39;&#34;&gt;<br/>
        &lt;div id=&#34;title6&#34; class=&#34;panel-header&#34; style=&#34;border: 0&#34;&gt;<br/>
            &lt;div class=&#34;panel-title&#34; style=&#34;&#34;&gt;<br/>
                我的项目<br/>
            &lt;/div&gt;<br/>
            &lt;div class=&#34;panel-tool&#34;&gt;<br/>
                &lt;a href=&#34;javascript:promptValue(&#39;dd6&#39;)&#34; class=&#34;panel-tool-max&#34;&gt;&lt;/a&gt;&lt;a href=&#34;javascript:void(0)&#34;<br/>
                                                                                      class=&#34;panel-tool-close&#34;&gt;&lt;/a&gt;<br/>
            &lt;/div&gt;<br/>
        &lt;/div&gt;<br/>
        &lt;div id=&#34;content6&#34; class=&#34;panel-body ddcontent&#34; style=&#34;border: 0&#34;&gt;<br/>
            &lt;div class=&#34;panel-loading&#34;&gt;<br/>
                Loading...<br/>
            &lt;/div&gt;<br/>
        &lt;/div&gt;<br/>
    &lt;/div&gt;<br/>
    &lt;div id=&#34;dd7&#34; class=&#34;easyui-draggable&#34; data-options=&#34;handle:&#39;#title7&#39;&#34;&gt;<br/>
        &lt;div id=&#34;title7&#34; class=&#34;panel-header&#34; style=&#34;border: 0&#34;&gt;<br/>
            &lt;div class=&#34;panel-title&#34; style=&#34;&#34;&gt;<br/>
                会议邀请<br/>
            &lt;/div&gt;<br/>
            &lt;div class=&#34;panel-tool&#34;&gt;<br/>
                &lt;a href=&#34;javascript:promptValue(&#39;dd7&#39;)&#34; class=&#34;panel-tool-max&#34;&gt;&lt;/a&gt;&lt;a href=&#34;javascript:void(0)&#34;<br/>
                                                                                      class=&#34;panel-tool-close&#34;&gt;&lt;/a&gt;<br/>
            &lt;/div&gt;<br/>
        &lt;/div&gt;<br/>
        &lt;div id=&#34;content7&#34; class=&#34;panel-body ddcontent&#34; style=&#34;border: 0&#34;&gt;<br/>
            &lt;div class=&#34;panel-loading&#34;&gt;<br/>
                Loading...<br/>
            &lt;/div&gt;<br/>
        &lt;/div&gt;<br/>
    &lt;/div&gt;<br/>
    &lt;div id=&#34;dd8&#34; class=&#34;easyui-draggable&#34; data-options=&#34;handle:&#39;#title8&#39;&#34;&gt;<br/>
        &lt;div id=&#34;title8&#34; class=&#34;panel-header&#34; style=&#34;border: 0&#34;&gt;<br/>
            &lt;div class=&#34;panel-title&#34; style=&#34;&#34;&gt;<br/>
                共享中心<br/>
            &lt;/div&gt;<br/>
            &lt;div class=&#34;panel-tool&#34;&gt;<br/>
                &lt;a href=&#34;javascript:promptValue(&#39;dd8&#39;)&#34; class=&#34;panel-tool-max&#34;&gt;&lt;/a&gt;&lt;a href=&#34;javascript:void(0)&#34;<br/>
                                                                                      class=&#34;panel-tool-close&#34;&gt;&lt;/a&gt;<br/>
            &lt;/div&gt;<br/>
        &lt;/div&gt;<br/>
        &lt;div id=&#34;content8&#34; class=&#34;panel-body ddcontent&#34; style=&#34;border: 0&#34;&gt;<br/>
            &lt;div class=&#34;panel-loading&#34;&gt;<br/>
                Loading...<br/>
            &lt;/div&gt;<br/>
        &lt;/div&gt;<br/>
    &lt;/div&gt;<br/>
    &lt;div id=&#34;dd9&#34; class=&#34;easyui-draggable&#34; data-options=&#34;handle:&#39;#title9&#39;&#34;&gt;<br/>
        &lt;div id=&#34;title9&#34; class=&#34;panel-header&#34; style=&#34;border: 0&#34;&gt;<br/>
            &lt;div class=&#34;panel-title&#34; style=&#34;&#34;&gt;<br/>
                备忘录<br/>
            &lt;/div&gt;<br/>
            &lt;div class=&#34;panel-tool&#34;&gt;<br/>
                &lt;a href=&#34;javascript:promptValue(&#39;dd9&#39;)&#34; class=&#34;panel-tool-max&#34;&gt;&lt;/a&gt;&lt;a href=&#34;javascript:void(0)&#34;<br/>
                                                                                      class=&#34;panel-tool-close&#34;&gt;&lt;/a&gt;<br/>
            &lt;/div&gt;<br/>
        &lt;/div&gt;<br/>
        &lt;div id=&#34;content9&#34; class=&#34;panel-body ddcontent&#34; style=&#34;border: 0&#34;&gt;<br/>
            &lt;div class=&#34;panel-loading&#34;&gt;<br/>
                Loading...<br/>
            &lt;/div&gt;<br/>
        &lt;/div&gt;<br/>
    &lt;/div&gt;<br/>
    &lt;script id=&#34;JsSet&#34;&gt;<br/>
        $(function () { SetWebpartLayout();});$(window).resize(function () { SetWebpartLayout(); });<br/>
    &lt;/script&gt;


&lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;

里面的代码其实很多小技巧

1.选中的将变成最顶层

  $(“.cc div”).mousedown(function () {


        $(&#34;.cc div&#34;).css(&#34;z-index&#34;, &#34;0&#34;).removeClass(&#34;alphac&#34;);<br/>
        $(this).css(&#34;z-index&#34;, &#34;1&#34;).addClass(&#34;alphac&#34;);<br/>
    }).mouseup(function () {<br/>
        $(&#34;.cc div&#34;).removeClass(&#34;alphac&#34;);<br/>
    });</pre>


2.初始化筛选
for (var i = 1; i &lt; 10; i++) {


        if ($(&#34;#dd&#34; + i).is(&#34;:hidden&#34;)) {<br/>
            $(&#34;#cdd&#34; + i).removeAttr(&#34;checked&#34;);<br/>
        }<br/>
        else {


$(“#cdd” + i).attr(“checked”, “true”);


        }<br/>
    }</pre>


3.删除部件
  $(“.cc .panel-tool-close”).click(function () {


        $(this).parent().parent().parent().hide();


$.messageBox5s(‘@Resource.Tip’, ‘您可以［部件筛选］中让他重新显示！’);


    });</pre>


4.动态设置宽度
  function promptValue(id) {


    $.messager.prompt(&#39;设置部件宽度&#39;, &#39;请输入宽度，格式：&lt;font color=&#34;red&#34;&gt;50%&lt;/font&gt;或&lt;font color=&#34;red&#34;&gt;500px&lt;/font&gt;&#39;, function (r) {<br/>
        if (r) {<br/>
            $(&#34;#&#34; + id).width(r);<br/>
        }<br/>
    });<br/>
}</pre>


5.布局
 function SetWebpartLayout()


{<br/>
    var _windowWidth = 1280;<br/>
    var _windowHeight = 800;<br/>
    $(&#34;#dd1,#dd2,#dd3,#dd4,#dd5,#dd6,#dd7,#dd8,#dd9&#34;).width(_windowWidth / 3 - 6).height(_windowHeight / 3 - 16);<br/>
    var ddw = $(&#34;#dd1&#34;).width();<br/>
    var ddh = $(&#34;#dd1&#34;).height()<br/>
    $(&#34;#dd1,#dd4,#dd7&#34;).css(&#34;left&#34;, 0);<br/>
    $(&#34;#dd2,#dd5,#dd8&#34;).css(&#34;left&#34;, ddw + 7);<br/>
    $(&#34;#dd3,#dd6,#dd9&#34;).css(&#34;left&#34;, ddw * 2 + 14);<br/>
    $(&#34;#dd1,#dd2,#dd3&#34;).css(&#34;top&#34;, 0);<br/>
    $(&#34;#dd4,#dd5,#dd6&#34;).css(&#34;top&#34;, ddh+7);<br/>
    $(&#34;#dd7,#dd8,#dd9&#34;).css(&#34;top&#34;, ddh * 2 + 17);<br/>
    $(&#34;.ddcontent&#34;).height(ddh-40)<br/>
}</pre>


布局，我写了1280*800，你可以根据你系统自行计算浏览器的宽高来自适应
总结
大概说到这里，虽然是基于EasyUI的，但是其他UI组件也都有拖拽，或者自己手写拖拽，或者下载第三方的拖拽，都可以为你的系统实现自由布局的功能
下载代码一看便明白其中一些实现方式
您也可以在每个部件加点图标美化一下
示例代码下载：链接：http://pan.baidu.com/s/1pLtUUDl 密码：dlio
———————————————————————————
虽然发布了代码，但是后来觉得丑丑的，最后花了一天的时间改了前端的布局方式，参考图片：