react dnd demo

发布时间：2020-12-15 20:17:29 所属栏目：百科来源：网络整理

导读：target import React,{ Component } from ‘react‘ ;import { DropTarget } from ‘react-dnd‘ ;import Item from ‘../components/Item‘ ;import styles from ‘./IndexPage.css‘ ;const boxTarget = { // 当有对应的 drag source 放在当前组件区域时，

target

import React,{ Component } from ‘react‘;
import { DropTarget } from ‘react-dnd‘;
import Item from ‘../components/Item‘;
import styles from ‘./IndexPage.css‘;


const boxTarget = {
    // 当有对应的 drag source 放在当前组件区域时，会返回一个对象，可以在 monitor.getDropResult() 中获取到
    drop(props,monitor,component) {
      console.log(monitor.didDrop());
      const { key } = monitor.getItem();
      // props.handDrop(key);
  },hover(props,component) {
    return monitor.isOver({ shallow: true })
  },canDrop(props,monitor) {
    return  monitor.getItem();
  }
}

function collect ( connect,monitor) {
  return {
    connectDropTarget: connect.dropTarget(),hovered: monitor.isOver(),canDrop: monitor.canDrop(),item: monitor.getItem(),}; 
}

class Target extends Component {
  
  render(){
    const { connectDropTarget,hovered,arr,canDrop,item,handDrop } = this.props;
    console.log(this.props);
    const backgroundColor = hovered ? ‘lightgreen‘ : ‘white‘;
    const isActive = canDrop && hovered;
    // if ( isActive && item) {
    //   handDrop(item.key);
    // }
    return connectDropTarget(
      <div className={styles.target} style={{background:backgroundColor}}>
          target
          {arr.map(item => <Item key={item.key} item={item}/>)}
      </div>
    );
  }
}

export default DropTarget(‘item‘,{},collect)(Target);

item

import React,{ Component } from ‘react‘;
import { DragSource } from "react-dnd";

const itemSoure = {
beginDrag(props) {
return props.item;
},endDrag(props,component) {
if (!monitor.didDrop()) {
return;
}
return props.handDrop(props.item.key)
// const item = monitor.getItem()
    // // 拖拽元素放下时，drop 结果
// const dropResult = monitor.getDropResult()
// console.log(dropResult);
// if (props.handDrop) {
 
// } else {
// return ;
// }
}
};

function collect (connect,monitor){
return {
connectDragSource: connect.dragSource(),connectDragPreview: connect.dragPreview(),isDragging: monitor.isDragging()
};
}

class Item extends Component {
render(){
 
const { text,isDragging,connectDragSource,item} = this.props;
return connectDragSource(
<div className={{}}>
{item.text}
</div>
)
}
}

Item.propTypes = {
};

export default DragSource(‘item‘,itemSoure,collect)(Item);

app

import React,{ Component } from ‘react‘;
import { connect } from ‘dva‘;
import HTML5Backend from ‘react-dnd-html5-backend‘;
import { DragDropContext } from ‘react-dnd‘;
import styles from ‘./IndexPage.css‘;
import  Item from ‘../components/Example‘;
import Target from ‘./Target‘;

class App extends Component {
  state = {
    list : [
      {key: 0,text: ‘text1‘},{key: 1,text: ‘text2‘},{key: 2,text: ‘text3‘},{key: 3,text: ‘text4‘}
    ],arr:[]
  }
  deleteitem = key => {
   const { list } = this.state;
  //  this.setState({
  //    list: list.filter( item => item.key !== key)
  //  })
   this.setState( preState => {
     let items = preState.list;
     const index = items.findIndex(item => item.key === key);
     items.splice(index,1);
     return {items};
   })
  }
  additem = key => {
   
   this.setState( preState => {
     const arr = preState.arr;    
     let list = preState.list;
     const index = list.findIndex(item => item.key === key);
     arr.push(list[index]);
     list.splice(index,1);
     return {list,arr};
   })
  }

  additems = key => {
   
    this.setState( preState => {
      const arr = preState.arr;    
      let list = preState.list;
      const index = arr.findIndex(item => item.key === key);
      list.push(list[index]);
      arr.splice(index,1);
      return {list,arr};
    })
   }
  render(){
     return (
       <div className={styles.normal}>
          <header>
            demo
          </header>
          <div>
            {this.state.list.map(item => <Item key={item.key} item={item} handDrop={(key) => (this.additem(key))}/>)}
          </div>
          <Target arr={this.state.arr} />
       </div>
     );
  }
}


export default DragDropContext(HTML5Backend)(App);

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!