移动,缩放组件适配触摸事件

This commit is contained in:
fangxiang 2022-04-15 11:24:27 +08:00
parent 2c003be8e7
commit f76e31ef5a
4 changed files with 116 additions and 25 deletions

View File

@ -1,10 +0,0 @@
<template>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
name:'vue3ResizeDragCanvas'
})
</script>

View File

@ -1,5 +1,3 @@
import { ref, reactive } from "vue";
import { styleIf } from "../../../types/style";
// 外层元素点击拖拽
const itemDrag = (
ev: any,
@ -21,14 +19,22 @@ const itemDrag = (
});
if (!props.isDraggable) return;
//鼠标按下并移动的事件
document.onmousemove = (e: any) => {
if (e.movementX || e.movementY) {
interface IMoveParam {
movementX: number;
movementY: number;
clientX: number;
clientY: number;
}
const onmove = (param: any) => {
if (param.movementX || param.movementY) {
moveing.value = true;
let offset_left = press_x - e.clientX;
let offset_top = press_y - e.clientY;
press_x = e.clientX;
press_y = e.clientY;
let offset_left = press_x - param.clientX;
let offset_top = press_y - param.clientY;
press_x = param.clientX;
press_y = param.clientY;
//绑定元素位置到positionX和positionY上面
@ -38,13 +44,31 @@ const itemDrag = (
emit("moveHandler", {
// 移动事件回调
el: target,
e,
param,
top: style.top,
left: style.left,
});
}
};
document.onmouseup = (e: any) => {
document.onmousemove = (e: any) => {
onmove(e);
};
if ("ontouchmove" in document.documentElement === true) {
document.ontouchmove = (e: TouchEvent) => {
if (e.changedTouches && e.changedTouches.length) {
onmove({
movementX: 1,
movementY: 1,
clientX: e.changedTouches[0].clientX,
clientY: e.changedTouches[0].clientY,
});
}
};
}
const onmoveend = (e: any) => {
moveing.value = false;
if (style.left == style.back_left && style.top == style.back_top) {
style.left = style.back_left;
@ -61,6 +85,17 @@ const itemDrag = (
document.onmousemove = null;
document.onmouseup = null;
if ("ontouchmove" in document.documentElement === true) {
document.ontouchmove = null;
}
if ("ontouchend" in document.documentElement === true) {
document.ontouchend = null;
}
};
document.onmouseup = onmoveend;
if ("ontouchend" in document.documentElement === true) {
document.ontouchend = (e) => onmoveend(e);
}
};
export default itemDrag;

View File

@ -16,7 +16,15 @@ const itemResize = (
let top: number = 0;
let left: number = 0;
// 鼠标拖拽改变元素大小
document.onmousemove = (e) => {
interface IMoveParam {
movementX: number;
movementY: number;
clientY: number;
clientX: number;
}
const onmove = (e: IMoveParam) => {
if (e.movementX || e.movementY) {
move_flag = true;
switch (cls) {
@ -91,7 +99,21 @@ const itemResize = (
}
};
document.onmouseup = (e: any) => {
document.onmousemove = onmove;
if ("ontouchmove" in document.documentElement === true) {
document.ontouchmove = (e: TouchEvent) => {
if (e.changedTouches && e.changedTouches.length) {
onmove({
movementX: 1,
movementY: 1,
clientX: e.changedTouches[0].clientX,
clientY: e.changedTouches[0].clientY,
});
}
};
}
const onmoveend = (e: any) => {
if (!move_flag) {
style.left = style.back_left;
style.top = style.back_top;
@ -108,6 +130,17 @@ const itemResize = (
}
document.onmousemove = null;
document.onmouseup = null;
if ("ontouchmove" in document.documentElement === true) {
document.ontouchmove = null;
}
if ("ontouchend" in document.documentElement === true) {
document.ontouchend = null;
}
};
document.onmouseup = onmoveend;
if ("ontouchend" in document.documentElement === true) {
document.ontouchend = (e) => onmoveend(e);
}
};
export default itemResize;

View File

@ -1,5 +1,10 @@
<template>
<div class="vue3-resize-drag" :style="styleHandler" @mousedown="itemDown">
<div
class="vue3-resize-drag"
:style="styleHandler"
@mousedown="itemDown"
@touchstart="itemTouch"
>
<slot></slot>
<div v-if="isRotate" class="rotate-icon" @mousedown="itemRotate"></div>
<!-- 组件移动辅助线 -->
@ -18,6 +23,7 @@
class="dragElResizeIcon"
:class="el.class"
@mousedown="itemResize($event, el.class, index)"
@touchstart="itemResizeTouch($event, el.class, index)"
:style="el.style"
></div>
</div>
@ -49,7 +55,8 @@ export default defineComponent({
// -----------------------------------------------------------------------------------------------
watchProps(props, style);
const itemResize = (ev: any, cls: string, index: number) => {
const onItemResize = (ev: any, cls: string, index: number) => {
//
style.back_top = style.top;
style.back_height = style.height;
@ -57,11 +64,21 @@ export default defineComponent({
style.back_width = style.width;
itemResizeFn(ev, cls, index, emit, style);
};
const itemResizeTouch = (ev: any, cls: string, index: number) => {
onItemResize(ev, cls, index);
};
const itemResize = (ev: any, cls: string, index: number) => {
onItemResize(ev, cls, index);
};
const itemRotate = (ev: any) => {
//
itemRotateFn(ev, emit, style);
};
const itemDown = (ev: any) => {
const onItemSelect = (ev: any) => {
if (!props.isActive) {
return;
}
@ -75,13 +92,29 @@ export default defineComponent({
style.back_width = style.width;
itemDrag(ev, emit, props, style, moveing);
};
const itemTouch = (ev: TouchEvent) => {
if (ev.changedTouches && ev.changedTouches.length) {
(ev as any).clientX = ev.changedTouches[0].clientX;
(ev as any).clientY = ev.changedTouches[0].clientY;
}
onItemSelect(ev);
};
const itemDown = (ev: any) => {
if ("touchstart" in document.documentElement === true) {
ev.return;
}
onItemSelect(ev);
};
active(props, emit); //
return {
style,
guideBaseStyle,
dragElResizeIcon,
styleHandler,
itemTouch,
itemDown,
itemResizeTouch,
itemResize,
itemRotate,
moveing,