gallery2.html at Sigma visual ajax UI builder

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta name="keywords" content="javascript framework, RIA, SPA, client SOA, linb, jsLinb, RAD, IDE, Web IDE, widgets, javascript OOP, opensource, open-source, Ajax, cross-browser, prototype, web2.0, platform-independent, language-independent" />
    <meta name="description" content="Web application powered by LINB framework" />
    <meta name="copyright" content="hide@address.com" />
    <meta http-equiv="imagetoolbar" content="no" />
    <title>linb.Template sample -- product gallery 2</title>
</head>
<body>
    <div id='loading'><img src="../../../runtime/loading.gif" alt="Loading..." /></div>
    <div style='height:20px;'></div>
    <div id='gallery1' style="margin:0 auto;width:680px;border:solid 1px;padding:4px;"></div>
    <div style="text-align:center;padding:10px;"><button id="cmd">reorder</button></div>
    <div style='height:20px;'></div>
    <div id='drop' style="margin:0 auto;width:680px;border:solid 1px #CCC;height:32px;height:100px;position:relative;">
        drag a product here
    </div>

    <script type="text/javascript" src="../../../runtime/jsLinb/js/linb-debug.js"></script>
    <script type="text/javascript"  src="PrdGallery.js"></script>
    <script type="text/javascript">
        var tpl;
        //here, code snippets for linb.Template
        linb.main(function(){
            //hide loading message
            linb('loading').remove();
            //drop
            linb('drop').dropable(true, 'prd').onDrop(function(){
                var pro=linb.DragDrop.getProfile();
                linb(this).html(_.serialize(pro.dragData));
            });
            
            //reorder
            linb('cmd').onClick(function(){
                if(tpl.rendered){
                    var data=tpl.properties.items, copy=_.copy(data);
                    data.length=0;
                    _.arr.each(copy,function(o){
                        data.push(o);
                    },null,true);
                    tpl.render();
                }
            });
            
            linb.Ajax('data.js','',function(rsp){
                (tpl=new linb.Template.PrdGallery).output(_.unserialize(rsp),"gallery1");                    
            }).start();
        });
    </script>




</body>
</html>