仅在拖动时响应 DnD 更改 div 样式
React DnD change div style only when dragging
我正在使用 react-dnd
库实现拖放机制,但我发现很难设置放置目标的样式。我想向用户显示可以放置哪个放置目标,但是使用 isOver
和 canDrop
只会设置当前悬停在其上的项目的样式。
如果我使用 !isOver
值,所有 div 都会被设置样式,甚至不需要拖动任何元素。
当发生拖动元素时,如何设置放置目标的样式 only?
到目前为止,这是我的代码,对于 @DropTarget
:
import React from 'react';
import {DropTarget} from 'react-dnd';
import {ItemTypes} from './Constants';
const target = {
drop(props, monitor, component){
// console.log("Dropped on", props.id);
},
canDrop(props, monitor, component){
var cardColumn = monitor.getItem().column;
var targetColumn = props.column;
return false; // still testing styling when only an element is being dragged on the page
}
};
@DropTarget(ItemTypes.CARD, target, (connect, monitor) => ({
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver({shallow: true}),
canDrop: monitor.canDrop(),
}))
class CardList extends React.Component{
constructor(props){
super(props);
this.addClass = this.addClass.bind(this);
}
addClass(){
const {isOver, canDrop} = this.props;
if(isOver && canDrop){
return "willDrop"; // green background for .card-list
}
if(isOver && !canDrop){
return "noDrop"; // red background for .card-list
}
if(!isOver && !canDrop){
return ""; // will style all the backgrounds in a color, but not when dragging
}
}
render(){
const {connectDropTarget} = this.props;
return connectDropTarget(
<div class={"card-list col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 " + this.addClass()} id={this.props.id}>
{this.props.children}
</div>
);
}
}
export default CardList;
有没有办法在页面上拖动元素时获取 isDragging
值,因为这是获得我想要的唯一可能。
谢谢!
isOver 和 canDrop 都隐式执行 isDragging 检查,根据 http://react-dnd.github.io/react-dnd/docs-drop-target-monitor.html - 请注意,只有在拖动操作正在进行时它们才 return 为真。因此,如果您想设置放置目标的样式,使其仅在拖动可拖动的内容时才被拖动,那么我认为您需要在 addClass() 函数中使用另一种情况来处理它,如下所示:
addClass(){
const {isOver, canDrop} = this.props;
if(isOver && canDrop){
return "willDrop"; // green background for .card-list
}
if(isOver && !canDrop){
return "noDrop"; // red background for .card-list
}
if(!isOver && canDrop){
return ""; // THIS BLOCK WILL EXECUTE IF SOMETHING IS BEING DRAGGED THAT *COULD* BE DROPPED HERE
}
}
而且我认为您不需要 !isOver && !canDrop 块 - 即使根本没有拖动任何东西,它也会执行。
我正在使用 react-dnd
库实现拖放机制,但我发现很难设置放置目标的样式。我想向用户显示可以放置哪个放置目标,但是使用 isOver
和 canDrop
只会设置当前悬停在其上的项目的样式。
如果我使用 !isOver
值,所有 div 都会被设置样式,甚至不需要拖动任何元素。
当发生拖动元素时,如何设置放置目标的样式 only?
到目前为止,这是我的代码,对于 @DropTarget
:
import React from 'react';
import {DropTarget} from 'react-dnd';
import {ItemTypes} from './Constants';
const target = {
drop(props, monitor, component){
// console.log("Dropped on", props.id);
},
canDrop(props, monitor, component){
var cardColumn = monitor.getItem().column;
var targetColumn = props.column;
return false; // still testing styling when only an element is being dragged on the page
}
};
@DropTarget(ItemTypes.CARD, target, (connect, monitor) => ({
connectDropTarget: connect.dropTarget(),
isOver: monitor.isOver({shallow: true}),
canDrop: monitor.canDrop(),
}))
class CardList extends React.Component{
constructor(props){
super(props);
this.addClass = this.addClass.bind(this);
}
addClass(){
const {isOver, canDrop} = this.props;
if(isOver && canDrop){
return "willDrop"; // green background for .card-list
}
if(isOver && !canDrop){
return "noDrop"; // red background for .card-list
}
if(!isOver && !canDrop){
return ""; // will style all the backgrounds in a color, but not when dragging
}
}
render(){
const {connectDropTarget} = this.props;
return connectDropTarget(
<div class={"card-list col-xl-12 col-lg-12 col-md-12 col-sm-12 col-xs-12 " + this.addClass()} id={this.props.id}>
{this.props.children}
</div>
);
}
}
export default CardList;
有没有办法在页面上拖动元素时获取 isDragging
值,因为这是获得我想要的唯一可能。
谢谢!
isOver 和 canDrop 都隐式执行 isDragging 检查,根据 http://react-dnd.github.io/react-dnd/docs-drop-target-monitor.html - 请注意,只有在拖动操作正在进行时它们才 return 为真。因此,如果您想设置放置目标的样式,使其仅在拖动可拖动的内容时才被拖动,那么我认为您需要在 addClass() 函数中使用另一种情况来处理它,如下所示:
addClass(){
const {isOver, canDrop} = this.props;
if(isOver && canDrop){
return "willDrop"; // green background for .card-list
}
if(isOver && !canDrop){
return "noDrop"; // red background for .card-list
}
if(!isOver && canDrop){
return ""; // THIS BLOCK WILL EXECUTE IF SOMETHING IS BEING DRAGGED THAT *COULD* BE DROPPED HERE
}
}
而且我认为您不需要 !isOver && !canDrop 块 - 即使根本没有拖动任何东西,它也会执行。