图片拖拽键盘移动布局

来源：互联网发布：台视直播软件编辑：程序博客网时间：2024/06/10 00:25

<%@ 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" />" onclick="changebu()" title="" style="color: rgb(0, 110, 193);">
           <input type="button" class="button" value='<s:text name="msg.portalMS.system.save" />' onclick="save()" title="" style="color: rgb(0, 110, 193);">
           <input type="button" class="button" value='<s:text name="msg.portalMS.category.return" />' onclick="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="" onload="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.onscroll=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.onkeydown=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)' onkeydown='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.ondragover= function(e) {
               e.preventDefault();
               return true;
           }
           //拖拽结束后目标落入布局区域
           layout_obj.ondrop=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.onerror=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>

0 0