feat: 拖拽布局-画布固定1920*1080,缩放一倍

master
lichaojun 2 weeks ago
parent 12e9833c08
commit bb6c104fcd

@ -149,10 +149,14 @@ html {
position: relative; position: relative;
overflow-y: auto; overflow-y: auto;
padding: 10px; padding: 10px;
display: flex;
align-items: center;
justify-content: center;
} }
.grid-stack { .grid-stack {
background-color: #f9fafb; background-color: #f9fafb;
border-radius: 8px; border-radius: 8px;
width: 960px;
} }
.grid-stack-item-content { .grid-stack-item-content {
cursor: pointer; cursor: pointer;

@ -2,7 +2,7 @@
let initData = null; let initData = null;
let grid = null; let grid = null;
let currentComponent = null; let currentComponent = null;
let cellHeight = 40; let cellHeight = 60;
// 生成唯一id // 生成唯一id
var generateUniqueId = function () { var generateUniqueId = function () {
@ -36,8 +36,9 @@
// 一行高度 // 一行高度
cellHeight, cellHeight,
// 间距 // 间距
margin: 5, margin: 0,
minRow: Math.floor(($(window).height() - 80) / cellHeight), minRow: Math.floor(1080 / 2 / cellHeight),
maxRow: Math.floor(1080 / 2 / cellHeight),
acceptWidgets: true, acceptWidgets: true,
float: true, float: true,
removable: '#trash', removable: '#trash',
@ -48,7 +49,7 @@
GridStack.setupDragIn('#components-panel .component-item', undefined, [ GridStack.setupDragIn('#components-panel .component-item', undefined, [
{ {
w: 2, w: 2,
h: 4, h: 2,
type: 'image', type: 'image',
name: '图片', name: '图片',
image: '', image: '',
@ -62,7 +63,7 @@
}, },
{ {
w: 2, w: 2,
h: 2, h: 1,
type: 'text', type: 'text',
childrenType: '', childrenType: '',
name: '文本', name: '文本',
@ -302,7 +303,7 @@
item.xCopy = item.x; item.xCopy = item.x;
item.x = item.x * (1920 / 12); item.x = item.x * (1920 / 12);
item.yCopy = item.y; item.yCopy = item.y;
item.y = item.y * cellHeight; item.y = item.y * cellHeight * 2;
item.wCopy = item.w; item.wCopy = item.w;
item.w = item.w * (1920 / 12); item.w = item.w * (1920 / 12);
@ -310,7 +311,7 @@
item.h = 1; item.h = 1;
} }
item.hCopy = item.h; item.hCopy = item.h;
item.h = item.h * cellHeight; item.h = item.h * cellHeight * 2;
}); });
console.log(initDataCopy); console.log(initDataCopy);
return initDataCopy; return initDataCopy;

Loading…
Cancel
Save