React DnD仅在拖动时更改div样式

时间:2017-12-24 17:57:11

标签: react-dnd

我正在使用react-dnd库实现拖放机制,但我发现很难设置我的放置目标。我想向用户显示哪个放置目标可供使用,但使用isOvercanDrop只会设置当前正在悬停的项目的样式。
如果我使用!isOver值,则所有div都被设置样式,甚至不拖动任何元素。
当拖动元素时,如何设置放置目标 的样式? 到目前为止,这是我的代码@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值,因为这是获得我想要的唯一可能性。
谢谢!

1 个答案:

答案 0 :(得分:0)

isOver和canDrop都隐式地执行isDragging检查,每http://react-dnd.github.io/react-dnd/docs-drop-target-monitor.html - 请注意,如果正在进行拖动操作,它们只会返回true。因此,如果你想设置放置目标的样式,只有当拖动的东西被拖动时,我认为你需要在你的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&amp;&amp; !canDrop阻止 - 即使没有任何东西被拖动也会执行。