有做销售产品的网站有哪些,怎么做网站vip并且收费,asp.net网站开发项目源码,app推广方法春节终结束了#xff0c;忙得我头疼。终于有时间弄自己的东西了。今天来写一个关于拖动的实例讲解。先看效果#xff1a;
这是一个简单的组件设计#xff0c;如果用原生的js设计就很简单#xff0c;但在React中有些事件必须要多考虑一些。这是一个系列的文章#xff0c;…春节终结束了忙得我头疼。终于有时间弄自己的东西了。今天来写一个关于拖动的实例讲解。先看效果
这是一个简单的组件设计如果用原生的js设计就很简单但在React中有些事件必须要多考虑一些。这是一个系列的文章专门针对实际应用开发过程中的技术难点逐个讲解相信大家能用得着。 再次说明我的示例都是基于MUI框架的如果你不讲究样式的话也可以直接采用原生dom的样式设计。关于项目的创建及MUI的应用请查看我以往的文章都是详细的教程讲解。
要点解说
设计的思路是只把把要移动的组件进行包裹就可以对其进行拖动注意是拖动不是拖放我后期会出一个拖放的技术文章请大家另行期待
第一步 首先是触发机制当在目标组件上按下左键时开始拖动所以要有个标记记录拖动的状态。
const [isDragging, setIsDragging] useState(false);当按下左键时设置为 true, 放开时设置为false
// 鼠标按下左键时的事件
const handleMouseDown (event) {if (event.button ! 0) return; // 按下的不是左键则直接返回。setIsDragging(true);
};// 鼠标放开左键时的事件
const handleMouseUp (event) {if(event.button ! 0) return;setIsDragging(false);
};第二步 单击左键时要记录下鼠标的位置信息我们定义一个state来记录这个值
const offsetX useRef(0);
const offsetY useRef(0);第三步 单击左键不放进行移动要记录下相对于position的变化量。因为要把这个变化反应到UI上所以要用useState:
const [position, setPosition] useState({ x: 0, y: 0 });继续下面的代码
// 鼠标按下左键时的事件
const handleMouseDown (event) {if (event.button ! 0) return;offsetX.current event.clientX - position.x;offsetY.current event.clientY - position.y;setIsDragging(true);
};// 鼠标移动事件
const handleMouseMove (event) {if (isDragging) {setPosition({x: event.clientX - offsetX.current,y: event.clientY - offsetY.current});}
};
或许你会想直接把这些事件绑定到要拖动的组件上就行了但这里有个问题有时我们拖着拖着由于速度过快鼠标就移出了组件这就达不到我们的设计效果了。所以呢我们要把相应的事件绑定到document上是最靠谱的。我们只要把触发事件绑定到拖动组件上就可以了。
if (isDragging) {document.addEventListener(mousemove, handleMouseMove);document.addEventListener(mouseup, handleMouseUp);
} else {document.removeEventListener(mousemove, handleMouseMove);document.removeEventListener(mouseup, handleMouseUp);
}document上绑定的事件在组件卸载后还要移除所以我们用到useEffect,完整的代码如下
import React, { useEffect, useRef, useState } from react;export default function Draggable({children}) {const [isDragging, setIsDragging] useState(false);const [position, setPosition] useState({ x: 0, y: 0 });const offsetX useRef(0);const offsetY useRef(0);useEffect(() {const handleMouseMove (event) {if (isDragging) {setPosition({x: event.clientX - offsetX.current,y: event.clientY - offsetY.current});}};const handleMouseUp (event) {if(event.button ! 0) return;setIsDragging(false);};if (isDragging) {document.addEventListener(mousemove, handleMouseMove);document.addEventListener(mouseup, handleMouseUp);} else {document.removeEventListener(mousemove, handleMouseMove);document.removeEventListener(mouseup, handleMouseUp);}return () {document.removeEventListener(mousemove, handleMouseMove);document.removeEventListener(mouseup, handleMouseUp);};}, [isDragging]);const handleMouseDown (event) {event.preventDefault();event.stopPropagation();if (event.button ! 0) return;offsetX.current event.clientX - position.x;offsetY.current event.clientY - position.y;setIsDragging(true);};return (divstyle{{position: relative,userSelect: none,cursor: isDragging ? grabbing : grab,transform: translate(${position.x}px, ${position.y}px)}}onMouseDown{handleMouseDown}{children}/div);
}这样一个基本的拖动组件就设计完成了。快试试效果吧。
import React from react;
import Draggable from ../framework-kakaer/SModel/_Dragable;
import Box from mui/material/Box;
import Stack from mui/material/Stack;
import Typegraphy from mui/material/Typography;function DraggableTest() {return (Boxsx{{display: flex,flexDirection: column,alignItems: center,justifyContent: center,height: 100vh,}}Stack spacing{2}Typegraphy varianth4拖动组件设计测试/TypegraphyDraggableBox sx{{ width: 100, height: 100, bgcolor: red }} //DraggableDraggableBox sx{{ width: 100, height: 100, bgcolor: blue }} //Draggable/Stack/Box)
}export default DraggableTest;
