(react实现拖拽)左右方向判断问题以及节流处理 —— 拖拽实现二

最新推荐文章于 2024-06-12 17:51:05 发布
最新推荐文章于 2024-06-12 17:51:05 发布
阅读量980 收藏 2
点赞数
分类专栏： 拖拽 文章标签： js react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42192909/article/details/108734243
版权

左右方向判断问题以及节流处理 —— 拖拽实现二

左右方向的判断

​ 在onDragEnd判断时，发现在拖拽左边或者右边会产生问题，需要根据此进行判断，如果是距离原始位置左侧时需要将在endIndex中+1，避免拖拽跨越两个的左侧，而在右侧时则不需要判断，当在最左侧或者最右侧时单独判断，主要代码如下

  const handleDragEnd = (e: any,index: number) => {
    const {clientX,clientY} = e
    const {leftWidth,rightWidth} = mouseInDrag
    let endIndex
    for(let i = 0;i < distanceArr.length;i++) {
      const {left,top,right,bottom} = distanceArr[i]
      if(left > (clientX - leftWidth) &&  i === 0) {
        endIndex = i
        break 
      }else if(left < (clientX - leftWidth) && i === distanceArr.length - 1) {
        endIndex = i
        break 
      }else if(left < (clientX - leftWidth) && distanceArr[i+1].left > (clientX - leftWidth) ) {
        // 判断向左还是向右
        // 向左运动
最低0.47元/天 解锁文章
好好学前端
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【练习小demo】使用React+TS实现一个拖动换位置效果（同时应用节流）
qq_44831027的博客
11-15 1127
本练习demo旨在练习ts的使用，同时熟悉drag相关的事件 1.思路分析 drag拖拽事件，通常有三个非常重要的过程:onMouseDown(鼠标按下) onMouseMove（鼠标拖动） onMouseUp（鼠标松开），通常我们在使用drag这一事件的过程中，大概就是在这三个事件中进行相应的处理 我们最终要实现的demo效果，就是在鼠标按下后能够带动方块随鼠标位置移动，松开后固定在最后的位置。 如图： 移动后: 而这，只需要控制相关的定位:left和top就能实现这个功能（注意，left和top使用
(react实现拖拽)拖拽的整体主要代码 ——拖拽完整代码
weixin_42192909的博客
09-22 1727
拖拽的整体主要代码 ——拖拽完整代码 拖拽的整体主要代码 ​ 实现本次拖拽的效果的主要代码如下 import React,{useRef,useEffect,useState} from 'react' import './index.scss' const prefixCls = 'drag' interface distanceState { left: number, right: number, top: number, bottom: number, width: numbe
左右布局下，React中拖拽改变两个Box大小的解决方案，使用react-resizable实现
onetortoise的博客
06-12 490
我们常常需要实现通过拖拽拖动条来改变页面布局的情况，这篇文章介绍通过react-resizable包来实现改变左右盒子的宽度。
react中实现拖拽排序react-dnd
waillyer的博客
11-24 5826
import React, { useEffect, useRef, useState } from 'react'; import { DndProvider } from 'react-dnd'; import { Form, Card } from 'antd'; import { useSelector } from 'umi'; import { cloneDeep } from 'lodash'; import HTML5Backend from 'react-dnd-html5-backend
使用react-dnd + react-dnd-html5-backend 实现节点拖动排序
weixin_43777074的博客
11-08 1810
使用reac-dnd，react-dnd-html5-backend实现节点拖动排序
鼠标拖拽菜单栏控制宽度大小及flex实现经典左右两栏布局
接着奏乐接着舞的博客
12-28 2937
1. 使用定位在左侧菜单栏右侧写一个不可见div，鼠标经过鼠标指针样式变换 2. 监听事件：鼠标按下、抬起、移动，需要一个变量，来记录当前是按下还是抬起，初始为false，按下时为true，抬起时为false，如果是true的情况可以移动。 3.记录鼠标偏移值e.screenX，借此控制菜单栏宽度，使用min、maxwidth控制最小或最大宽度 4.性能优化，采用节流或防抖
react简单实现防抖和节流教程方法
我的博客，不一样的自我表达
04-12 713
防止抖动的意思，也就是不抖动时才进行相应的处理。比如一根拉直的弹簧，我们拨动一下它就会抖动，过一段时间后弹簧会恢复到平静的状态（从拨动弹簧使其抖动到恢复平静的时长就是代码例子的ms值）。在这个过程中，拨动弹簧的这一行为假设为事件被触发（代码中的input事件被触发），当弹簧恢复平静时我们再执行事件处理函数（代码中的sayHi函数）。基于以上假设，当我们在弹簧还没恢复到平静状态时，又不断地拨动它（清除了原来的setTimeout，并重新开始计时），因为弹簧还没恢复到平静，那么事件处理函数就一直不会被执行。
React(hook)基于antd Table实现可拖拽调整列宽的表格
weixin_38884718的博客
03-29 6232
React基于antd Table实现可拖拽调整列宽的表格 前言        在日常的工作开发中，会经常的用到表格，进行数据展示，但是数据的长度不一，初始设置的表格列宽不一定符合数据的展示要求，故有时需要手动的进行表格列宽的调整。        用过antd的童鞋，都知道antd的表格并不支持列拖拽功能；那么在react+antd的项目中如何实现可拖动表格呢？ 实现功能 1：表格列宽初始自动分配、列宽总和不能超过容器宽度（无
React 自定义hook 之 防抖和节流
qq_37011724的博客
11-19 783
防抖和节流主要用于控制事件触发频率，提高页面性能和用户体验。防抖: 当事件被触发后，在一定时间内有新的对应事件，则会取消老的事件执行。节流: 当事件触发后，在一定时间内会忽略新的事件执行。
掌握拖拽的实现（使用ReactJS hooks）
MichaelAn的博客
02-13 459
掌握拖拽的实现(使用ReactJS hooks) lonelycat 关注他 79 人赞同了该文章 作者：Shay Keinan 原文：Mastering Drag & Drop using ReactJS hooks 在上一篇文章中，我介绍了通用的开源拖拽库，例如React-dnd和React-bea...
tiny-use-debounce:React钩子可进行反跳和节流
03-07
在React开发中，性能优化是不可或缺的一环，特别是在处理用户交互或者大数据量渲染时。"tiny-use-debounce" 是一个非常实用的库，它提供了一种简单的方式在React组件中实现反跳（debounce）和节流（throttle）策略，...
jQuery Gridly 拖拽排序插件获得拖动的位置
08-12
综上所述，jQuery Gridly 拖拽排序插件提供了强大的布局管理和拖放功能，其回调机制则为开发者提供了获取拖动位置信息的能力，进而实现各种定制化的交互体验。无论你是构建一个简单的卡片布局还是一个复杂的项目管理...
左右拖拽翻页代码
12-23
左右拖拽翻页是一种独特的网页或应用界面设计技术，它为用户提供了一种新颖的浏览方式，使得用户可以通过在页面左右两侧拖动来实现前后翻页。这种交互方式常见于一些移动设备的应用，如电子阅读器、图片浏览器或者...
JS 左右拖拽翻页
01-04
3. React、Vue或Angular等前端框架也有相关的插件或组件，如React-Swipeable-Views，Vue-Swipeables等，可轻松实现左右拖拽翻页。 四、优化技巧 1. 使用CSS3硬件加速：通过设置`transform`属性进行页面滚动，利用...
JavaScript实现DIV层拖动
09-15
5. **性能优化**：为了保证良好的用户体验，我们在处理`mousemove`事件时，可能需要使用节流（throttle）或防抖（debounce）技术，避免频繁的DOM操作导致的性能问题。 6. **实践案例**：压缩包中的五个网页可能是五...
pi_heif-0.17.0-pp310-pypy310_pp73-macosx_12_0_x86_64.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
mmexport1722080103662.jpg
07-27
mmexport1722080103662.jpg
matlab 20244a 6
07-27
matlab 20244a 6
React antd 实现拖拽组件
05-13
React Antd提供了一个Draggable组件，可以实现拖拽组件的功能。 首先，需要安装antd组件库和react-dnd库： ```bash npm install antd react-dnd react-dnd-html5-backend ``` 然后，在组件中引入Draggable组件和DragDropContext组件： ```jsx import { Draggable } from 'react-drag-and-drop'; import { DragDropContext } from 'react-dnd'; import HTML5Backend from 'react-dnd-html5-backend'; import { Card } from 'antd'; const DragCard = ({ id, text, index, moveCard }) => { const style = { marginBottom: 16, }; return ( <Draggable key={id} draggableId={id} index={index} onDragEnd={(result) => moveCard(result.source.index, result.destination?.index)} > {(provided) => ( <Card {...provided.draggableProps} {...provided.dragHandleProps} ref={provided.innerRef} style={{ ...provided.draggableProps.style, ...style }} > {text} </Card> )} </Draggable> ); }; const DragList = ({ cards, moveCard }) => { return ( <div> {cards.map((card, index) => ( <DragCard key={card.id} index={index} {...card} moveCard={moveCard} /> ))} </div> ); }; const App = () => { const [cards, setCards] = useState([ { id: 'card-1', text: 'Card 1' }, { id: 'card-2', text: 'Card 2' }, { id: 'card-3', text: 'Card 3' }, ]); const moveCard = useCallback((sourceIndex, destinationIndex) => { if (destinationIndex === undefined) { return; } const newCards = [...cards]; const [removed] = newCards.splice(sourceIndex, 1); newCards.splice(destinationIndex, 0, removed); setCards(newCards); }, [cards]); return ( <DragDropContext backend={HTML5Backend}> <DragList cards={cards} moveCard={moveCard} /> </DragDropContext> ); }; ``` 在上述代码中，Draggable组件用于包裹需要拖拽的组件，而DragDropContext组件用于提供拖拽功能的上下文。通过onDragEnd回调函数，可以获取到拖拽的源位置和目标位置，然后更新数据源的位置。在拖拽的过程中，可以通过provided参数传递组件的属性，如样式等。 最后，将DragList组件渲染到页面中即可。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值