能drag和resize的DIV，目的是做一个类似于数据库视图设计器

由于是基于Jquery的，所以至于拖拽和大小变化的功能插件，已经有前人造好了，这里就直接拿来用了,当然做了部分的修改

 

目前主要完成的功能：拖拽移动、任意大小、折叠展开、关闭

待实现的：实现线的连接功能？（哪位仁兄有兴趣完成的话，告知一下哦）

 

在这里我主要是做了封装：js代码如下：

 

  <script type="text/javascript">
     $().ready(function(){
       //初始化所有的框
       $(".outerDiv").each(function(){
            init($(this).attr('id'))
        });
        
    });
    
    //初始化
    function init(outerid){
         var outerDiv=$("#"+outerid);
         outerDiv.easydrag(outerid+'_handler');
        
        var minwidth=outerDiv.width();
        var minheight=outerDiv.height();
        outerDiv.resizable({
                handler: '#'+outerid+'_resizeDiv',
                min: { width: minwidth, height: minheight },
                max: { width: 300, height: 1000 },
                onResize: function(e) {
                    $("#"+outerid+"_cols").height(outerDiv.height()-20);
                }
            });
    }
    
    function SelectAll(chk){
        var parent=$(chk).parent("div").parent("div");
        $("div",parent).each(function(){
           //alert($(this).html());
           $(this).find("input[type='checkbox']").attr('checked',chk.checked)
          });
    
        GenerateSql(chk);
    }
    
    function GenerateSql(chk){
        $(".outerDiv").each(function(){
            //alert($(".outerDiv").length);
        });
    
         var parent=$(chk).parent("div").parent("div");
         var root=parent.parent("div");
         var table=root.attr("id");
         var cols="";
        
        $("div",parent).each(function(){
           if($(this).find("input[type='checkbox']").attr('checked')==true){
                var val=$(this).find("label").html();
                if(val!=null&&val!=""){
                   cols+=table+"."+val+",";
                }
            }
          });
          
        if(cols!=""){
              cols=cols.substring(0,cols.length-1);
          }
          
        var sql="select "+cols+" from "+table;
        
        
        $("#TextBox1").val(sql);
    }
    
    function Collapse(obj){
        var root=$(obj).parent().parent("div");
        var rootid="#"+root.attr("id");
        var colsid=rootid+"_cols";
        var resizeid=rootid+"_resizeDiv";
        
        if(obj.innerHTML=="[-]"){
            obj.innerHTML="[+]"
            $(rootid).height($(rootid).height()-$(colsid).height());
           
        }else{
            obj.innerHTML="[-]"
            $(rootid).height($(rootid).height()+$(colsid).height());
        }
        //折叠/展开
        $(colsid).toggle();
        //清除/显示拖拉框
        $(resizeid).toggle();
        
    }
    
    function Delete(obj){
        $("#"+obj.id).parent().parent().remove();
    }
    </script>

 

如果想加一个表的话，只要加如一个这么DIV

其中：CodeList为表名，内部的div一般遵循：表名+自定义名称即可

 

<div id="CodeList" class="outerDiv" style="top: 94px; left: 359px;">
    <div>
        <div id="CodeList_handler" class="handler_L">CodeList</div>
        <div class="handler_M" onclick="Collapse(this)">[-]</div>
        <div id="CodeList_del" class="handler_R" onclick="Delete(this)">[x]</div>
    </div>
    <div id="CodeList_cols" class="clos">
        <div>
            <input id="Checkbox0" type="checkbox" onclick="SelectAll(this)" />(*)所有列</div>
        <div>
            <input id="Checkbox1" type="checkbox" onclick="GenerateSql(this)" /><label>Id</label></div>
        <div>
            <input id="Checkbox2" type="checkbox" onclick="GenerateSql(this)" /><label>Code</label></div>
        <div>
            <input id="Checkbox3" type="checkbox" onclick="GenerateSql(this)" /><label>Name</label></div>
        <div>
            <input id="Checkbox4" type="checkbox" onclick="GenerateSql(this)" /><label>Parent</label></div>
        <div>
            <input id="Checkbox5" type="checkbox" onclick="GenerateSql(this)" /><label>Date</label></div>
    </div>
    <div id="CodeList_resizeDiv" class="resizeDiv"></div>
</div>

 

最后放上源码