|
|
@@ -105,19 +105,22 @@ export default function useDrag(
|
|
|
|
|
|
// 拖动
|
|
|
function drag(el: HTMLElement, parentElement: HTMLElement, pos: Ref<posType>) {
|
|
|
- function mousedown(e: MouseEvent) {
|
|
|
+ function onDown(e: MouseEvent | TouchEvent) {
|
|
|
+ const isTouchEv = isTouchEvent(e);
|
|
|
+ const event = isTouchEv ? e.touches[0] : e;
|
|
|
const parentElementRect = parentElement.getBoundingClientRect();
|
|
|
- const downX = e.clientX;
|
|
|
- const downY = e.clientY;
|
|
|
+ const downX = event.clientX;
|
|
|
+ const downY = event.clientY;
|
|
|
const clientWidth = document.documentElement.clientWidth;
|
|
|
const clientHeight = document.documentElement.clientHeight;
|
|
|
const maxLeft = clientWidth - parentElementRect.width;
|
|
|
const maxTop = clientHeight - parentElementRect.height;
|
|
|
const minLeft = 0;
|
|
|
const minTop = 0;
|
|
|
- function onMousemove(e: MouseEvent) {
|
|
|
- let moveX = parentElementRect.left + (e.clientX - downX);
|
|
|
- let moveY = parentElementRect.top + (e.clientY - downY);
|
|
|
+ function onMove(e: MouseEvent | TouchEvent) {
|
|
|
+ const event = isTouchEvent(e) ? e.touches[0] : e;
|
|
|
+ let moveX = parentElementRect.left + (event.clientX - downX);
|
|
|
+ let moveY = parentElementRect.top + (event.clientY - downY);
|
|
|
moveX = moveX < minLeft ? minLeft : moveX > maxLeft ? maxLeft : moveX;
|
|
|
moveY = moveY < minTop ? minTop : moveY > maxTop ? maxTop : moveY;
|
|
|
pos.value = {
|
|
|
@@ -125,16 +128,23 @@ function drag(el: HTMLElement, parentElement: HTMLElement, pos: Ref<posType>) {
|
|
|
left: moveX
|
|
|
};
|
|
|
}
|
|
|
- function onMouseup() {
|
|
|
- document.removeEventListener('mousemove', onMousemove);
|
|
|
- document.removeEventListener('mouseup', onMouseup);
|
|
|
+ function onUp() {
|
|
|
+ document.removeEventListener(
|
|
|
+ isTouchEv ? 'touchmove' : 'mousemove',
|
|
|
+ onMove
|
|
|
+ );
|
|
|
+ document.removeEventListener(isTouchEv ? 'touchend' : 'mouseup', onUp);
|
|
|
}
|
|
|
- document.addEventListener('mousemove', onMousemove);
|
|
|
- document.addEventListener('mouseup', onMouseup);
|
|
|
+ document.addEventListener(isTouchEv ? 'touchmove' : 'mousemove', onMove);
|
|
|
+ document.addEventListener(isTouchEv ? 'touchend' : 'mouseup', onUp);
|
|
|
}
|
|
|
- el.addEventListener('mousedown', mousedown);
|
|
|
+ el.addEventListener('mousedown', onDown);
|
|
|
+ el.addEventListener('touchstart', onDown);
|
|
|
}
|
|
|
|
|
|
+function isTouchEvent(e: MouseEvent | TouchEvent): e is TouchEvent {
|
|
|
+ return window.TouchEvent && e instanceof window.TouchEvent;
|
|
|
+}
|
|
|
// 缓存
|
|
|
const localStorageName = 'dragCachePos';
|
|
|
function getCachePos(useIdDargClass: string): null | undefined | posType {
|
