Reactjs 反应dnd DropTarget未按预期工作_Reactjs_React Dnd

Reactjs 反应dnd DropTarget未按预期工作

reactjs

Reactjs 反应dnd DropTarget未按预期工作,reactjs,react-dnd,Reactjs,React Dnd,我希望能够在两张卡片列表之间拖放基于这个简单的方法，我成功地构建了两个带有卡片的列表，并在它们之间拖放由于某种原因，当其中一张单子完全是空的，我就不能把卡片放进去这段代码演示了我的问题： const ItemTypes={ 卡片：“卡片” }; 让cardSource={ 开始：功能（道具、监视器、组件）{ //返回描述拖动项的数据返回{ 卡片：道具，卡片，原始列表：props.cardList，原始索引：props.findCard（props.card）.index， targ

我希望能够在两张卡片列表之间拖放

基于这个简单的方法，我成功地构建了两个带有卡片的列表，并在它们之间拖放

由于某种原因，当其中一张单子完全是空的，我就不能把卡片放进去

这段代码演示了我的问题：

const ItemTypes={
卡片：“卡片”
};
让cardSource={
开始：功能（道具、监视器、组件）{
//返回描述拖动项的数据
返回{
卡片：道具，卡片，
原始列表：props.cardList，
原始索引：props.findCard（props.card）.index，
targetList:props.cardList//第一个目标与原始目标相同
}
},
endDrag：功能（道具、监视器、组件）{
let item=monitor.getItem（）；
让dropResult=monitor.getDropResult（）；
如果（！monitor.didDrop（））{
道具.移动卡（item.card，item.originalIndex）；
if（item.targetList！==item.originalList）{
item.targetList.removeCard（item.card）；
}
返回；
}
}
};
让cardTarget={
坎德罗普：功能（道具、监视器）{
返回true；
},
悬停：功能（道具、监视器）{
let item=monitor.getItem（）；
如果（item.targetList！==props.cardList）{
item.targetList.removeCard（item.card）；
item.targetList=props.cardList；
}
if（item.card.id！==props.card.id）{
让卡片=道具.卡片（道具.卡片）；
道具移动卡（item.card，card.index）；
}
},
下降：功能（道具、监视器、组件）{
返回monitor.getItem（）；
}
};
类CardElement扩展了React.Component{
render（）{
让IsDraging=this.props.IsDraging；
让connectDragSource=this.props.connectDragSource；
让connectDropTarget=this.props.connectDropTarget；
让不透明度=IsDraging？0:1；//未按预期工作
设elm=Name:{this.props.card.Name}id{this.props.card.id}；
返回connectDragSource（connectDropTarget（elm））；
}
}
CardElement.propTypes={
connectDragSource:React.PropTypes.func.isRequired，
connectDropTarget:React.PropTypes.func.isRequired，
IsTragging:React.PropTypes.bool.isRequired，
卡片：React.PropTypes.object.isRequired，
卡片列表：React.PropTypes.object.isRequired，
移动卡：需要React.PropTypes.func，
findCard:React.PropTypes.func.isRequired
}
让cardDropTarget=ReactDnD.DropTarget（ItemTypes.CARD，cardTarget，函数（connect，monitor）{
返回{
connectDropTarget:connect.dropTarget（）
}
})（卡氏元件）；
let Card=ReactDnD.DragSource（ItemTypes.Card，cardSource，函数（connect，monitor）{
返回{
connectDragSource:connect.dragSource（），
isDraging:monitor.isDraging（）
};
})（目标）；
让cardListTarget={
删除：功能（道具、监视器、组件）{
//当列表清空时，卡不会落在这里
},
坎德罗普：函数（）{
返回true；
}
};
类ListElement扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
卡片：这个。道具。卡片
};
}
移动卡片（卡片，索引）{
let found=此.findCard（卡片）；
让cards=this.state.cards；
如果（找到。卡）{
卡.拼接（找到索引1）；
卡.拼接（atIndex，0，找到卡）；
}否则{
卡。拼接（A指数，0，卡）；
}
this.setState（{cards:cards}）；
}
移除卡片（卡片）{
let found=此.findCard（卡片）；
让cards=this.state.cards；
如果（找到。卡）{
卡.拼接（找到索引1）；
}否则{
//log（'无法删除卡'+card.id+'-找不到它'）；
}
this.setState（{cards:cards}）；
}
金融卡（信用卡）{
设index=this.state.cards.indexOf（card）；
如果（索引>=0）{
//console.log（'found:card:'+card+'id'+card.id）；
}否则{
//console.log（'未找到卡'）；
卡片=空；
}
返回{
卡片：卡片，
索引：索引
};
}
render（）{
让connectDropTarget=this.props.connectDropTarget；
让cardList=this.state.cards.map（card=>{
返回
});
返回connectDropTarget（{cardList}）；
}
}
let List=ReactDnD.DropTarget（ItemTypes.CARD，cardListTarget，（connect，monitor）=>{
返回{
connectDropTarget:connect.dropTarget（）
}
})（列表元素）；
类AppElement扩展了React.Component{
建造师（道具）{
超级（道具）；
让listA=[
{姓名：'Harry'，id:1}，
{姓名：'Jimmy'，id:2}，
{姓名：'Jane'，id:3}，
{name:'Adam'，id:4}，
{姓名：'Judith'，id:5}
]
让listB=[
{姓名：'Edward'，id:6}，
{姓名：'Ronald'，id:7}，
{name:'Irene'，id:8}，
{姓名：'Patrick'，id:9}，
{姓名：'Dorothy'，id:10}
]
此.state={
卡片：[列表A，列表B]
}
}
render（）{
返回
;
}
}
让App=ReactDnD.DragDropContext（ReactDnDHTML5Backend）（AppElement）；
ReactDOM.render（，document.getElementById（'app'））
整经机{
显示器：flex；
弯曲方向：行；
柔性包装：nowrap；
调整内容：灵活启动；
对齐内容：之间的空间；
调整项目：灵活启动；
}
上校{
宽度：400px；
利润率：5px 31px 0px 0px；
最小高度：300px；
边框：2件纯黑；
填充：9px；
}
.卡片项目{
边框：1px灰色虚线；
填充：0.5雷姆1雷姆；
边缘底部：.5rem；
背景色：白色；
光标：移动；
}

[gmail]相关文章推荐

随机文章推荐