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

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

左右方向的判断

​ 在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
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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、付费专栏及课程。

余额充值