一个有趣的交互效果的实现

站长

2022年11月08日 10:18 · 阅读数 31

一个有趣的交互效果的实现

本文正在参加「金石计划 . 瓜分6万现金大奖」。

效果分析

最近在做项目，碰到了这样一个需求，就是页面有一个元素，这个元素可以在限定的区域内进行拖拽，拖拽完成吸附到左边或者右边，并且在滚动页面的时候，这个元素要半隐状态，停止滚动的时候恢复到原来的位置。如图所示:

一个有趣的交互效果的实现

根据视频所展示的效果，我们得出了我们需要实现的效果主要有2个部分:

拖拽并吸附
滚动半隐元素

那么如何实现这2个效果呢？我们一个效果一个效果的来分析。

ps: 由于这里采用的是react技术栈，所以这里以react作为讲解

首先对于第一个效果，我们要想实现拖拽，有2种方式，第一种就是html5提供的拖拽api，还有一种就是监听鼠标的mousedown,mousemove和mouseup事件，由于这里兼容的移动端，所以我采用的是第二种实现方法。

思路是有了，接下来我想的就是将这三个事件封装一下，写成一个hook函数，这样方便调用，也方便扩展。

对于拖拽的实现，我们只需要在鼠标按下的时候，记录一下横坐标x和纵坐标y，在鼠标拖动的时候用当前拖动的横坐标x和横坐标y去与鼠标按下的时候的横坐标x与y坐标相减就可以得到拖动的偏移坐标，而这个偏移坐标就是我们最终要使用到的坐标。

在鼠标按下的时候，我们还需要减去元素本身所在的left偏移和top偏移，这样计算出来的坐标才是正确的。

然后，由于元素需要通过设置偏移来改变位置，因此我们需要将元素脱离文档流，换句话说就是元素使用定位，这里我采用的是固定定位。

hooks函数的实现

基于以上思路，一个任意拖拽功能实现的hooks函数就结构就成型了。

当然由于我们需要限定范围，这时候我们可以思考会有2个方向上的限定，即水平方向和垂直方向上的限定。除此之外，我们还需要提供一个默认的坐标值，也就是说元素默认应该是在哪个位置上。现在我们用伪代码来表示一下这个函数的结构，代码如下:

const useLimitDrag = (el,options,container) => {
    //核心代码
}
export default useLimitDrag;

参数类型

这个hooks函数有3个参数，第一个参数自然是需要拖拽的元素，第二个参数则是配置对象，而第三个参数则是限定的容器元素。拖拽的元素和容器元素都是属于dom元素，在react中，我们还可以传递ref来表示一个dom元素，所以这两个参数，我们可以约定一下类型定义。我们先来定义元素的类型如下:

export type ElementType = Element | HTMLElement | null;

dom元素的类型就是Element | HTMLElement这2个类型，现在我们知道react的ref可以传递dom元素，并且我们还可以传入一个函数当作参数，所以基于这个类型，我们又额外的扩展了参数的类型，也方便配置。让我们继续写下如下代码:

import type { RefObject } from 'react';
export type RefElementType = RefObject<ElementType>;
export type FunctionElementType = () => ElementType;

这样el和container元素的类型就一目了然，我们再定义一个类型简单合并一下这两个类型，代码如下:

export type ParamType = RefElementType | FunctionElementType;

接下来，让我们看配置对象，配置对象主要有2个地方，第一个就是默认值，第二个则是限定方向，因此我们约定了3个参数，islimitX,isLimitY,defaultPosition，并且配置对象都应该是可选的，我们可以使用Partial内置泛型将这个类型包裹一下，ok，来看看代码吧。

export type OptionType = Partial<{
    isLimitX: boolean,
    isLimitY: boolean,
    defaultPosition: {
        x: number,
        y: number
    }
}>;

嗯现在，我们可以修改一下以上的核心函数了，代码如下:

const useLimitDrag = (el: ParamType,options: OptionType,container?: ParamType)  => {
    //核心代码
}
export default useLimitDrag;

返回值类型

下一步，我们需要确定我们返回的值，首先肯定是当前被计算出来的x和y坐标，其次由于我们这个需求还有一个吸附效果，这个吸附效果是什么意思呢？就是说，以屏幕的中间作为划分界限为左右两部分，当拖动的x坐标大于中间，那么就吸附到最右边，否则就吸附到最左边。

根据这个需求，我们可以将坐标分为最大x坐标，最小x坐标以及中间的x坐标,当然由于需求只提到了水平方向上的吸附，垂直方向上并没有，但是为了考虑扩展，与之对应的我们同样要分成最大y坐标，最小y坐标以及中间的y坐标。

最后，我们还可以返回一个是否正在拖动中，方便我们做额外的操作。根据描述，以上的代码我们也就可以构造如下:

export type PositionType = Partial<{ x: number, y: number, isMove: boolean, maxX: number, maxY: number, minX: number, minY: number, centerX: number, centerY: number }>;
// 
const useLimitDrag = (el: ParamType,options: OptionType,container?: ParamType): PositionType  => {
    //核心代码
}
export default useLimitDrag;

核心代码实现第一步---判断当前环境

最基本的结构搭建好了，接下来第一步，我们要做什么？首先当然是判断当前环境是否表示移动端啊。那么如何判断呢？浏览器提供了一个navigator对象，通过这个对象的userAgent属性我们就可以判断，这个属性是一个很长的字符串，但是我们可以从其中一些值看出一些端倪，在移动端的环境中，通常都会看到iPhone|iPod|Android|ios这些字符串值，比如在iphone手机中就会有iPhone字符串，同理android也是。所以我们就可以通过写一个正则表达式来匹配这些字符串，如果有这些字符串就代表是移动端环境，否则就是pc浏览器环境，代码如下:

const isMobile = navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i);

我们为什么要判断是否是移动端环境？因为在移动端环境，我们通常监听的是触摸事件，即touchstart,touchmove与touchend，而非mousedown,mousemove和mouseup。所以下一行代码自然就是定义好事件呢。如下:

const eventType = isMobile ? ['touchstart', 'touchmove', 'touchend'] : ['mousedown', 'mousemove', 'mouseup'];

核心代码实现第二步---一些初始化工作

下一步，我们通过useRef方法来存储拖拽元素和限定拖拽容器元素。代码如下:

const element = useRef<ElementType>();
const containerElement = useRef<ElementType>();

接着我们获取配置对象的值，然后我们定义最大边界的值，代码如下:

const { isLimitX, isLimitY,defaultPosition } = option;
const globalWidthHeight = {
    offsetWidth: window.innerWidth,
    offsetHeight: window.innerHeight
}

随后，我们用一个变量代表鼠标是否按下的状态，这样做的目的是让拖拽变得更丝滑流畅一些，而不容易出问题，然后我们用useState定义返回的值，再定义一个对象存储鼠标按下时的x坐标和y坐标的值。代码如下:

let isStart = false;
const [position, setPosition] = useState<PositionType>({
    x: defaultPosition?.x,
    y: defaultPosition?.y,
    maxX: 0,
    maxY: 0,
    centerX: 0,
    centerY: 0,
    minX: 0,
    minY: 0
});
const [isMove, setIsMove] = useState(false);
const downPosition = {
    x:0,
    y:0
}

另外为了确保拖动在限定区域内，我们需要设置滚动截断的样式，让元素不能在出现滚动条后还能拖动，因为这样会出现问题。我们定义一个方法用来设置，代码如下:

const setOverflow = () => {
    const limitEle = (containerElement.current || document.body) as HTMLElement;
    if (isLimitX) {
        limitEle.style.overflowX = 'hidden';
    } else {
        limitEle.style.overflowX = '';
    }
    if (isLimitY) {
        limitEle.style.overflowY = 'hidden';
    } else {
        limitEle.style.overflowY = '';
    }
}

这个方法也就比较好理解了，如果使用的时候传入isLimitX那么就设置overflowX为hidden，否则不设置，y方向同理。

核心代码的实现第三步---监听事件

接下来，我们在react的钩子函数中监听事件，此时有了一个选择就是钩子函数我们使用useEffect还是useLayoutEffect呢？要决定使用哪个，我们需要知道这两个钩子函数的区别，这个超出了本文范围，不提及，可以查阅相关资料了解，这里我选择的是useLayoutEffect。

在钩子函数的回调函数中，我们首先将拖拽元素和容器元素存储下来，然后如果拖拽元素不存在，我们就不执行后续事件，回调函数返回一个函数，在该函数中我们移除对应的事件。代码如下:

useLayoutEffect(() => {
    element.current = typeof el === 'function' ? el() : el.current;
    containerElement.current = typeof containerRef === 'function' ? containerRef() : containerRef?.current;
    if (!element.current) {
        return;
    }
    element.current.addEventListener(eventType[0], onStartHandler);
    return () => {
        element.current?.removeEventListener(eventType[0], onStartHandler);
    }
}, []);

核心代码实现第四步---拖动开始事件回调

接下来，我们来看一下onStartHandler函数的实现，在这个函数中，我们主要其实就是存储按下时候的坐标值，并且设置状态以及拖拽元素的鼠标样式和滚动截断的样式，随后当然是监听拖动和拖动结束事件，代码如下:

const onStartHandler = useCallback((e:Event) => {
    isStart = true;
    const target = element.current as HTMLElement;
    if (target) {
        target.style.cursor = 'move';
    } 
    const event: Touch | MouseEvent = e instanceof TouchEvent ? e.changedTouches[0] : e as MouseEvent;
    const { clientX, clientY } = event;
    downPosition.x = clientX - target.offsetLeft;
    downPosition.y = clientY - target.offsetTop;
    setOverflow();
    window.addEventListener(eventType[1], onMoveHandler);
    window.addEventListener(eventType[2], onUpHandler);
}, []);

pc端是可以直接从事件对象中拿出来坐标，可是在移动端我们要通过一个changedTouches属性，这个属性是一个伪数组，第一项就是我们要获取到的坐标值。

接下来就是拖动事件的回调函数以及拖动结束的回调函数的实现了。

核心代码实现第五步---拖动事件回调

这是一个最核心实现的回调，我们在这个函数当中是要计算坐标的，首先当然是根据isStart状态来确定是否执行后续逻辑，其次，还要获取到当前拖拽元素，因为我们要根据这个拖拽元素的宽高做坐标的计算，另外还要获取到容器元素，如果没有提供容器元素，那么就是我们最开始定义的globalWidthHeight中取，然后获取鼠标按下时的x和y坐标值，将当前移动的x坐标和y坐标分别与按下时相减，就是我们的移动x坐标和y坐标，如果有设置isLimitX和isLimitY,我们还要额外设置滚动截断样式，并且我们通过将0和moveX以及最大值（也就是屏幕或者是容器元素的宽高减去拖拽元素的宽高）得到我们的最终的moveX和moveY值。

最后，我们将最终的moveX和moveY用react的状态存储起来即可。代码如下:

const onMoveHandler = useCallback((e: Event) => {
    if (!isStart) {
        return;
    }
    setOverflow();
    const event: Touch | MouseEvent = e instanceof TouchEvent ? e.changedTouches[0] : e as MouseEvent;
    const { clientX, clientY } = event;
    if (!element.current) {
        return;
    }
    const { offsetWidth, offsetHeight} = element.current as HTMLElement;
    const { offsetWidth: containerWidth, offsetHeight: containerHeight } = (containerElement.current as HTMLElement ||globalWidthHeight);
    const { x,y } = downPosition;     
    const moveX = clientX - x,
          moveY = clientY - y;     
    const data = {
        x: isLimitX ? Math.max(0, Math.min(containerWidth - offsetWidth, moveX)) : moveX,
        y: isLimitY ? Math.max(0, Math.min(containerHeight - offsetHeight, moveY)) : moveY,
        minX: 0,
        minY: 0,
        maxX: containerWidth - offsetWidth,
        maxY: containerHeight - offsetHeight,
        centerX: (containerWidth - offsetWidth) / 2,
        centerY: (containerHeight - offsetHeight) / 2
    }
    setIsMove(true);
    setPosition(data);
}, []);

核心代码实现第六步--拖动结束回调

最后在拖动结束后，我们需要重置我们做的一些操作，比如样式溢出截断，再比如移除事件的监听，以及恢复鼠标的样式等。代码如下:

const onUpHandler = useCallback(() => {
    const target = element.current as HTMLElement;
    if (target) {
        target.style.cursor = '';
    }
    isStart = false;
    setIsMove(false);
    const limitEle = (containerElement.current || document.body) as HTMLElement;
    limitEle.style.overflowX = '';
    limitEle.style.overflowY = '';
    window.removeEventListener(eventType[1], onMoveHandler);
    window.removeEventListener(eventType[2],onUpHandler);
}, []);

到此为止，我们的第一个效果核心实现就已经算是完成大半部分了，最后我们再把需要用到的状态值返回出去。代码如下:

return {
    ...position,
    isMove
}

合并以上的代码，就成了我们最终的hooks函数，代码如下:

import { useState, useCallback, useLayoutEffect, useRef } from 'react';
import type { RefObject } from 'react';

export type ElementType = Element | HTMLElement | null;
export type RefElementType = RefObject<ElementType>;
export type FunctionElementType = () => ElementType;
export type ParamType = RefElementType | FunctionElementType;
export type PositionType = Partial<{ x: number, y: number, isMove: boolean, maxX: number, maxY: number, minX: number, minY: number, centerX: number, centerY: number }>;
export type OptionType = Partial<{
    isLimitX: boolean,
    isLimitY: boolean,
    defaultPosition: {
        x: number,
        y: number
    }
}>;
const useAnyDrag = (el: ParamType, option: OptionType = { isLimitX: true, isLimitY: true,defaultPosition:{ x:0,y:0 } }, containerRef?: ParamType): PositionType => {
    const isMobile = navigator.userAgent.match(/(iPhone|iPod|Android|ios)/i);
    const eventType = isMobile ? ['touchstart', 'touchmove', 'touchend'] : ['mousedown', 'mousemove', 'mouseup'];
    const element = useRef<ElementType>();
    const containerElement = useRef<ElementType>();
    const { isLimitX, isLimitY,defaultPosition } = option;
    const globalWidthHeight = {
        offsetWidth: window.innerWidth,
        offsetHeight: window.innerHeight
    }
    let isStart = false;
    const [position, setPosition] = useState<PositionType>({
        x: defaultPosition?.x,
        y: defaultPosition?.y,
        maxX: 0,
        maxY: 0,
        centerX: 0,
        centerY: 0,
        minX: 0,
        minY: 0
    });
    const [isMove, setIsMove] = useState(false);
    const downPosition = {
        x:0,
        y:0
    }
    const setOverflow = () => {
        const limitEle = (containerElement.current || document.body) as HTMLElement;
        if (isLimitX) {
            limitEle.style.overflowX = 'hidden';
        } else {
            limitEle.style.overflowX = '';
        }
        if (isLimitY) {
            limitEle.style.overflowY = 'hidden';
        } else {
            limitEle.style.overflowY = '';
        }
    }
    const onStartHandler = useCallback((e:Event) => {
        isStart = true;
        const target = element.current as HTMLElement;
        if (target) {
            target.style.cursor = 'move';
        } 
        const event: Touch | MouseEvent = e instanceof TouchEvent ? e.changedTouches[0] : e as MouseEvent;
        const { clientX, clientY } = event;
        downPosition.x = clientX - target.offsetLeft;
        downPosition.y = clientY - target.offsetTop;
        setOverflow();
        window.addEventListener(eventType[1], onMoveHandler);
        window.addEventListener(eventType[2], onUpHandler);
    }, []);
    const onMoveHandler = useCallback((e: Event) => {
        if (!isStart) {
            return;
        }
        setOverflow();
        const event: Touch | MouseEvent = e instanceof TouchEvent ? e.changedTouches[0] : e as MouseEvent;
        const { clientX, clientY } = event;
        if (!element.current) {
            return;
        }
        const { offsetWidth, offsetHeight} = element.current as HTMLElement;
        const { offsetWidth: containerWidth, offsetHeight: containerHeight } = (containerElement.current as HTMLElement || globalWidthHeight);
        const { x,y } = downPosition;     
        const moveX = clientX - x,
              moveY = clientY - y;     
        const data = {
            x: isLimitX ? Math.max(0, Math.min(containerWidth - offsetWidth, moveX)) : moveX,
            y: isLimitY ? Math.max(0, Math.min(containerHeight - offsetHeight, moveY)) : moveY,
            minX: 0,
            minY: 0,
            maxX: containerWidth - offsetWidth,
            maxY: containerHeight - offsetHeight,
            centerX: (containerWidth - offsetWidth) / 2,
            centerY: (containerHeight - offsetHeight) / 2
        }
        setIsMove(true);
        setPosition(data);
    }, []);
    const onUpHandler = useCallback(() => {
        const target = element.current as HTMLElement;
        if (target) {
            target.style.cursor = '';
        }
        isStart = false;
        setIsMove(false);
        const limitEle = (containerElement.current || document.body) as HTMLElement;
        limitEle.style.overflowX = '';
        limitEle.style.overflowY = '';
        window.removeEventListener(eventType[1], onMoveHandler);
        window.removeEventListener(eventType[2],onUpHandler);
    }, []);
    useLayoutEffect(() => {
        element.current = typeof el === 'function' ? el() : el.current;
        containerElement.current = typeof containerRef === 'function' ? containerRef() : containerRef?.current;
        if (!element.current) {
            return;
        }
        element.current.addEventListener(eventType[0], onStartHandler);
        return () => {
            element.current?.removeEventListener(eventType[0], onStartHandler);
        }
    }, []);
    return {
        ...position,
        isMove
    }
}
export default useAnyDrag;

接下来我们来看第二个效果的实现。

半隐效果的实现分析

第二个效果实现的难点在哪里？我们都知道监听元素的滚动事件可以知道用户正在滚动页面，可是我们并不知道用户是否停止了滚动，而且也没有相关的事件或者是API能够让我们去监听用户停止了滚动，那么难点就在这里，如何知道用户是否停止了滚动。

要解决这个问题，我们还得从滚动事件中作文章，我们知道如果用户一直在滚动页面的话，滚动事件就会一直触发，假设我们在该事件中延迟个数百毫秒执行某个操作，是否就代表用户停止了滚动，然后我们可以执行相应的操作？

幸运的是，我从这里找到了答案，还真的是这么做。

如此一来，这个效果我们就实现了一大半了，我们实现一个useIsScroll函数，然后返回一个布尔值代表用户是否正在滚动和停止滚动两种状态，为了完成额外的操作，我们还可以返回一个用户滚动停止时的当前元素距离文档顶部的一个距离，也就是scrollTop。

如此一来，这个函数的实现就比较简单了，还是在react钩子函数中监听滚动事件，然后执行修改状态值的操作。但是现在还有一个问题，那就是我们如何去存储状态？

核心代码实现第一步--解决状态存储的响应式

如果使用useState来存储的话，似乎并没有达到响应式，好在react还提供了一个useRef函数，这个是一个响应式的，我们可以基于这个hooks函数结合useReducer函数来封装一个useGetSet函数，这个函数也在这里有总结到，感兴趣的可以去看看。

这个函数的实现其实也不难，主要就是利用useReducer的第二个参数强行去更新状态值，然后返回更新后的状态值。代码如下:

export const useGetSet = <T>(initialState:T):[() => T,(s:T) => void] => {
    const state = useRef<T>(initialState);
    const [,update] = useReducer(() => Object.create(null),{});
    const updateState = (newState: T) => {
        state.current = newState;
        update();
    }
    return useMemo(() => [
        () => state.current,
        updateState
    ],[])
}

核心代码实现第二步--构建hooks函数

接下来我们来看这个hooks函数，很明显这个hooks函数有2个参数，第一个则是监听滚动事件的滚动元素，第二个则是一个延迟时间。滚动元素的类型与前面的拖拽函数保持一致，我们来详细看看。

const useIsScroll = <T extends HTMLElement>(el: Window | T | (() => T) = window,throlleTime:number = 300): {
    isScroll: boolean,
    scrollTop: number
} => { 
    //核心代码
}

需要注意这里设置了默认值，el默认值时window对象，throlleTime默认值时300

接下来我们就是使用useSetGet方法存储状态，定义一个timer用于延迟函数定时器，然后监听滚动事件，在事件的回调函数中执行相应的修改状态值的操作，最后就是返回这两个状态值即可。代码如下:

const useIsScroll = <T extends HTMLElement>(el: Window | T | (() => T) = window,throlleTime:number = 300): {
    isScroll: boolean,
    scrollTop: number
} => {
    const [isScroll,setIsScroll] = useGetSet(false);
    const [scrollTop,setScrollTop] = useGetSet(0);
    const timer = useRef<ReturnType<typeof setTimeout> | null>(null);
    const onScrollHandler = useCallback(() => {
        setIsScroll(true);
        setScrollTop(window.scrollY);
        if(timer.current){
            clearTimeout(timer.current);
        }
        timer.current = setTimeout(() => {
            setIsScroll(false);
        },throlleTime)
    },[])
    useLayoutEffect(() => {
        const ele = typeof el === 'function' ? (el as () => T)() : el;
        if(!ele){
            return;
        }
        ele.addEventListener('scroll',onScrollHandler,false);
        return () => {
            ele.removeEventListener('scroll',onScrollHandler,false);
        }
    },[]);
    return {
        isScroll: isScroll(),
        scrollTop: scrollTop()
    };
}

整个hooks函数代码实现起来简单明了，所以也没什么难点，只要理解到了思路，就很简单了。

两个hooks函数的使用

核心功能我们已经实现了，接下来使用起来也比较简单，样式代码如下:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body,html {
    height: 100%;
}
body {
    overflow:auto;
}
.App {
    position: relative;
}
.overHeight {
    height: 3000px;
}
.drag {
    position: fixed;
    width: 150px;
    height: 150px;
    border: 3px solid #2396ef;
    background: linear-gradient(135deg,#efac82 10%,#da5b0c 90%);
    z-index: 2;
    left: 0;
    top: 0;
}
.transition {
    transition: all 1.2s ease-in-out;
}

组件代码如下:

import useAnyDrag from "./hooks/useAnyDrag";
import './App.css';
import useIsScroll from "./hooks/useIsScroll";
import { createRef } from "react";

const App = () => {
    // 这里是使用核心代码
   const { x, y, isMove, centerX, minX, maxX } = useAnyDrag(() => document.querySelector('#drag'));
   //这里是使用核心代码    
   const {isScroll} = useIsScroll();
   const scrollElement = createRef<HTMLDivElement>();
   const getLeftPosition = () => {
      if (!x || !centerX || isMove) {
         return x;
      }
      if (x <= centerX) {
         return minX || 0;
      } else {
         return maxX;
      }
   }
   const scrollPosition = () => {
      if (typeof getLeftPosition() === 'number') {
         if (getLeftPosition() === 0) {
            return -((scrollElement.current?.offsetWidth || 0) / 2);
         } else {
            return getLeftPosition() as number + (scrollElement.current?.offsetWidth || 0) / 2;
         }
      }
      return 0;
   }
   return (
      <div className="App">
         <div className="overHeight"></div>
         <div className={`${ isScroll ? 'drag transition' : 'drag'}`}
            style={{ left: (isScroll ? scrollPosition() : getLeftPosition()) + 'px', top: y + 'px' }}
            id="drag"
            ref={scrollElement}
         ></div>
      </div>
   )
}
export default App;

结语

经过以上的分析，我们就完成了这样一个需求，感觉实现完了之后，还是收获满满的，总结一下我学到了什么。

拖拽事件的监听以及拖拽坐标的计算
滚动事件的监听以及react响应式状态的实现
移动端环境与pc环境的判断
如何知道用户停止了滚动

本文就到此为止了，感谢大家观看。

转载自:https://juejin.cn/post/7163153386911563813