图片拖拽键盘移动布局

Love The Way You Lie 2022-08-06 05:08 165阅读 0赞

<%@ page language="java" pageEncoding="UTF-8" import="com.XXX.createPortal.recommendPosition.entity.RecommendPositionStatus,com.coship.dhm.portalMS.common.SerConstants"%>  
<%@ page import="com.XXX.createPortal.recommendPosition.entity.Position" %>  
<%@taglib prefix="s" uri="/struts-tags"%>  
<%@ taglib prefix="page" uri="/WEB-INF/tlds/paginated.tld"%>  
<%@ taglib prefix="priveliege" uri="/WEB-INF/tlds/priveliege.tld" %>  
  
<%@ include file="../../common/language.jsp"  %>  
<%  
    Double random=Math.random();  
    String assetImageHeight = (String)request.getAttribute("assetImageHeight");  
    String assetImageWidth = (String)request.getAttribute("assetImageWidth");  
%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
  
<head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
          
        <title>list</title>  
        <%@ include file="../common/commonJS.jsp" %>  
        <script src="../js/jquery.js" type="text/javascript"></script>  
        <script type="text/javascript" src="../js/dialogShow.js"></script>  
        <style>  
            \*\{padding:0px;margin:0px;\}  
            .layout,.all\_content\{max-width:100%;overflow:scroll;height:auto;position:relative;\}  
            .column\{position:relative;width:100%;overflow:hidden;text-align:center\}  
            .column table\{margin:0 auto\}  
            .column td\{min-width:100px;font-size:20px;font-weight:800;cursor:pointer;text-align:center;\}  
            \#newLayout,\#content\{width:auto;word-break:break-all;border:1px solid \#4ccdf8;position:relative;\}  
            \#newLayout\{height:215px;\}  
            \#newLayout>li,\#content>li\{width:16px;float:left;list-style:none;position:relative;\}  
            \#newLayout>li>div,\#content>li>div\{border:1px solid \#ccc;margin:2px 1px;width:12px;position:relative;height:12px;\}  
            \#newLayout>li>div:first-child,\#content>li>div:first-child\{margin-top:1px;\}  
            .m\{position:absolute;border:1px solid \#4ccdf8;cursor: move;\}  
            .focus\{background:\#ccc;\}  
            .wrap\{position:absolute;overflow:hidden;border:1px solid \#4ccdf8;\}  
            .pagelist\{z-index:1000;width:100%;position:relative;padding:3px;box-sizing:border-box;\}  
            .pagelist>li\{list-style:none;float:right;margin:2px;padding:0 2px;background:\#fff\}  
            .pagelist>li.foc\{background:red\}  
            .tab\_switchdraw\_x \{height: 31px;margin-top: 5px;overflow: hidden;    position: relative;    background: url(../images/bg\_actlistcon.gif) repeat-x;width:100%\}  
            .tab\_switchdraw\_x ul \{padding:2px 5px 0px 5px;box-sizing:border-box;\}  
            .tab\_switchdraw\_x li \{float: left;padding-right: 3px;\}  
            .tab\_switchdraw\_x li a \{display: block;min-width:45px;height:20px;padding:9px 3px 0 3px;text-align:center;text-decoration:none;color:\#3965A3;line-height:12px;    background:url(../images/bg\_actlist.jpg)no-repeat;font-size:14px;-webkit-background-size:100%;\}  
            .tab\_switchdraw\_x li a\#this\_datact \{color: \#515151;padding:9px 3px 0 3px;height:20px;background:url(../images/bg\_actliston.jpg) no-repeat;-webkit-background-size:100%;\}  
            .page\_line\{position:relative;z-index:10000;width:100%;background: url(../images/in\_m.jpg);background-size:100% 100%;line-height:40px;height:40px;color:\#000000;margin-bottom:5px;margin-top:5px;overflow:hidden;text-align: center;\}  
            .button\{padding: 0;margin:5px 8px;border: none;text-align: center;width: 100px;cursor: pointer;height: 24px;px;background: url(../images/but\_guild\_1.gif);background-size:100% 100%;color: \#006ec1;font-size:14px;font-weight:600;word-spacing: 0;\}  
            .bg\{position:fixed;width:100%;height:100%;background:rgba(102,102,102,0.3);top:0px;left:0px;z-index:10000;display:none\}  
            .dialogContent\{background:\#fff;width:760px;height:660px;top:50px;margin:0 auto;position:relative;overflow:hidden;-webkit-border-radius:10px;\}  
            .optTable\{position:relative;width:96%;height:auto;left:2%;margin-top:5px;\}  
            .optTable>table\{width:100%;background:\#97b8e0\}  
            .optTable>table>tbody>tr>td:nth-child(1)\{line-height:30px;background:\#fff;border:1px solid \#97b8e0\}  
            .optTable>table>tbody>tr>td:nth-child(2)\{width:70%;line-height:30px;background:\#fff;border:1px solid \#97b8e0\}  
            .optTable input\[type="text"\],.optTable input\[type="number"\]\{width:100px;\}  
            \#btn\_closedialog\{top:5px\}  
            .bg td\{font-size:13px;\}  
            \#color td\{width:20px;height:20px;font-size:13px;\}  
            \#color \#colorValue\{font-size:14px;width:61px;\}  
            .imageView\{position:relative;width:100%;height: 260px;overflow-y: scroll;\}  
            .imageView div\{display:inline-block;margin:0px 5px\}  
              
            .rRightDown,.rLeftDown,.rLeftUp,.rRightUp,.rRight,.rLeft,.rUp,.rDown\{  
                position:absolute;  
                background:transparent;  
                width:10px;  
                height:10px;  
                z-index:5;  
                font-size:0;  
            \}  
            .rLeftDown,.rRightUp\{cursor:ne-resize;\}  
            .rRightDown,.rLeftUp\{cursor:nw-resize;\}  
            .rRight,.rLeft\{cursor:e-resize;\}  
            .rUp,.rDown\{cursor:n-resize;\}  
            .rLeftDown\{left:-4px;bottom:-4px;\}  
            .rRightUp\{right:-4px;top:-4px;\}  
            .rRightDown\{right:-5px;bottom:-5px;\}  
            .rLeftUp\{left:-4px;top:-4px;\}  
            .rRight\{right:-4px;top:50%;margin-top:-4px;\}  
            .rLeft\{left:-4px;top:50%;margin-top:-4px;\}  
            .rUp\{top:-4px;left:50%;margin-left:-4px;\}  
            .rDown\{bottom:-4px;left:50%;margin-left:-4px;\}  
            .bgDiv\{width:600px; height:300px; border:10px solid \#666666; position:relative;\}  
            .dragDiv\{border:1px solid \#000000; width:100px; height:60px; top:50px; left:50px; background:\#fff;\}  
            .search\{position:relative;top:-4px;width:300px;float:right;\}  
            .search input\[type='text'\]\{padding:2px;font: 15px arial;border: 1px solid \#cdcdcd;border-color: \#9a9a9a;outline: none;height:22px;\}  
            .search input\[type='button'\]\{margin:5px 0px;\}  
        </style>  
    </head>  
    <body>  
    <input type="hidden" id="recoPositionId" name="recoPositionId" />  
      
        <div class="page\_line getmore">  
        <s:text name="msg.portalMS.recommendImage.Layout.height" />  
            <input type="text" id="page\_width" value="80" maxlength="3" style="width:40px;" />  
                 <s:text name="msg.portalMS.recommendImage.Layout.width" />：<input type="text" id="page\_height" value="40" maxlength="3" style="width:40px;" />  （<s:text name="msg.portalMS.recommendImage.Layout.unit" />：16px）  
            <input type="button" class="button" value="<s:text name="msg.portalMS.recommendImage.Layout.changesize" />" οnclick="changebu()" title="" style="color: rgb(0, 110, 193);">  
            <input type="button" class="button" value='<s:text name="msg.portalMS.system.save" />' οnclick="save()" title="" style="color: rgb(0, 110, 193);">  
            <input type="button" class="button" value='<s:text name="msg.portalMS.category.return" />' οnclick="parent.window.location='<%=path %>/recommendPosition/queryRecommendPositionList.action?queryFlag=<%=SerConstants.QUERYINFOFLAG\_YES %>';setTimeout(function()\{load()\},tipTime);" value="<s:text name="msg.portalMS.returnBack" />"  title="" style="color: rgb(0, 110, 193);">  
              
            <div id="showArea" style="display: none;">  
                <s:iterator value="pager" status="ind" id="positionRelateImage">  
                    <img id='img\_<s:property value="\#positionRelateImage.recommendImage.recoImageId" />' myId='<s:property value="\#positionRelateImage.recommendImage.recoImageId" />'  
                         width="" height="" οnlοad="AutoResizeImage(this,<s:property value='\#ind.index'/>)"  
                           \_cellX="" \_cellY="" \_imgW="" \_imgH=""  
                           src="<%=path %>/recommendImage/viewImage.action?recoImageId=<s:property value="\#positionRelateImage.recommendImage.recoImageId" />&random=<%=random %>"  />  
                </s:iterator>  
            </div>  
        </div>  
        <div class="layout">  
             <ul id="newLayout" style="width: 4000px; height: 285px;">  
                <li></li>  
             </ul>  
        </div>  
      
    <script>  
    var st  
    var scroll=function(e)\{  
        clearTimeout(st);  
        st=setTimeout(function()\{  
        window.scrollTo(loc.scrollLeft,loc.scrollTop);  
        \},5);  
    \}  
    window.οnscrοll=scroll;  
    var moveId;  
    function haha(obj)  
    \{  
        //document.documentElement.style.overflow='hidden';  
  
        var move=function(e)\{  
            e.preventDefault && e.preventDefault();  
            e.returnValue=false;  
            e.stopPropagation && e.stopPropagation();  
            movePic();  
            return false;  
                \}  
                var keyFunc=function(e)\{  
                if(37<=e.keyCode && e.keyCode<=40)\{  
                return move(e);  
                \}  
            \}  
                document.body.οnkeydοwn=keyFunc;  
                  
        //alert("obj"+obj.id);  
        console.log("haha()：："+obj.id);  
        moveId = obj.id;  
    \}  
        var layoutWidth =16;  
        var layoutmargin = 2;  
  
        var isNew=false;  
        function AutoResizeImage(objImg,index) \{  
            var img = new Image();  
            img.src = objImg.src;  
            var w = img.width;  
            var h = img.height;  
            objImg.height = h;  
            objImg.width = w;  
            if(!jQuery(objImg).attr('\_cellX') && !isNew)  
            \{  
                isNew=true;  
            \}  
            if(isNew)  
            \{  
                jQuery(objImg).attr('\_cellX',layoutWidth\*index);  
                jQuery(objImg).attr('\_cellY',layoutWidth\*index);  
                  
                jQuery(objImg).attr('\_imgW',Math.round(w/layoutWidth));  
                jQuery(objImg).attr('\_imgH',Math.round(h/layoutWidth));  
                  
            \}  
        \}  
        var layout=\{x:80,y:40\},dragId,submitId=1,isEdit=false;  
        var lay;  
        var cellDefaultColor= '';  
        //模块模板  
        var module="<div id='\{id\}' title='\{description\}' onclick ='haha(this)' οnkeydοwn='movePic()' draggable='true' class='m' style='left:\{left\}px;top:\{top\}px;width:\{width\}px;height:\{height\}px;background-color:\{bgcolor\}'><div murl='\{url\}'  style='position:relative;width:100%;height:100%;top:0px;left:0px;'></div><span style='position:absolute;font-size:13px;line-height:15px;text-align:right;z-index:101;top:0px;'>\{title\}</span></div>";  
        var moveModule="<div class='rRightDown' '></div>";  
          
        function getImageLayoutInfoAjax()\{  
            var recoPositionId ='<s:property value="recoPositionId" />'  
              
            var url="<%=path%>/recommendPosition/queryImageLayoutInfoList.do?recoPositionId="+recoPositionId;  
            $.ajax(\{  
                type: "POST",  
                url: url,  
                async: false,  
                success: function(data)\{  
                //alert("data"+data);  
                    if(data)\{  
                        lay =imageLayoutInfo = eval(data);  
                        console.log("lay：："+lay);  
                    \}                      
                \}  
            \});  
        \}  
          
    window.onload = function() \{  
            if(!(navigator.userAgent.indexOf("WebKit")>0||navigator.userAgent.indexOf("webkit")>0||navigator.userAgent.indexOf("Chrome")>0))\{  
            alert('Sorry!!\\n+<s:text name="msg.portalMS.recommendImage.Layout.unsupportTip" />');  
             \}  
              getImageLayoutInfoAjax();  
               
              var imageList=jQuery("\#showArea > img");  
              var jsonStr='\[\{"titleLayoutList": \[';  
              for(var i=0;i<imageList.length;i++ )  
              \{  
                  var data = lay\[i\];  
                  //alert("lay\[i\]"+lay\[i\]);  
                  jsonStr=jsonStr+'\{"resourceName": "","cellAlpha": 100, "cellType": 0, "cellX": 1, "cellY": 1,';  
                  jsonStr=jsonStr+'"id":'+ jQuery(imageList\[i\]).attr("myId")+',';  
                  if(data.recoImageId)  
                  \{  
                      for(var j = 0;j<imageList.length;j++ )  
                      \{  
                        var data = lay\[j\];  
                        if(data.recoImageId == jQuery(imageList\[i\]).attr("myId"))  
                        \{  
                          //jsonStr=jsonStr+'"\_cellX":'+ data.celx\*40+',';  
                          //jsonStr=jsonStr+'"\_cellY":'+ data.cely\*40+',';  
                            
                          jsonStr=jsonStr+'"\_cellX":'+ data.celx+',';  
                          jsonStr=jsonStr+'"\_cellY":'+ data.cely+',';  
                        \}      
                      \}  
                  \}  
                  else  
                  \{  
                  jsonStr=jsonStr+'"\_cellX":'+ jQuery(imageList\[i\]).attr("\_cellX")+',';  
                  jsonStr=jsonStr+'"\_cellY":'+ jQuery(imageList\[i\]).attr("\_cellY")+',';  
                  
                  \}  
                  jsonStr=jsonStr+'"\_width":'+ jQuery(imageList\[i\]).attr("width")+',';  
                  jsonStr=jsonStr+'"\_height":'+ jQuery(imageList\[i\]).attr("height")+',';  
                    
                  jsonStr=jsonStr+'"localPath":"'+jQuery(imageList\[i\]).attr("src")+'"';  
                  jsonStr=jsonStr +'\},';                  
               \}  
             if(imageList.length>0)  
              \{  
              jsonStr =jsonStr.substring(0,jsonStr.length-1);  
              \}  
           jsonStr=jsonStr +'\]\}\]';  
           console.log("jsonStr：："+jsonStr);  
           lay=eval(jsonStr);  
            //生成布局格子  
            buildMContent(layout,"newLayout");  
            setLayout(0,lay\[0\].id);  
            bindEvents();  
            loadImg();  
              
        \};  
          
        function changebu()  
        \{  
            var page\_width= jQuery("\#page\_width").val();  
            var page\_height= jQuery("\#page\_height").val();  
            if((/^\[0-9\]\*$/).test(page\_width)==false || (/^\[0-9\]\*$/).test(page\_height)==false)  
            \{  
                  
                alert('<s:text name="msg.portalMS.resource.input.integer.positive" />');  
                return;  
            \}  
            page\_width=parseInt(page\_width);  
            page\_height=parseInt(page\_height);  
            if(page\_width<=0 || page\_width>100 )  
            \{  
                alert('<s:text name="msg.portalMS.resource.input.integer.positive" />\[1-100\]');  
                return;  
            \}  
            if(page\_height<=0 || page\_height>100 )  
            \{  
                alert('<s:text name="msg.portalMS.resource.input.integer.positive" />\[1-100\]');  
                return;  
            \}  
            page\_width=parseInt(page\_width,10);  
            page\_height=parseInt(page\_height,10);  
      
            layout.x=page\_width;  
            layout.y=page\_height;  
            jQuery("\#newLayout>li").remove();  
            buildMContent(layout,"newLayout");  
            setLayout(0,lay\[0\].id);  
            bindEvents();  
            loadImg();  
        \}  
        function save()  
       \{  
            var recPositionId = jQuery("\#recoPositionId").value;  
            var datas=lay\[0\].titleLayoutList;  
            var datastr ="";  
            //遍历数据 生成html  
            for(var i=0;i<datas.length;i++)\{  
                var d=datas\[i\];  
                var obj=jQuery("\#"+d.id);  
                //取出模板里存储的数据  
                var data=obj.data("data");  
                //var width = Math.ceil(d.\_width/40);  
                //var height = Math.ceil(d.\_height/40);  
              
                var width = Math.ceil(d.\_width);  
                var height = Math.ceil(d.\_height);  
                //alert("推荐图片Id="+d.id+",X坐标为："+data.celX\*40+",Y坐标为："+data.celY\*40+",宽:"+width+",高:"+height);  
               //datastr +="recPositionId:"+'<s:property value="recoPositionId" />' + ",recimageid:"+d.id+",celX:"+data.celX+",celY:"+data.celY+",width:"+width+",height:"+height+";";  
              // alert("datastr"+datastr);  
                
              datastr +='<s:property value="recoPositionId" />' + ","+d.id+","+data.celX\*layoutWidth+","+data.celY\*layoutWidth+","+width+","+height+";";  
                
            \}  
          
                $.ajax(\{  
                type: "POST",  
                    url: "<%=path%>/recommendPosition/saveLayout.action?imageLayoutdata="+datastr,      
      
                success: function(msg)\{    
  
                    if(msg=='success')\{  
                     showText('<s:text name="msg.portalMS.system.message.tip" />',msg,400,200,0,true);  
                       window.location.href=window.location.href;  
                    \}else\{  
                    //保存失败  
                        if(msg == '99')\{  
                           showText('<s:text name="msg.portalMS.system.message.tip" />','<s:text name="msg.portalMS.system.failured.message.tip" />',400,200,0,true);  
                        \}else\{  
                           showText('<s:text name="msg.portalMS.system.message.tip" />',msg,400,200,0,true);  
                        \}  
                    \}  
                  \}  
           \});  
           
             
           /\*\*  
               $.ajax(\{  
                type: "POST",  
                url: url,  
                async: false,  
                success: function(data)\{  
                alert("data"+data);  
                    if(data)\{  
                        lay =imageLayoutInfo = eval(data);  
                        console.log("lay：："+lay);  
                    \}                      
                \}  
            \});  
           \*/  
            
  
        \}  
        //添加已保存的布局 index标签下标 id标签id  
        function setLayout(index,id)\{  
            //刷新刷局格子  
            refreshAll(".layout");  
            //数据  
            var datas=lay\[index\].titleLayoutList;  
            //页签id=submitId提交时要用的参数  
            submitId=id;  
            //给页签添加选中样式  
            tagFocus(index);  
            //遍历数据 生成html  
            for(var i=0;i<datas.length;i++)\{  
                var d=datas\[i\];  
                //海报地址  
                var url=d.localPath;  
                var bgColor=d.cellColor||cellDefaultColor;  
                bgColor=getRgbaColor(bgColor,d.cellAlpha);  
                //生成html串  
                d.cellX=d.\_cellX/layoutWidth;  
                d.cellY=d.\_cellY/layoutWidth;  
                var html=module.replace("\{id\}",d.id)  
                               .replace("\{left\}",layoutWidth\*d.cellX+layoutmargin)  
                               .replace("\{top\}",layoutWidth\*d.cellY+layoutmargin)  
                               .replace("\{width\}",d.\_width)  
                               .replace("\{height\}",d.\_height)  
                               .replace("\{bgcolor\}",bgColor)  
                               .replace("\{title\}",d.resourceName)  
                               .replace("\{description\}",d.description)  
                               .replace("\{url\}",url);  
                              // alert("html:"+html);  
                //存在到html模板里的数据  
                var moveObj=\{  
                    id:d.id,//模块ID  
                    myId:"",//cell id  
                    newMove:"0",//是否移动过  
                    x:0,//x坐标  
                    y:0,//y坐标  
                    celX:d.cellX,//x轴占用格子数  
                    celY:d.cellY,//y轴占用格子数  
                    \_width:d.\_width,//x轴占用格子数  
                    \_height:d.\_height,//y轴占用格子数  
                    ofsX:(d.cellX+layoutmargin),//模板在页面的x轴偏移  
                    ofsY:(d.cellY+layoutmargin),//模板在页面的y轴偏移  
                    localPath:d.localPath,//图片服务器上的相对地址  
                    posterServerHttp:d.posterServerHttp,//服务地址加端口  
                    container:"newLayout",//所在布局的html id  
                    cellState:d.cellState,//模板状态  
                    cellColor:d.cellColor,//背景颜色  
                    cellAlpha:d.cellAlpha,//透明度  
                    posterList:d.posterList//多张海报的参数(缩放使用到)  
                \};  
                  
                //直接添加到容器里  
                    jQuery(".layout").append(jQuery(html).data("data",moveObj).append(moveModule));  
              
            \}  
            //给模块事件  
            jQuery(".m").each(function (i)\{  
                //给模块添加拖拽事件  
                this.addEventListener("dragstart",drag,false);  
  
                //this.addEventListener("onkeydown",moveImage,false);  
                this.addEventListener("onkeydown",movePic,false);  
  
                  
  
                  
            \});  
              
              
        \}  
        //生成布局格子opt数据,target格子生成所在容器id  
        function buildMContent(opt,target)\{  
            var html="";  
            var x=opt.x;  
            var y=opt.y;  
            for(var i=0;i<x;i++)\{  
                html+="<li>";  
                for(var j=0;j<y;j++)\{  
                    html+="<div fill='true'></div>";  
                \}  
                html+="</li>";  
            \}  
            var num=jQuery("\#"+target+">li").length;  
            jQuery("\#"+target).append(html).width((num+x)\*layoutWidth).height(layoutWidth\*y+layoutmargin);  
        \}  
          
      
        //置空  
        function setEmpty(a)\{  
            if(!a.length)  
                return;  
            var l=a.length;  
            for(var i=0;i<l;i++)\{  
                jQuery("\#content>li:eq("+a\[i\].x+")>div:eq("+a\[i\].y+")").removeAttr("fill");  
            \}  
        \}  
        //页签焦点  
        function tagFocus(index)\{  
            jQuery(".tab\_switchdraw\_x>ul>li:eq("+index+")>a").attr("id","this\_datact").parent().siblings().find("a").removeAttr("id");  
        \}  
        //资源页签焦点  
        function ModuleFocus(index)\{  
            if(index==-1)  
                jQuery("\#tab\_lay\_x>ul>li:last-child>a").attr("id","this\_datact").parent().siblings().find("a").removeAttr("id");  
            else  
                jQuery("\#tab\_lay\_x>ul>li:eq("+index+")>a").attr("id","this\_datact").parent().siblings().find("a").removeAttr("id");  
        \}  
        //清空布局  
        function refreshAll(target)\{  
            jQuery(target+">div").remove();  
            jQuery(target+">ul>li>div").attr("fill","true").removeAttr("celX").removeAttr("celY").removeAttr("ownId");  
        \}  
        //还原过度标记  
        function reChangeAttr()\{  
            jQuery("\#content div\[fill='false'\]").attr("fill","true");  
        \}  
        //标记单无格已被占用  
        function removeFillFalse()\{  
            jQuery("\#content div\[fill='false'\]").removeAttr("fill");  
        \}  
        //过度标记  
        function changeAttr(x,y)\{  
            jQuery("\#content>li:eq("+x+")>div:eq("+y+")").attr("fill","false");  
        \}  
        //检测单元格是否被占用  
        function checkTheCell(x,y)\{  
            return jQuery("\#content>li:eq("+x+")>div:eq("+y+")").attr("fill")?true:false;  
        \}  
  
        //删除缩放格子  
        function deleteZoom(obj)\{  
            jQuery(".rRightDown,.rLeftDown,.rRightUp,.rLeftUp,.rRight,.rLeft,.rUp,.rDown",obj).remove();  
        \}  
  
        //块拖走后清空原来块占用单元格的所有标记  
        function reArea(x,y,targetId)\{  
            var div=jQuery("\#"+targetId+">li:eq("+x+")>div:eq("+y+")");  
            div.attr("fill","true").removeAttr("celX").removeAttr("celY").removeAttr("ownId");  
        \}  
          
        //检测单元格是否为原来块所占用的。  
        function checkCell(x,y,id,ownId)\{  
            var obj=jQuery("\#"+id+">li:eq("+x+")>div:eq("+y+")");  
            return obj.attr("ownId")==ownId||obj.attr("fill")?true:false;  
        \}  
        //返回单元格占用div id  
        function getOwnId(x,y,targetId)\{  
            return jQuery("\#"+targetId+">li:eq("+x+")>div:eq("+y+")").attr("ownid");  
        \}  
          
        //拖拽开始  
        function drag(e)\{  
            //当前拖拽的模块id  
            dragId=this.id;  
            console.log("dragId=this.id:::"+this.id);  
            var data=jQuery(this).data("data");  
            //\*1  字符转数字  
            //layerX,layerY模块在页面的偏移量  
            data.x=e.layerX\*1;  
            data.y=e.layerY\*1;  
            console.log("drag(e data.x:data.y"+ data.x+" : "+data.y);  
            //x列 y行  
            var x=Math.round(data.ofsX/layoutWidth);  
            var y=Math.round((data.ofsY-layoutmargin)/layoutWidth);  
            /\*\*  
            if(data.container=="newLayout")\{  
                //如果是newLayout,移动的时候要判断叠加的情况  
                //取出模块占用的格子，查看格子所属id(ownId)是否和自己的id匹配  
                var obj=jQuery("\#newLayout>li:eq("+x+")>div:eq("+y+")");  
            \}\*/  
        \}  
        //拖拽结束  
        function dragend(e)\{\}  
      
    function bindEvents()\{  
          
            var layout\_obj=document.getElementsByClassName("layout")\[0\];  
            var layout\_j=jQuery(layout\_obj).offset();  
              
            layout\_obj.οndragοver= function(e) \{  
                e.preventDefault();  
                return true;  
            \}  
            //拖拽结束后目标落入布局区域  
            layout\_obj.οndrοp=function (e)\{  
                //当前拖拽的模块id  
                var id=dragId;  
                var obj=jQuery("\#"+id);  
                  
                //取出模板里存储的数据  
                var data=obj.data("data");  
                console.log(data.overlay);  
                data.newMove="1";  
                isEdit=true;  
                //添加进布局区  
                jQuery(this).append(obj);  
                //修改模块容器  
                data.container='newLayout';  
                //计算模块模块所以容器偏移量  
                var x=e.pageX-layout\_j.left-data.x+this.scrollLeft;  
                var y=e.pageY-layout\_j.top-data.y+this.scrollTop;  
                //通过偏移量计算出周边格子(让模块自动落入格子上，有一种自动吸附的效果)  
                //x=x<0?0:x;  
                //y=y<0?0:y;  
                //x=x>(layout.x\*layoutWidth-data.\_width)?(layout.x\*layoutWidth-data.\_width):x;  
                //y=y>(layout.y\*layoutWidth-data.\_height)+layoutmargin?(layout.y\*layoutWidth-data.\_height)+layoutmargin:y;  
                //x=Math.floor(x/layoutWidth)\*layoutWidth+layoutmargin;  
                //y=Math.floor((y-layoutmargin)/layoutWidth)\*layoutWidth+layoutmargin;  
                  
              
                var isCover=false;  
          
                var datas=lay\[0\].titleLayoutList;  
  
            //相同大小图片不能覆盖  
            for(var i=0;i<datas.length;i++)\{  
                    var dataOne=datas\[i\];  
                     var objtemp=jQuery("\#"+dataOne.id);  
                    //取出模板里存储的数据  
                    var d=objtemp.data("data");  
                    if(id==d.id)  
                    \{  
                        continue;  
                    \}  
                    if(d.celX==Math.floor(x/layoutWidth) && d.celY==Math.floor(y/layoutWidth) && d.\_width==data.\_width && d.\_height==data.\_height )  
                    \{  
                        isCover=true;  
                    \}  
                \}  
                if(isCover)  
                \{  
                     return false;  
                \}else  
                \{  
                    obj.css(\{"left":x+"px","top":y+"px"\});  
                    data.ofsX=x;  
                    data.ofsY=y;  
                    data.celX=Math.round(x/layoutWidth);  
                    data.celY=Math.round((y-layoutmargin)/layoutWidth);  
                \}  
                console.log("data.id"+data.id+"data.celX："+data.celX+"data.celY"+data.celY+"data.ofsX"+data.ofsX+"data.ofsY"+data.ofsY);  
            \}  
        \}  
            //块拖放到一个区域后，原点单元格添加对应块所占用单元格长度  
        function setArea(x,y,w,h,id)\{  
            for(var i=0;i<w;i++)\{  
                for(var j=0;j<h;j++)\{  
                    if(i==0&&j==0)  
                        setCellArea(i+x,j+y,w,h);  
                    fillCell(i+x,j+y,id);  
                \}  
            \}  
        \}  
            //块拖放到一个区域后，原点单元格添加对应块所占用单元格长度  
        function setCellArea(x,y,celX,celY)\{  
            jQuery("\#newLayout>li:eq("+x+")>div:eq("+y+")").attr("celX",celX).attr("celY",celY);  
        \}  
          
          
        //格式化状态数据100->00100;  
        function checkNum(num)\{  
            var n=\["000000","00000","0000","000","00","0"\];  
            num=n\[num.length-1\]?n\[num.length-1\]+num:num;  
            return num;  
        \}  
        //返回rgba色值  
        function getRgbaColor(color,opacity)\{  
            if(color.length<7)  
                return;  
            var one=transTheNum(color.substring(1,3),16,10);  
            var two=transTheNum(color.substring(3,5),16,10);  
            var three=transTheNum(color.substring(5,7),16,10);  
            var opa=opacity\*1/100;  
            return "rgba("+one+","+two+","+three+","+opa+")";  
        \}  
          
        //进制转换 num要转换的值 oldType值原类型 newType要转成的类型  
        function transTheNum(num,oldType,newType)\{  
            return parseInt(num,oldType).toString(newType);  
        \}  
        //返回对应位数据值  
        function getNum(index,num)\{  
            return num.substring(index,index+1);  
        \}  
        function hideDialog()\{  
            jQuery("\#bg").hide()  
        \}  
  
        function removeColor()\{  
            jQuery(".getmore input").css("color","\#928E8E");  
        \}  
          
        function addColor()\{  
            jQuery(".getmore input").css("color","\#006ec1");  
        \}  
          
      
        //延时加载图片  
        function loadImg()\{  
            jQuery("div\[murl\]").each(function()\{  
                var \_t=this;  
                var img=new Image();  
                img.src=jQuery(\_t).attr("murl");  
                jQuery(img).load(function()\{  
                    jQuery(\_t).css(\{"background":"url("+this.src+")","-webkit-background-size":"100%"\}).removeAttr("murl");  
                \});  
                img.οnerrοr=function()\{  
                    jQuery(\_t).removeAttr("murl");  
                \}  
            \});  
            jQuery("img").each(function(i)\{  
                this.addEventListener("dragstart",function()\{e.preventDefault();\},false);  
            \});  
        \}  
  
          
var key=0  
var timer  
  
  
  
function movePic()\{  
    var pic = document.getElementById(moveId);  
    var step = 1;          
    var x = parseInt(pic.style.left);  
    var y = parseInt(pic.style.top);  
          
    var code = event.keyCode;  
    //alert("event.keyCode:"+event.keyCode);  
    //alert(" pic.id:"+ pic.id);  
    //alert(" pic.style.left:"+ pic.style.left);  
    switch(code) \{  
        case 37:  
            x-=step;  
            pic.style.left = x+'px';;  
            break;  
        case 38:  
            y-=step;  
            pic.style.top = y+'px';;  
            break;  
        case 39:  
            x+=step;  
            //alert("x:"+x);  
            pic.style.left = x+'px';  
           // alert("pic.style.left::::::"+pic.style.left);  
            break;  
        case 40:  
            y+=step;  
            pic.style.top = y+'px';;  
            break;              
    \}  
\}      
  
function moveImage(e)  
\{  
    //当前拖拽的模块id  
    var id=moveId;  
    var obj=jQuery("\#"+id);  
    console.log("moveImage(e)::::",moveId);  
     console.log("moveImageobj",obj);  
     console.log("moveImageobjId",obj.id);  
    ietype = (document.layers) ? 1 : 0;                     
//判断浏览器类型  
    divObj = (ietype)? obj : obj.style         
//获取指定的div  
    Xpos = parseInt(divObj.left);                           
//获取div的X坐标  
    Ypos = parseInt(divObj.top);     
    alert("Xpos:Ypos"+Xpos+":"+Ypos);                         
//获取div的Y坐标  
    document.onkeydown = keyDown;                           
//设置按键事件  
    document.onkeyup = keyUp;                               
//设置键盘弹起的事件  
    if (ietype) document.captureEvents(Event.keydown | Event.keyup);  
\}  
function keyDown(e)                                        
//按键的操作  
\{  
    key = (ietype)? e.which : event.keyCode  
    //判断用户按下的键，注意此键盘包括方向键和小键盘（数字键）  
    if (key == 108 || key == 37) moveObj(1,2);  
    alert("left:top "+Xpos+":"+Ypos);  
    if (key == 114 || key == 39) moveObj(1,3);  
    alert("left:top "+Xpos+":"+Ypos);  
    if (key == 100 || key == 40) moveObj(1,4);  
    alert("left:top "+Xpos+":"+Ypos);  
    if (key == 117 || key == 38) moveObj(1,5);  
    alert("left:top "+Xpos+":"+Ypos);  
\}  
function keyUp(e)                                         
//按键弹起的操作  
\{  
    key=0;clearTimeout(timer);  
\}  
function moveObj(t,u)                                     
//移动图片的方法  
\{  
    clearTimeout(timer)  
     
    if (t==1)  
    \{  
        //根据移动的键，改变div的X和Y坐标  
        if (u==2)\{divObj.left = Xpos-=1;timer = setTimeout("moveObj(1,2)", 40);\}  
        if (u==3)\{divObj.left = Xpos+=1;timer = setTimeout("moveObj(1,3)", 40);\}  
        if (u==4)\{divObj.top = Ypos+=1;timer = setTimeout("moveObj(1,4)", 40);\}  
        if (u==5)\{divObj.top = Ypos-=1;timer = setTimeout("moveObj(1,5)", 40);\}  
    \}  
\}  
</script>  
  </body>  
</html>