edit

assets/manage/html/model.html

@@ -1,69 +1,87 @@
 <style>
-.layui-col-md2
+.draggable
 {
-    height: 250px;
-    border:1px solid #bababa;
-    margin:5px;
+  cursor: pointer;
 }
-.layui-table-cell
-{
-    padding: 0px 0px;
-}
-.layui-col-md2 .img
-{
-    text-align: center;overflow: hidden;text-align: center;
-}
-.price
-{
-    margin-top: -3px;
-    margin-bottom: -11px;
+
+#bg {
+  background-image:url('http://192.168.33.10/dreamland/data/upload/1/2020/11/09/d06b800db5022f9ae73dfa4de559eec7.jpg');
+  background-repeat: no-repeat;
+  background-size: contain;
+  overflow: hidden;
 }
 </style>
-<div class="layui-fluid layadmin-cmdlist-fluid">
-<!--
-  <ul class="layui-row layui-col-space30" id="sortable">
-    <li class="layui-col-md2 layui-col-sm4" id="data" style="">
-        <div class="cmdlist-container">
-            <div href="javascript:;" class="img" style="height: 154px;">
-              <img src="../../layuiadmin/style/res/template/portrait.png">
-            </div>
-            <a href="javascript:;" class="edit">
-              <div class="cmdlist-text" style="text-align:center;">
-                <p class="info">2018春夏季新款港味短款白色T恤+网纱中长款chic半身裙套装两件套</p>
-                <div class="price">
-                    <b></b>
-                </div>
+<div class="layui-fluid" style="padding: 0px;">
+  <div id="bg">
+    <div class="draggable" style="color:#fc0f0f;font-size: 16px;width: 50px;left:20px;top:20px;">微笑旋风</div>
 
-                <div class="text"></div>
-                
 
-                <div style="margin-top:10px;text-align:center;">
-                <div class="layui-table-cell"><a href="javascript:;" class="data_edit" onclick=""><button type="button" class="btn btn-info btn-rounded waves-effect waves-light m-b-5 layui-btn layui-btn-xs">内容</button></a>&nbsp;&nbsp;<a href="#" class="oper_delete"><button type="button" class="btn btn-info btn-rounded waves-effect waves-light m-b-5 layui-btn layui-btn-danger layui-btn-xs"><span class="am-icon-trash-o"></span>删除</button></a>&nbsp;&nbsp;</div>
-                </div>
-              </div>
-            </a>
-        </div>
-    </li>
-  </ul>
--->
+    <div class="draggable"  style="width: 50px;height:50px;">
+      <img src="http://192.168.33.10/dreamland/data/upload/1/2020/07/06/58802289df6119614c2095230384c2cb.jpg" style="width: 50px;height:50px;">
+    </div>
+
+  </div>
 </div>
 
 <script id="url">var url = ""</script>
 <script>
-  $( function() {
-    var sort = $( "#sortable" ).sortable({
-        opacity: 0.7,
-        stop:function(){
-          var arr = $( "#sortable" ).sortable('toArray');
-          arr = arr.join(',');
-          /*
-          $.post(url, {data:arr}, function()
-          {
+var p = 1;
+$( function() {
+  var sort = $(".draggable").draggable({
+      opacity: 0.7,
+      containment: "#bg",
+      addClasses: false,
+      stop : function(event, ui) {
+        var left = ui.position.left / p;
+        var top = ui.position.top / p;
+        $.post(url, {id:$(this).attr('data-id'),left:left,top:top}, function()
+        {
+
+        })
+      }
+  });
+
+  $('#bg').each(function() {
+    var img=$(this);
+    var url=$(this).css('backgroundImage');
+    s = url.match(/url\((.*?)\)/);
+    url =s[1];
+    if(url[0]=="\""){url = url.slice(1,-1)}
+    $("<img/>").attr("src", url).load(function() {
+        var realWidth = this.width;
+        var realHeight = this.height;
+        //如果真实的宽度大于浏览器的宽度就按照100%显示
+        //var h = 500;
+        //p = h / realHeight;
+        var h = parseInt(realHeight*p);
+        var w = parseInt(realWidth*p);
+        img.css("height", h+"px");
+        img.css("width",w+"px");
+
+        $(".draggable").each(function() {
+          var w = parseInt($(this).css("width")) * p;
+          var h = parseInt($(this).css("height")) * p;
+          $(this).css("width", w + 'px');
+          $(this).css("height", h + 'px');
+          if ($(this).find('img')) {
+            $(this).find('img').css("width", w + 'px');
+            $(this).find('img').css("height", h + 'px');
+          }
+          var l = parseInt($(this).css("left")) * p;
+          var t = parseInt($(this).css("top")) * p;
+
+          $(this).css("left", l + 'px');
+          $(this).css("top", t + 'px');
+
+          if ($(this).css("fontSize")) {
+            var f = parseInt($(this).css("fontSize")) * p;
+            $(this).css("fontSize", f + 'px');
+          }
 
-          })
-          */
-        }
+          $(this).show();
+          
+        });
     });
-    $( "#sortable" ).disableSelection();
-  } );
-  </script>
+  });
+});
+</script>

database/model.php

@@ -23,7 +23,7 @@ $position_type = array
 	6 => '上居中',
 	7 => '下居中',
 	8 => '左居中',
-	9 => '右居住',
+	9 => '右居中',
 	10 => '自定义',
 );
 
@@ -102,23 +102,36 @@ return array
 		'value'		=> array
 		(
 			'type' 		=> 'varchar-500',
-			'name' 		=> '模块默认值',
+			'name' 		=> '默认值',
 			'default' 	=> '',
-			'desc' 		=> '模块默认值',
+			'desc' 		=> '默认值',
 			'match' 	=> 'option',
 			'update'	=> 'text',
-			'search'	=> 'fulltext',
+			'show'		=> 'type=2',
+			//'list'		=> true,
+		),
+
+		'value_pic'		=> array
+		(
+			'type' 		=> 'varchar-500',
+			'name' 		=> '默认值',
+			'default' 	=> '',
+			'desc' 		=> '默认值',
+			'match' 	=> 'option',
+			'update'	=> 'image',
+			'show'		=> 'type=1',
+			'key'		=> 1,
 			//'list'		=> true,
 		),
 
 		'position_type'		=> array
 		(
 			'type' 		=> 'int-11',
-			'name' 		=> '模块位置',
-			'default' 	=> '8',
+			'name' 		=> '模块位置-废弃',
+			'default' 	=> '10',
 			'desc' 		=> '请选择模块位置',
 			'match' 	=> 'is_numeric',
-			'update'	=> 'radio',
+			//'update'	=> 'radio',
 			'option'	=> $position_type,
 			//'search'	=> 'select',
 			//'list'		=> true,
@@ -132,18 +145,18 @@ return array
 			'default' 	=> '0,0',
 			'desc' 		=> '模块定位',
 			'match' 	=> 'is_string',
-			'update'	=> 'text',
+			//'update'	=> 'text',
 			'show'		=> 'position_type=10',
 		),
 
 		'offset'		=> array
 		(
 			'type' 		=> 'varchar-32',
-			'name' 		=> '偏移量-偏移位置为left,top，如-10,-20',
+			'name' 		=> '偏移量-废弃，偏移位置为left,top，如-10,-20',
 			'default' 	=> '0,0',
 			'desc' 		=> '偏移量',
 			'match' 	=> 'is_string',
-			'update'	=> 'text',
+			//'update'	=> 'text',
 		),
 
 		'text_width'		=> array
@@ -220,7 +233,7 @@ return array
 			'default' 	=> '0',
 			'desc' 		=> '角度',
 			'match' 	=> 'is_numeric',
-			'update'	=> 'text',
+			//'update'	=> 'text',
 			'show'		=> 'type=2',
 		),
 

lib/Manage.php

@@ -0,0 +1,71 @@
+<?php
+
+namespace Poster\Lib;
+
+use Dever;
+
+class Manage
+{
+    public function update_api()
+    {
+        $id = Dever::input('id');
+        $left = Dever::input('left');
+        $top = Dever::input('top');
+
+        if ($id) {
+        	$data['where_id'] = $id;
+        	if (!$left) {
+        		$left = 0;
+        	}
+        	if (!$top) {
+        		$top = 0;
+        	}
+        	$data['position'] = $left . ',' . $top;
+            Dever::db('poster/model')->update($data);
+        }
+
+        return $id;
+    }
+
+    public function model()
+    {
+    	$where['template_id'] = Dever::input('search_option_template_id');
+
+    	$data = Dever::db('poster/model')->select($where);
+
+    	if ($data) {
+    		foreach ($data as $k => $v) {
+    			$data[$k]['content'] = '';
+    			$data[$k]['style'] = 'display:none;position:absolute;';
+
+    			if ($v['type'] == 1) {
+    				$data[$k]['content'] = '<img src="'.$v['value_pic'].'" style="width: '.$v['width'].'px;height:'.$v['height'].'px;">';
+    				$data[$k]['style'] .= 'width: '.$v['width'].'px;height:'.$v['height'].'px;';
+    			} else {
+    				if (!$v['value']) {
+    					$v['value'] = $v['name'];
+    				}
+    				$data[$k]['content'] = $v['value'];
+    				//$data[$k]['style'] .= 'width: '.$v['text_width'].'px;';
+
+    				if ($v['color']) {
+    					$data[$k]['style'] .= 'color:' . $v['color'] . ';';
+    				}
+
+    				if ($v['size']) {
+    					$data[$k]['style'] .= 'font-size:' . $v['size'] . 'px;';
+    				}
+
+    				if ($v['fonts']) {
+    					//$data[$k]['style'] .= 'font-size:' . $v['size'] . ';';
+    				}
+    			}
+
+    			$p = explode(',', $v['position']);
+    			$data[$k]['style'] .= 'left:'.$p[0].'px;top:'.$p[1].'px;'; 
+    		}
+    	}
+
+    	return $data;
+    }
+}

src/Api.php

@@ -126,9 +126,14 @@ class Api
 	{
 		$key = $value['key'];
 		$param = array();
-		if (!isset($set[$key]) && $value['value']) {
-			$set[$key] = $value['value'];
+		if (!isset($set[$key])) {
+			if ($value['type'] == 1 && $value['value_pic']) {
+				$set[$key] = Dever::local($value['value_pic']);
+			} else {
+				$set[$key] = $value['value'];
+			}
 		}
+
 		if (isset($set[$key])) {
 			if ($value['position_type'] == 10) {
 				$position = explode(',', $value['position']);
@@ -160,20 +165,29 @@ class Api
 				if (isset($value['text_width']) && $value['text_width'] > 0) {
 					$param['width'] = $value['text_width'];
 				}
-				
-
-				$fonts = array
-				(
-					//1 => 'simsun.ttc',
-					1 => 'PingFang_Regular.ttf',
-					2 => 'PingFang_Bold.ttf',
-					3 => 'PingFang_Medium.ttf',
-				);
 
-				$param['font'] = dirname(__FILE__) . DIRECTORY_SEPARATOR . '../fonts/'.$fonts[$value['fonts']];
+				$param['font'] = $this->getFont($value['fonts'], 1);
 			}
 		}
 
 		return $param;
 	}
+
+	# 字体
+	public function getFont($value, $type = 1)
+	{
+		$fonts = array
+		(
+			//1 => 'simsun.ttc',
+			1 => 'PingFang_Regular.ttf',
+			2 => 'PingFang_Bold.ttf',
+			3 => 'PingFang_Medium.ttf',
+		);
+
+		if ($type == 1) {
+			return dirname(__FILE__) . DIRECTORY_SEPARATOR . '../fonts/'.$fonts[$value];
+		} else {
+			return dirname(__FILE__) . DIRECTORY_SEPARATOR . '../fonts/'.$fonts[$value];
+		}
+	}
 }

template/manage/model.php

@@ -9,6 +9,22 @@ $view
 
 ->fetch('.layui-fluid@test', '公告')
 
+->fetch('#url', 'var url="<{Dever::url("poster/lib/manage.update")}>"')
+
+->loop
+(
+    '.draggable',
+    'poster/lib/manage.model',
+    array
+    (
+        'self' => array
+        (
+            'style' => '<{$v.style}>',
+            'html' => '<{$v.content}>',
+            'data-id' => '<{$v.id}>',
+        ),
+    )
+)
 
 # display
 ->display();