x

public/css/style.css

@@ -8715,7 +8715,7 @@ body.md-skin {
 }
 
 .tag-content .tag-edit .edit-value {
-  margin-top: -250px;
+  margin-top: 20px;
   position: fixed;
   width: 410px;
   min-height: 300px;

public/js/web/design.js

@@ -2,6 +2,7 @@
 var tag={
     hbisAct:0,//是否画布区域
     isClick:0,
+    step_:2,//按键移动速度
     init:function(){
        
         if($("#templateid").val()){
@@ -279,7 +280,65 @@ var tag={
         $("body").on("mousemove","textarea",function(){
                 $(this).focus()
         })
-       
+        //按住键盘上下左右键移动当前画布工具
+        $(document).keydown(function(event){
+            if(!tag.hbisAct){return;}
+            var step_=tag.step_;
+            var keyNum = event.which;   //获取键值
+            var Item = $('.huabuitem.act');   //要移动的元素
+            var width_=$(".edit-con").width(),height_=$(".edit-con").height();
+            switch(keyNum){  //判断按键
+            case 37:
+            event.preventDefault(); 
+                Item.css({left:'-='+step_+'px'});
+                var left_=Item.position().left;
+                if(left_<=0){
+                    left_=0;
+                    Item.css({left:0});
+                }
+                Item.attr("x",left_);
+                $(".tools.act .zbx").val(left_)
+            break;
+            case 38:
+                event.preventDefault(); 
+                Item.css({top:'-='+step_+'px'});
+                var left_=Item.position().top;
+                if(left_<=0){
+                    left_=0;
+                    Item.css({top:0});
+                }
+                Item.attr("y",left_);
+                $(".tools.act .zby").val(left_)
+            break;
+            case 39: 
+                event.preventDefault(); 
+                Item.css({left:'+='+step_+'px'});
+                var left_=Item.position().left;
+                if(left_>=width_-Item.width()){
+                    left_=width_-Item.width();
+                    
+                    Item.css({left:left_});
+                }
+                Item.attr("x",left_);
+                $(".tools.act .zbx").val(left_)
+                break;
+            case 40: 
+                event.preventDefault(); 
+                Item.css({top:'+='+step_+'px'});
+                var left_=Item.position().top;
+                if(left_>=height_-Item.height()){
+                    left_=height_-Item.height();
+                    Item.css({top:left_});
+                }
+                Item.attr("y",left_);
+                $(".tools.act .zby").val(left_)
+            break;
+            default:
+                break;
+            
+            }
+        });
+        
         //监听属性赋值
         $(document).on("input propertychange",".tools.act select,.tools.act input",function(){
             var ele=$(".huabuitem.act");
@@ -288,10 +347,28 @@ var tag={
             var val_=self.val();
             switch(name_) {
                 case "zbx":
+                    if(val_<0){
+                        val_=0;
+                        self.val(0)
+                    }
+                    var max_=$(".edit-con").width()-ele.width();
+                    if(val_>max_){
+                        val_=max_;
+                        self.val(max_)
+                    }
                     ele.attr("x",val_);
                     ele.css({left:Number(val_)});
                     break;
                 case "zby":
+                    if(val_<0){
+                        val_=0;
+                        self.val(0)
+                    }
+                    var max_=$(".edit-con").height()-ele.height();
+                    if(val_>max_){
+                        val_=max_;
+                        self.val(max_)
+                    }
                     ele.attr("y",val_);
                     ele.css({top:Number(val_)})
                     break;

resources/views/web/design.blade.php

@@ -52,7 +52,7 @@
            
             </div> 
             <div class="fztip">格子区域为画图区域,每个辅助格子20px*20px,从左上角开始,横向为X轴,纵向为Y轴,标尺每个刻度10px</div>
-            <div class="fztip" style="color:red;">双击删除编辑区域内标签工具！！！！！！</div>
+            <div class="fztip" ><b style="color:red;">双击删除</b> 编辑区域内标签工具,鼠标停留在画图区域,可按住<b style="color:red;">键盘上下左右键移动当前标签工具</b></div>
             <div class="fztip" ><span style="color:red;">颜色选择器,复制此处颜色可用 </span><input type="text"  id="colorpicker" /></div>
            
             <div class="edit-box fl">

resources/views/web/prints.blade.php

@@ -3,7 +3,6 @@
  
 <style>
     body{background:#fff;margin:0px;}
-    /* .edit-con{height:307px!important;} */
     .print{padding-top:20px;padding-left:15px;}
     .layui-btn{
         display: inline-block;
@@ -24,13 +23,70 @@
 <div class="print">
 {!! $item  !!}
 </div>
+<div class="print">
+{!! $item  !!}
+</div>
+<div class="print">
+{!! $item  !!}
+</div>
+<div class="print">
+{!! $item  !!}
+</div>
+<div class="print">
+{!! $item  !!}
+</div>
+<div class="print">
+{!! $item  !!}
+</div>
+<div class="print">
+{!! $item  !!}
+</div>
+<div class="print">
+{!! $item  !!}
+</div>
+<div class="print">
+{!! $item  !!}
+</div>
+<div class="print">
+{!! $item  !!}
+</div>
+<div class="print">
+{!! $item  !!}
+</div>
+<div class="print">
+{!! $item  !!}
+</div>
+<div class="print">
+{!! $item  !!}
+</div>
+<div class="print">
+{!! $item  !!}
+</div>
+<div class="print">
+{!! $item  !!}
+</div>
+<div class="print">
+{!! $item  !!}
+</div>
+<div class="print">
+{!! $item  !!}
+</div>
+<div class="print">
+{!! $item  !!}
+</div>
+<div class="print">
+{!! $item  !!}
+</div>
+<div class="print">
+{!! $item  !!}
+</div>
 @endforeach
 <script src="../../../../js/jquery-2.2.1.js"></script>
 <script type="text/javascript">
     $(function(){
         $(".print").width($(".edit-con").width());
         if($(".edit-con").height()==280){
-            $(".edit-con").css({"height":"307px"})
+            $(".edit-con").css({"height":"301px"})
         }
         $(".huabuitem[type='6'],.huabuitem[type='7']").each(function(){
             var urlo_=$(this).css("backgroundImage").replace('url(','').replace(')','');