在 React JS App 中拖动元素时如何防止溢出隐藏区域

问题描述

我有一个带有流星 css 动画的 React Js 应用程序，它的主体具有属性 overflow:hidden 并且动画看起来不错。问题是在同一个视图中，我有一个带有拖放元素的组件，使用库 react beautiful dnd。当一个元素被拖动时，它允许滚动到溢出隐藏区域。有人知道我该如何解决这个问题吗？

这是我的代码：

import React,{ useState } from "react";
import './Home.css';
import img1 from '../../images/img1.png';
import img2 from '../../images/img2.png';
import { DragDropContext,Droppable,Draggable } from 'react-beautiful-dnd';
import {v4 as uuid} from 'uuid';

const columnsMocked = {
  [uuid()]: {
    items: [{id: uuid(),content:'img1'},{id: uuid(),content:'img2'}]
  },[uuid()]: {
    items: []
  },[uuid()]: {
    items: []
  }
}

const onDragEnd = (result,columns,setColumns) => {
  if(!result.destination) return;
  const { source,destination } = result;
  if(source.droppableId !== destination.droppableId){
    const sourceColumn = columns[source.droppableId];
    const destColumn = columns[destination.droppableId];
    const sourceItems = [...sourceColumn.items];
    const destItems = [...destColumn.items];
    const [removed] = sourceItems.splice(source.index,1);
    destItems.splice(destination.index,removed);
    setColumns({
      ...columns,[source.droppableId] : {
        items: sourceItems
      },[destination.droppableId]: {
        items: destItems
      }
    })
  } else{
    const column = columns[source.droppableId];
    const copiedItems = [...column.items];
    const [removed] = copiedItems.splice(source.index,1);
    copiedItems.splice(destination.index,[source.droppableId]: {
        items: copiedItems
      }
    })
  }
  
}

export default function Home (props) {
  const [columns,setColumns] = useState(columnsMocked);
  return (
    <div className='contExtHome'>
        <div className='star'>
          <span></span>
        </div>
        <div className='star'>
          <span></span>
        </div>
        <div className='star'>
          <span></span>
        </div>
        <div className='star'>
          <span></span>
        </div>
        <div className='star'>
          <span></span>
        </div>
        <div className='star'>
          <span></span>
        </div>
        <div className='star'>
          <span></span>
        </div>
        <div className='star'>
          <span></span>
        </div>
        <div className='star'>
          <span></span>
        </div>
        <div className='star'>
          <span></span>
        </div>
        <div className='contExtColumns'>
        <div className='contExtDroppable'>
        <DragDropContext onDragEnd = {result => onDragEnd(result,setColumns)}>
          {
            Object.entries(columns).map(([id,column]) => {
              return(
                <Droppable droppableId={id} key={id}>
                  {
                    (provided,snapshot) => {
                      return(
                        <div
                        {...provided.droppableProps}
                        ref={provided.innerRef}
                        className='column'
                        >
                          {
                            column.items.map((item,index) => {
                              return(
                                <Draggable key={item.id} draggableId={item.id} index={index}>
                                  {
                                    (provided,snapshot) => {
                                      return(
                                        <div
                                        ref={provided.innerRef}
                                        {...provided.draggableProps}
                                        {...provided.dragHandleProps}
                                        >
                                        <img
                                        style={{zIndex:1,margin:5,width: 100,height: 100,...provided.dragHandleProps.style}} src={item.content === 'img1' ? img1 : img2} alt="" />
                                        </div>
                                      )
                                    }
                                  }
                                </Draggable>
                              )
                            })
                          }
                          {provided.placeholder}
                        </div>
                      )
                    }
                  }
                </Droppable>
              )
            })
          }
        </DragDropContext>
        </div>
        </div>
    </div>
  );
  
}

和 de CSS：

.contExtHome{
    overflow: hidden;
}
.star{
    position: absolute;
    top: 0;
    right: 0;
    transform: rotateZ(45deg);
    z-index: -1;
}

span {
    width: 170px;
    height: 2px;
    display: block;
    background-image: linear-gradient(to right,#fff,transparent);
    margin: 50px;
    margin-bottom: 150px;
    position: relative;
    animation: shooting 2s linear infinite;
    opacity: 0;
}

span::before {
    content: "";
    position: absolute;
    bottom: -1px;
    left: -1px;
    width: 5px;
    height: 5px;
    background-color: #fff;
    Box-shadow: 0 0 6px #fff;
    border-radius: 50px;
    filter: drop-shadow(0 0 6px rgb(122,168,255));
}

.star:nth-child(2) {
    right: 100px;

}
.star:nth-child(2) span {
    animation-delay: 1s;
}

.star:nth-child(3) {
    right: 450px;
}
.star:nth-child(3) span {
    animation-delay: 2s;
}

.star:nth-child(4) {
    right: -150px;
}
.star:nth-child(4) span {
    animation-delay: 3s;
}

.star:nth-child(5) {
    right: -350px;
}
.star:nth-child(5) span {
    animation-delay: 2s;
}

.star:nth-child(6) {
    right: 550px;
}
.star:nth-child(6) span {
    animation-delay: 4s;
}

.star:nth-child(7) {
    right: 50px;
}
.star:nth-child(7) span {
    animation-delay: 4s;
}

.star:nth-child(8) {
    right: 750px;
}
.star:nth-child(8) span {
    animation-delay: 5s;
}

.star:nth-child(9) {
    right: -450px;
}
.star:nth-child(9) span {
    animation-delay: 5s;
}

.star:nth-child(10) {
    right: 250px;
}
.star:nth-child(10) span {
    animation-delay: 4s;
}


@keyframes shooting {
    0% {
        transform: translateY(-200px) rotate(-90deg);
        opacity: 1;
    }
    100% {
        transform: translateY(600px) rotate(-90deg);
        opacity: 0;
    }
}

.contExtColumns{
    position: absolute;
    top: 50px;
    left: 200px;
    width: 95%;
    height: 95%;
    overflow: hidden;
    white-space: Nowrap;
}
.contExtDroppable{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 95%;
    height: 95%;
    overflow: hidden;
    white-space: Nowrap
}
.column{
    width: 10%;
    height: 20%;
    margin: 30px;
}

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）