移动,缩放组件适配触摸事件
This commit is contained in:
parent
2c003be8e7
commit
f76e31ef5a
|
@ -1,10 +0,0 @@
|
|||
<template>
|
||||
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
export default defineComponent({
|
||||
name:'vue3ResizeDragCanvas'
|
||||
})
|
||||
</script>
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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,
|
||||
|
|
Loading…
Reference in New Issue