Skip to content

Commit 3726850

Browse files
committed
refactor: 移动端布局拖动组件接近上下边界画布可以自动滚动
1 parent 1846b28 commit 3726850

File tree

5 files changed

+59
-9
lines changed

5 files changed

+59
-9
lines changed

frontend/src/components/DeDrag/index.vue

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -370,7 +370,9 @@ export default {
370370
// 鼠标移入事件
371371
mouseOn: false,
372372
// 是否移动 (如果没有移动 不需要记录snapshot)
373-
hasMove: false
373+
hasMove: false,
374+
// 上次的鼠标指针纵向位置,用来判断指针是上移还是下移
375+
latestMoveY: 0
374376
}
375377
},
376378
computed: {
@@ -543,7 +545,8 @@ export default {
543545
'canvasStyleData',
544546
'linkageSettingStatus',
545547
'mobileLayoutStatus',
546-
'componentGap'
548+
'componentGap',
549+
'scrollAutoMove'
547550
])
548551
},
549552
watch: {
@@ -646,12 +649,14 @@ export default {
646649
dragging(val) {
647650
if (this.enabled) {
648651
this.curComponent.optStatus.dragging = val
652+
this.$store.commit('setScrollAutoMove', 0)
649653
}
650654
},
651655
// private 监控dragging resizing
652656
resizing(val) {
653657
if (this.enabled) {
654658
this.curComponent.optStatus.resizing = val
659+
this.$store.commit('setScrollAutoMove', 0)
655660
}
656661
}
657662
},
@@ -724,6 +729,8 @@ export default {
724729
// 此处阻止冒泡 但是外层需要获取pageX pageY
725730
this.element.auxiliaryMatrix && this.$emit('elementMouseDown', e)
726731
this.$store.commit('setCurComponent', { component: this.element, index: this.index })
732+
// 移动端组件点击自动置顶
733+
this.mobileLayoutStatus && this.$store.commit('topComponent')
727734
eventsFor = events.mouse
728735
this.elementDown(e)
729736
},
@@ -763,6 +770,8 @@ export default {
763770
this.mouseClickPosition.bottom = this.bottom
764771
this.mouseClickPosition.width = this.width
765772
this.mouseClickPosition.height = this.height
773+
// 鼠标按下 重置上次鼠标指针位置
774+
this.latestMoveY = this.mouseClickPosition.mouseY
766775
if (this.parent) {
767776
this.bounds = this.calcDragLimits()
768777
}
@@ -997,7 +1006,13 @@ export default {
9971006
// 水平移动
9981007
const tmpDeltaX = axis && axis !== 'y' ? mouseClickPosition.mouseX - (e.touches ? e.touches[0].pageX : e.pageX) : 0
9991008
// 垂直移动
1000-
const tmpDeltaY = axis && axis !== 'x' ? mouseClickPosition.mouseY - (e.touches ? e.touches[0].pageY : e.pageY) : 0
1009+
const mY = e.touches ? e.touches[0].pageY : e.pageY
1010+
const tmpDeltaY = axis && axis !== 'x' ? mouseClickPosition.mouseY - mY : 0
1011+
// mY 鼠标指针移动的点 mY - this.latestMoveY 是计算向下移动还是向上移动
1012+
const offsetY = mY - this.latestMoveY
1013+
// console.log('mY:' + mY + ';latestMoveY=' + this.latestMoveY + ';offsetY=' + offsetY)
1014+
this.$emit('canvasDragging', mY, offsetY)
1015+
this.latestMoveY = mY
10011016
const [deltaX, deltaY] = snapToGrid(grid, tmpDeltaX, tmpDeltaY, this.scaleRatio)
10021017
const left = restrictToBounds(mouseClickPosition.left - deltaX, bounds.minLeft, bounds.maxLeft)
10031018
const top = restrictToBounds(mouseClickPosition.top - deltaY, bounds.minTop, bounds.maxTop)
@@ -1007,7 +1022,7 @@ export default {
10071022
const right = restrictToBounds(mouseClickPosition.right + deltaX, bounds.minRight, bounds.maxRight)
10081023
const bottom = restrictToBounds(mouseClickPosition.bottom + deltaY, bounds.minBottom, bounds.maxBottom)
10091024
this.left = left
1010-
this.top = top
1025+
this.top = top + this.scrollAutoMove
10111026
this.right = right
10121027
this.bottom = bottom
10131028
await this.snapCheck()

frontend/src/components/canvas/components/Editor/index.vue

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@
5555
@amRemoveItem="removeItem(item._dragId)"
5656
@amAddItem="addItemBox(item)"
5757
@linkJumpSet="linkJumpSet(item)"
58+
@canvasDragging="canvasDragging"
5859
>
5960
<component
6061
:is="item.component"
@@ -1533,6 +1534,9 @@ export default {
15331534
_this.componentData.forEach(function(data, index) {
15341535
_this.$refs.deDragRef && _this.$refs.deDragRef[index] && _this.$refs.deDragRef[index].checkParentSize()
15351536
})
1537+
},
1538+
canvasDragging(mY, offsetY) {
1539+
this.$emit('canvasDragging', mY, offsetY)
15361540
}
15371541
}
15381542
}

frontend/src/components/canvas/store/layer.js

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,6 @@ export default {
2525
// 置顶
2626
if (curComponentIndex < componentData.length - 1) {
2727
toTop(componentData, curComponentIndex)
28-
} else {
29-
toast('已经到顶了')
3028
}
3129
},
3230

frontend/src/store/index.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,8 @@ const data = {
9898
mobileLayoutStyle: {
9999
x: 300,
100100
y: 600
101-
}
101+
},
102+
scrollAutoMove: 0
102103
},
103104
mutations: {
104105
...animation.mutations,
@@ -371,6 +372,9 @@ const data = {
371372
})
372373
state.componentData = mainComponentData
373374
state.mobileLayoutStatus = !state.mobileLayoutStatus
375+
},
376+
setScrollAutoMove(state, offset) {
377+
state.scrollAutoMove = offset
374378
}
375379
},
376380
modules: {

frontend/src/views/panel/edit/index.vue

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,7 @@
126126
class="this_mobile_canvas_main"
127127
:style="mobileCanvasStyle"
128128
>
129-
<Editor v-if="mobileEditorShow" ref="editorMobile" :matrix-count="mobileMatrixCount" :out-style="outStyle" :scroll-top="scrollTop" />
129+
<Editor v-if="mobileEditorShow" id="editorMobile" ref="editorMobile" :matrix-count="mobileMatrixCount" :out-style="outStyle" :scroll-top="scrollTop" @canvasDragging="canvasDragging" />
130130
</el-row>
131131
<el-row class="this_mobile_canvas_inner_bottom">
132132
<el-col :span="12">
@@ -265,6 +265,7 @@ export default {
265265
},
266266
data() {
267267
return {
268+
autoMoveOffSet: 15,
268269
mobileEditorShow: true,
269270
hasStar: false,
270271
drawerSize: '300px',
@@ -397,7 +398,8 @@ export default {
397398
'mobileLayoutStatus',
398399
'pcMatrixCount',
399400
'mobileMatrixCount',
400-
'mobileLayoutStyle'
401+
'mobileLayoutStyle',
402+
'scrollAutoMove'
401403
])
402404
},
403405
@@ -881,6 +883,33 @@ export default {
881883
},
882884
sureStatusChange(status) {
883885
this.enableSureButton = status
886+
},
887+
canvasDragging(mY, offsetY) {
888+
if (this.curComponent && this.curComponent.optStatus.dragging) {
889+
// 触发滚动的区域偏移量
890+
const touchOffset = 100
891+
const canvasInfoMobile = document.getElementById('canvasInfoMobile')
892+
// 获取子盒子(高度肯定比父盒子大)
893+
// const editorMobile = document.getElementById('editorMobile')
894+
// 画布区顶部到浏览器顶部距离
895+
const canvasTop = canvasInfoMobile.offsetTop + 75
896+
// 画布区有高度
897+
const canvasHeight = canvasInfoMobile.offsetHeight
898+
// 画布区域底部距离浏览器顶部距离
899+
const canvasBottom = canvasTop + canvasHeight
900+
if (mY > (canvasBottom - touchOffset) && offsetY > 0) {
901+
// 触发底部滚动
902+
this.scrollMove(this.autoMoveOffSet)
903+
} else if (mY < (canvasTop + touchOffset) && offsetY < 0) {
904+
// 触发顶部滚动
905+
this.scrollMove(-this.autoMoveOffSet)
906+
}
907+
}
908+
},
909+
scrollMove(offset) {
910+
const canvasInfoMobile = document.getElementById('canvasInfoMobile')
911+
canvasInfoMobile.scrollTop = canvasInfoMobile.scrollTop + offset
912+
this.$store.commit('setScrollAutoMove', this.scrollAutoMove + offset)
884913
}
885914
}
886915
}

0 commit comments

Comments
 (0)