添加触摸事件优先级变量
This commit is contained in:
parent
f76e31ef5a
commit
c76d964ffd
|
@ -55,17 +55,19 @@ const itemDrag = (
|
||||||
onmove(e);
|
onmove(e);
|
||||||
};
|
};
|
||||||
|
|
||||||
if ("ontouchmove" in document.documentElement === true) {
|
if ((<any>window).touchPriority) {
|
||||||
document.ontouchmove = (e: TouchEvent) => {
|
if ("ontouchmove" in document.documentElement === true) {
|
||||||
if (e.changedTouches && e.changedTouches.length) {
|
document.ontouchmove = (e: TouchEvent) => {
|
||||||
onmove({
|
if (e.changedTouches && e.changedTouches.length) {
|
||||||
movementX: 1,
|
onmove({
|
||||||
movementY: 1,
|
movementX: 1,
|
||||||
clientX: e.changedTouches[0].clientX,
|
movementY: 1,
|
||||||
clientY: e.changedTouches[0].clientY,
|
clientX: e.changedTouches[0].clientX,
|
||||||
});
|
clientY: e.changedTouches[0].clientY,
|
||||||
}
|
});
|
||||||
};
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const onmoveend = (e: any) => {
|
const onmoveend = (e: any) => {
|
||||||
|
@ -94,8 +96,10 @@ const itemDrag = (
|
||||||
};
|
};
|
||||||
|
|
||||||
document.onmouseup = onmoveend;
|
document.onmouseup = onmoveend;
|
||||||
if ("ontouchend" in document.documentElement === true) {
|
if ((<any>window).touchPriority) {
|
||||||
document.ontouchend = (e) => onmoveend(e);
|
if ("ontouchend" in document.documentElement === true) {
|
||||||
|
document.ontouchend = (e) => onmoveend(e);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
export default itemDrag;
|
export default itemDrag;
|
||||||
|
|
|
@ -30,78 +30,84 @@ function render(props: any) {
|
||||||
transform: `rotate(${style.rotate}deg)`,
|
transform: `rotate(${style.rotate}deg)`,
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// pad 放大拖拽的点
|
||||||
|
let targetResizeIconSize = props.resizeIconSize;
|
||||||
|
if ((<any>window).isPad) {
|
||||||
|
targetResizeIconSize *= 1.5;
|
||||||
|
}
|
||||||
const dragElResizeIcon = computed(() => {
|
const dragElResizeIcon = computed(() => {
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
class: "drag-lt",
|
class: "drag-lt",
|
||||||
style: {
|
style: {
|
||||||
top: -(props.resizeIconSize / 2) + "px",
|
top: -(targetResizeIconSize / 2) + "px",
|
||||||
left: -(props.resizeIconSize / 2) + "px",
|
left: -(targetResizeIconSize / 2) + "px",
|
||||||
width: props.resizeIconSize + "px",
|
width: targetResizeIconSize + "px",
|
||||||
height: props.resizeIconSize + "px",
|
height: targetResizeIconSize + "px",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
class: "drag-ct",
|
class: "drag-ct",
|
||||||
style: {
|
style: {
|
||||||
top: -(props.resizeIconSize / 2) + "px",
|
top: -(targetResizeIconSize / 2) + "px",
|
||||||
left: <number>style.width / 2 - props.resizeIconSize / 2 + "px",
|
left: <number>style.width / 2 - targetResizeIconSize / 2 + "px",
|
||||||
width: props.resizeIconSize + "px",
|
width: targetResizeIconSize + "px",
|
||||||
height: props.resizeIconSize + "px",
|
height: targetResizeIconSize + "px",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
class: "drag-rt",
|
class: "drag-rt",
|
||||||
style: {
|
style: {
|
||||||
top: -(props.resizeIconSize / 2) + "px",
|
top: -(targetResizeIconSize / 2) + "px",
|
||||||
right: -(props.resizeIconSize / 2) + "px",
|
right: -(targetResizeIconSize / 2) + "px",
|
||||||
width: props.resizeIconSize + "px",
|
width: targetResizeIconSize + "px",
|
||||||
height: props.resizeIconSize + "px",
|
height: targetResizeIconSize + "px",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
class: "drag-rc",
|
class: "drag-rc",
|
||||||
style: {
|
style: {
|
||||||
top: <number>style.height / 2 - props.resizeIconSize / 2 + "px",
|
top: <number>style.height / 2 - targetResizeIconSize / 2 + "px",
|
||||||
right: -(props.resizeIconSize / 2) + "px",
|
right: -(targetResizeIconSize / 2) + "px",
|
||||||
width: props.resizeIconSize + "px",
|
width: targetResizeIconSize + "px",
|
||||||
height: props.resizeIconSize + "px",
|
height: targetResizeIconSize + "px",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
class: "drag-rb",
|
class: "drag-rb",
|
||||||
style: {
|
style: {
|
||||||
bottom: -(props.resizeIconSize / 2) + "px",
|
bottom: -(targetResizeIconSize / 2) + "px",
|
||||||
right: -(props.resizeIconSize / 2) + "px",
|
right: -(targetResizeIconSize / 2) + "px",
|
||||||
width: props.resizeIconSize + "px",
|
width: targetResizeIconSize + "px",
|
||||||
height: props.resizeIconSize + "px",
|
height: targetResizeIconSize + "px",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
class: "drag-bc",
|
class: "drag-bc",
|
||||||
style: {
|
style: {
|
||||||
bottom: -(props.resizeIconSize / 2) + "px",
|
bottom: -(targetResizeIconSize / 2) + "px",
|
||||||
left: <number>style.width / 2 - props.resizeIconSize / 2 + "px",
|
left: <number>style.width / 2 - targetResizeIconSize / 2 + "px",
|
||||||
width: props.resizeIconSize + "px",
|
width: targetResizeIconSize + "px",
|
||||||
height: props.resizeIconSize + "px",
|
height: targetResizeIconSize + "px",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
class: "drag-lb",
|
class: "drag-lb",
|
||||||
style: {
|
style: {
|
||||||
bottom: -(props.resizeIconSize / 2) + "px",
|
bottom: -(targetResizeIconSize / 2) + "px",
|
||||||
left: -(props.resizeIconSize / 2) + "px",
|
left: -(targetResizeIconSize / 2) + "px",
|
||||||
width: props.resizeIconSize + "px",
|
width: targetResizeIconSize + "px",
|
||||||
height: props.resizeIconSize + "px",
|
height: targetResizeIconSize + "px",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
class: "drag-lc",
|
class: "drag-lc",
|
||||||
style: {
|
style: {
|
||||||
top: <number>style.height / 2 - props.resizeIconSize / 2 + "px",
|
top: <number>style.height / 2 - targetResizeIconSize / 2 + "px",
|
||||||
left: -(props.resizeIconSize / 2) + "px",
|
left: -(targetResizeIconSize / 2) + "px",
|
||||||
width: props.resizeIconSize + "px",
|
width: targetResizeIconSize + "px",
|
||||||
height: props.resizeIconSize + "px",
|
height: targetResizeIconSize + "px",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
|
|
|
@ -100,17 +100,19 @@ const itemResize = (
|
||||||
};
|
};
|
||||||
|
|
||||||
document.onmousemove = onmove;
|
document.onmousemove = onmove;
|
||||||
if ("ontouchmove" in document.documentElement === true) {
|
if ((<any>window).touchPriority) {
|
||||||
document.ontouchmove = (e: TouchEvent) => {
|
if ("ontouchmove" in document.documentElement === true) {
|
||||||
if (e.changedTouches && e.changedTouches.length) {
|
document.ontouchmove = (e: TouchEvent) => {
|
||||||
onmove({
|
if (e.changedTouches && e.changedTouches.length) {
|
||||||
movementX: 1,
|
onmove({
|
||||||
movementY: 1,
|
movementX: 1,
|
||||||
clientX: e.changedTouches[0].clientX,
|
movementY: 1,
|
||||||
clientY: e.changedTouches[0].clientY,
|
clientX: e.changedTouches[0].clientX,
|
||||||
});
|
clientY: e.changedTouches[0].clientY,
|
||||||
}
|
});
|
||||||
};
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const onmoveend = (e: any) => {
|
const onmoveend = (e: any) => {
|
||||||
|
@ -139,8 +141,10 @@ const itemResize = (
|
||||||
};
|
};
|
||||||
|
|
||||||
document.onmouseup = onmoveend;
|
document.onmouseup = onmoveend;
|
||||||
if ("ontouchend" in document.documentElement === true) {
|
if ((<any>window).touchPriority) {
|
||||||
document.ontouchend = (e) => onmoveend(e);
|
if ("ontouchend" in document.documentElement === true) {
|
||||||
|
document.ontouchend = (e) => onmoveend(e);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
export default itemResize;
|
export default itemResize;
|
||||||
|
|
|
@ -31,7 +31,6 @@
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { computed, defineComponent, reactive, ref, watch } from "vue";
|
import { computed, defineComponent, reactive, ref, watch } from "vue";
|
||||||
import { styleIf } from "../../types/style";
|
|
||||||
import renderFn from "./func/renderData";
|
import renderFn from "./func/renderData";
|
||||||
import props from "./func/props";
|
import props from "./func/props";
|
||||||
import watchProps from "./func/watchProps";
|
import watchProps from "./func/watchProps";
|
||||||
|
@ -93,16 +92,18 @@ export default defineComponent({
|
||||||
itemDrag(ev, emit, props, style, moveing);
|
itemDrag(ev, emit, props, style, moveing);
|
||||||
};
|
};
|
||||||
const itemTouch = (ev: TouchEvent) => {
|
const itemTouch = (ev: TouchEvent) => {
|
||||||
if (ev.changedTouches && ev.changedTouches.length) {
|
if ((<any>window).touchPriority) {
|
||||||
(ev as any).clientX = ev.changedTouches[0].clientX;
|
if (ev.changedTouches && ev.changedTouches.length) {
|
||||||
(ev as any).clientY = ev.changedTouches[0].clientY;
|
(ev as any).clientX = ev.changedTouches[0].clientX;
|
||||||
|
(ev as any).clientY = ev.changedTouches[0].clientY;
|
||||||
|
}
|
||||||
|
onItemSelect(ev);
|
||||||
}
|
}
|
||||||
onItemSelect(ev);
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const itemDown = (ev: any) => {
|
const itemDown = (ev: any) => {
|
||||||
if ("touchstart" in document.documentElement === true) {
|
if ((<any>window).touchPriority) {
|
||||||
ev.return;
|
return;
|
||||||
}
|
}
|
||||||
onItemSelect(ev);
|
onItemSelect(ev);
|
||||||
};
|
};
|
||||||
|
|
Loading…
Reference in New Issue