基本思路

  1. 如果要设置物体拖拽，那么必须使用三个事件，并且这三个事件的使用顺序不能颠倒。
  2. 1.onmousedown：鼠标按下事件
  3. 2.onmousemove：鼠标移动事件
  4. 3.onmouseup：鼠标抬起事件

重点：

1、一定要绝对定位，脱离文档流才可以移动。

2、绑定拖拽的元素，移动和鼠标松开后是对document的绑定，因为移动的是整个div。

3、点击：a= 获取当前鼠标坐标、b =div距浏览器距离、c = 鼠标在div内部距离=a-b。

  1. 移动：通过  a - c 建立鼠标与div的关系，防止鼠标超出div。

基本思路：

拖拽状态 = 0鼠标在元素上按下的时候{
拖拽状态 = 1
记录下鼠标的x和y坐标
记录下元素的x和y坐标
}

鼠标在元素上移动的时候{
如果拖拽状态是0就什么也不做。
如果拖拽状态是1，那么
元素y = 现在鼠标y - 原来鼠标y + 原来元素y
元素x = 现在鼠标x - 原来鼠标x + 原来元素x }

鼠标在任何时候放开的时候{
拖拽状态 = 0
}

  1. //draggable.jsx
  2. import React, {useState, useCallback, useMemo, useEffect} from 'react';
  4. const POSITION = {x: 0, y: 0};
  6. const Draggable = ({children, id, onDrag, onDragEnd}) => {
  7.   const [state, setState] = useState({
  8.     //是否平移，保存拖动状态
  9.     isDragging: false,
  10.     //之前的位置
  11.     origin: POSITION,
  12.     // 平移的位置
  13.     translation: POSITION
  14.   });
  16.   //鼠标按下时
  17.   const handleMouseDown = useCallback(({clientX, clientY}) => {
  18.     //计算出鼠标当前的坐标，并保存记录下来
  19.     setState(state => ({
  20.       ...state,
  21.       isDragging: true,
  22.       origin: {x: clientX, y: clientY}
  23.     }));
  24.   }, []);
  26.  //鼠标移动时
  27.   const handleMouseMove = useCallback(({clientX, clientY}) => {
  28.      // 算出平移量，平移的距离x,y坐标，当前的x,y轴坐标减去初始的x,y轴的坐标
  29.     const translation = {x: clientX - state.origin.x, y: clientY - state.origin.y};
  31.     //将现在的平移量设置进state
  32.     setState(state => ({
  33.       ...state,
  34.       translation
  35.     }));
  36.     //  触发拖动事件
  37.     onDrag({translation, id});
  38.   }, [state.origin, onDrag, id]);
  40.   //鼠标抬起，结束拖动状态
  41.   const handleMouseUp = useCallback(() => {
  42.     setState(state => ({
  43.       ...state,
  44.       isDragging: false
  45.     }));
  47.     onDragEnd();
  48.   }, [onDragEnd]);
  50.   useEffect(() => {
  51.     //调用原生事件
  52.     if (state.isDragging) {
  53.       window.addEventListener('mousemove', handleMouseMove);
  54.       window.addEventListener('mouseup', handleMouseUp);
  55.     } else {
  56.       window.removeEventListener('mousemove', handleMouseMove);
  57.       window.removeEventListener('mouseup', handleMouseUp);
  59.       setState(state => ({...state, translation: {x: 0, y: 0}}));
  60.     }
  61.   }, [state.isDragging, handleMouseMove, handleMouseUp]);
  63.   //设置属性
  64.   const styles = useMemo(() => ({
  65.     cursor: state.isDragging ? '-webkit-grabbing' : '-webkit-grab',
  66.     transform: `translate(${state.translation.x}px, ${state.translation.y}px)`,
  67.     transition: state.isDragging ? 'none' : 'transform 500ms',
  68.     zIndex: state.isDragging ? 2 : 1,
  69.     position: state.isDragging ? 'absolute' : 'relative'
  70.   }), [state.isDragging, state.translation]);
  72.   return (
  73.     <div style={styles} onMouseDown={handleMouseDown}>
  74.       {children}
  75.     </div>
  76.   );
  77. };
  79. export default Draggable
  1. //about.jsx
  2. import React, {useState, useCallback} from 'react';
  3. import styled from 'styled-components';
  4. import {range, inRange} from 'lodash';
  5. import Draggable from '../Draggable';
  7. const MAX = 5;
  8. const HEIGHT = 100;
  10. const App = () => {
  11.   const items = range(MAX);
  12.   //设置state保存三个状态
  13.   const [state, setState] = useState({
  14.     //初始数组
  15.     order: items,
  16.     //拖动状态下的数组
  17.     dragOrder: items, // items order while dragging
  18.     draggedIndex: null
  19.   });
  21.   const [imgUrl]=useState([
  22.     'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3388269861,2982194587&fm=26&gp=0.jpg',
  23.     'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2357545491,277280726&fm=15&gp=0.jpg',
  24.     'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1167992334,1034210916&fm=26&gp=0.jpg',
  25.     'https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2850066628,804265687&fm=26&gp=0.jpg',
  26.     'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1332205634,147092206&fm=26&gp=0.jpg'
  27.   ])
  28.   const handleDrag = useCallback(({translation, id}) => {
  29.     //平移的距离除以高度得到平移了多少个滑块
  30.     const delta = Math.round(translation.y / HEIGHT);
  31.     //拿到当前所拖动砖块的索引
  32.     const index = state.order.indexOf(id);
  33.     //移出当前所在的滑块，根据移动的id不等于数组中的index,得到新的数组不包含当前所在滑块
  34.     const dragOrder = state.order.filter(index => index !== id);
  35.     //如果拖拽的滑块数加当前滑块的索引不在总滑块数的范围内，结束任务
  36.     if (!inRange(index + delta, 0, items.length)) {
  37.       return;
  38.     }
  39.         //将改拖拽的滑块插入到当前改变的总滑块中
  40.     dragOrder.splice(index + delta, 0, id);
  41.     //将修改后得数组索引以及索引保存到当前的state状态中
  42.     setState(state => ({
  43.       ...state,
  44.       draggedIndex: id,
  45.       dragOrder
  46.     }));
  47.   }, [state.order, items.length]);
  49.   // 结束拖动状态
  50.   const handleDragEnd = useCallback(() => {
  51.     setState(state => ({
  52.       ...state,
  53.       order: state.dragOrder,
  54.       draggedIndex: null
  55.     }));
  56.   }, []);
  58.   return (
  59.     <Container>
  60.       {items.map(index => {
  61.         //这里的状态当前拖动的索引等于数组的索引
  62.         const isDragging = state.draggedIndex === index;
  63.         //这里的高度加10是加上了外边距
  64.         //初始高度
  65.         const top = state.dragOrder.indexOf(index) * (HEIGHT + 10);
  66.         //拖拽后的高度
  67.         const draggedTop = state.order.indexOf(index) * (HEIGHT + 10);
  69.         return (
  70.           <Draggable
  71.             key={index}
  72.             id={index}
  73.             onDrag={handleDrag}
  74.             onDragEnd={handleDragEnd}
  75.           >
  76.             <Rect
  77.               isDragging={isDragging}
  78.               top={isDragging ? draggedTop : top}
  79.               index={index}
  80.               imgUrl={imgUrl}
  81.             >
  82.             </Rect>
  83.           </Draggable>
  84.         );
  85.       })}
  86.     </Container>
  87.   );
  88. };
  90. export default App;
  92. const Container = styled.div`
  93.   width: 100vw;
  94.   min-height: 100vh;
  95. `;
  97. const Rect = styled.div.attrs(props => ({
  98.   style: {
  99.     transition: props.isDragging ? 'none' : 'all 500ms'
  100.   }
  101. }))`
  102.   width: 300px;
  103.   user-select: none;
  104.   height: ${HEIGHT}px;
  105.   background: #88D0FF;
  106.   box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
  107.   display: flex;
  108.   align-items: center;
  109.   justify-content: center;
  110.   position: absolute;
  111.   top: ${({top}) => 100 + top}px;
  112.   left: calc(50vw - 150px);
  113.   font-size: 20px;
  114.   color: #fff;
  115.   border-radius:10px;
  116.   background:url(${props=>props.imgUrl[props.index]});
  117.   background-repeat:no-repeat;
  118.   background-size: cover;
  119.   position: absolute;
  120.   overflow: hidden;
  122. `
  1. app.js
  2. import Draggable from './components/About';
  3. function App() {
  4.   return (
  5.     <div className="App">
  6.     <Draggable onDrag={console.log} id="uniqueId">
  7.       </Draggable>
  8.     </div>
  9.   );
  10. }
  12. export default App;

下载

  1. yarn add lodash
  2. yarn add styled-components

效果演示

20210422_121012.mp4