问题描述
目前我有 8 列。我在左边的一栏中有带宠物的朋友的照片，在右边的每一天都有自己的一栏（使用 CSS 网格进行布局）
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: min-content 1fr;
gap: 0px 0px;
grid-template-areas:
"Friends Monday Tuesday Wednesday"
"Friends Thursday Friday Saturday"
"Friends Sunday Sunday Sunday";
这个想法是将一张图片拖入每天，并防止在特定日期（列）中丢弃多张图片。我正在尝试使用 isDropdisabled 来实现这一点，但是问题是我目前实现的方式是，每当我的条件（检查是否存在包含已删除元素的附加 div）时满足它将所有列设置为 isDropdisabled={true} 从而完全防止任何进一步的拖放。当已放入图片时，如何为单个列设置 isDropdisabled={true}？如果从列中删除项目，则为 false。
任何帮助将不胜感激。谢谢。
下面是我的代码：
在我的 App.js 的渲染函数中，下面是设置 isDropdisabled 属性的条件
import React from 'react';
import ReactDOM from 'react-dom';
import '@atlaskit/css-reset';
import styled from 'styled-components';
import { DragDropContext } from 'react-beautiful-dnd';
import initialData from './initial-data';
import Column from './column';
import Header from './header';
const Container = styled.div``;
class App extends React.Component {
state = initialData;
onDragEnd = result => {
document.body.style.color = "inherit";
const { destination,source,draggableId } = result;
if (!destination) {
return;
}
if (destination.droppableId === source.droppableId &&
destination.index === source.index) {
return;
}
const start = this.state.columns[source.droppableId];
const finish = this.state.columns[destination.droppableId];
if (start === finish) {
const newFriendIds = Array.from(start.friendIds);
newFriendIds.splice(source.index,1);
newFriendIds.splice(destination.index,draggableId);
const newColumn = {
...start,friendIds: newFriendIds,};
const newState = {
...this.state,columns: {
...this.state.columns,[newColumn.id]: newColumn,},};
this.setState(newState);
return;
}
//moving from one list to another
const startFriendIds = Array.from(start.friendIds);
startFriendIds.splice(source.index,1);
const newStart = {
...start,friendIds: startFriendIds,};
const finishFriendIds = Array.from(finish.friendIds);
finishFriendIds.splice(destination.index,draggableId);
const newFinish = {
...finish,friendIds: finishFriendIds,[newStart.id]: newStart,[newFinish.id]: newFinish,};
this.setState(newState);
};
render() {
return (
<div>
<Header />
<DragDropContext
onDragEnd={this.onDragEnd}
onDragStart={this.onDragStart}
onDragUpdate={this.onDragUpdate}
>
<Container id="grid-container">
{this.state.columnorder.map((columnId) => {
const column = this.state.columns[columnId];
const friends = column.friendIds.map(friendId => this.state.friends[friendId]);
let isDropdisabled;
if (document.querySelector("#Monday > div > div")) {
isDropdisabled = true;
} else {
isDropdisabled = false;
}
return <Column key={column.id} column={column} friends={friends} isDropdisabled={isDropdisabled}/>;
})}
</Container>
</DragDropContext>
</div>
);
}
}
ReactDOM.render(<App />,document.getElementById('root'));
export default App;
column.js 下面包含 <droppable> 组件，其初始属性为 isDropdisabled={this.props.isDropdisabled} :
import React from 'react';
import styled from 'styled-components';
import { Droppable } from 'react-beautiful-dnd';
import Friend from './friend';
const Container = styled.div`
background-color: #eaeaea;
margin: 8px;
border: 1px solid lightgrey;
border-radius: 5px;
`;
const Title = styled.h2`
padding: 8px;
`;
const FriendList = styled.div`
padding: 8px;
transition: background-color 0.2s ease;
background-color: ${props => (props.isDraggingOver ? 'darkgrey' : 'white')};
max-width:768px;
`;
export default class Column extends React.Component {
render() {
return (
<Container id={this.props.column.title}>
<Title>{this.props.column.title}</Title>
<Droppable
droppableId={this.props.column.id}
isDropdisabled={this.props.isDropdisabled}
>
{(provided,snapshot) => (
<FriendList
ref={provided.innerRef}
{...provided.droppableProps}
isDraggingOver={snapshot.isDraggingOver}
style={{ height: '295px' }}
>
{this.props.friends.map((friend,index) => <Friend key={friend.id} friend={friend} index={index}/>)}
{provided.placeholder}
</FriendList>
)}
</Droppable>
</Container>
);
}
}
initial-data.js 用于填充列：
const initialData = {
friends: {
'friend-1' : { id: 'friend-1',content: 'images/albert_lamb.jpg',info: 'Albert and his pet lamb Sticks.'},'friend-2' : { id: 'friend-2',content: 'images/amy_hamster.jpg',info: 'Amy and her hamster Penny.' },'friend-3' : { id: 'friend-3',content: 'images/emily_dog.jpg',info: 'Emily and her dog Rover.'},'friend-4' : { id: 'friend-4',content: 'images/fred_iguana.jpg',info: 'Fred and his iguana Tex.'},'friend-5' : { id: 'friend-5',content: 'images/jackie_dog.jpg',info: 'Jackie and her dog Smuckers.'},'friend-6' : { id: 'friend-6',content: 'images/alex_cat.jpg',info: 'Alex and his cat Tiger.'},'friend-7' : { id: 'friend-7',content: 'images/nick_rabbit.jpg',info: 'Nick and his rabbit Bugsy.'},'friend-8' : { id: 'friend-8',content: 'images/Sara_dog.jpg',info: 'Sara and her dog Ralph.'},'friend-9' : { id: 'friend-9',content: 'images/laura_dog.jpg',info: 'Laura and her dog Gus.'},'friend-10' : { id: 'friend-10',content: 'images/stacy_cat.jpg',info: 'Stacy and her cat Buddy.'},columns: {
'column-1': {
id: 'column-1',title: 'Friends',friendIds: ['friend-1','friend-2','friend-3','friend-4','friend-5','friend-6','friend-7','friend-8','friend-9','friend-10']
},'column-2': {
id: 'column-2',title: 'Monday',friendIds: []
},'column-3': {
id: 'column-3',title: 'Tuesday','column-4': {
id: 'column-4',title: 'Wednesday','column-5': {
id: 'column-5',title: 'Thursday','column-6': {
id: 'column-6',title: 'Friday','column-7': {
id: 'column-7',title: 'Saturday','column-8': {
id: 'column-8',title: 'Sunday',//facilitate reordering of the columns
columnorder: ['column-1','column-2','column-3','column-4','column-5','column-6','column-7','column-8'],};
export default initialData;
下面的friend.js 创建可拖动的图片卡：
import React from 'react'
import styled from 'styled-components';
import { Draggable } from 'react-beautiful-dnd';
import "./index.css";
const Container = styled.div`
border: 1px solid lightgrey;
border-radius: 2px;
padding: 8px;
margin-bottom: 8px;
background-color: ${props => (props.isDragging ? '#ff4d41' : 'white')};
`;
export default class Friend extends React.Component {
render() {
return (
<Draggable draggableId={this.props.friend.id} index={this.props.index}>
{(provided,snapshot) => (
<Container
{...provided.draggableProps}
{...provided.dragHandleProps}
ref={provided.innerRef}
isDragging={snapshot.isDragging}
>
<div className="card-container">
<div className="customer-thumb image-container">
<img src={this.props.friend.content} className="image" alt="profile-img" />
</div>
<div className="card-title">
<p>{this.props.friend.info}</p>
</div>
</div>
</Container>
)}
</Draggable>
);
}
}
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）