如何解决在 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 举报,一经查实,本站将立刻删除。