react dnd demo

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, monitor, 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,monitor,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);