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

react dnd demo的更多相关文章

  1. 从DOM操作看Vue&React的前端组件化,顺带补齐React的demo

    前言 接上文:谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo 上次写完博客后,有朋友反应第一内容有点深,看着迷迷糊糊:第二是感觉没什么使用场景,太过业务化,还不如直接写Vue ...

  2. 强大的拖拽组件:React DnD 的使用

    强大的拖拽组件:React DnD 的使用 react.js 10.6k 次阅读  ·  读完需要 25 分钟 17 文章首发我的个人blog : 原文链接 学习 React DnD 的最初原因是阅读 ...

  3. 谈谈我对前端组件化中“组件”的理解,顺带写个Vue与React的demo

    前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...

  4. 我的第一个 react redux demo

    最近学习react redux,先前看过了几本书和一些博客之类的,感觉还不错,比如<深入浅出react和redux>,<React全栈++Redux+Flux+webpack+Bab ...

  5. react基本demo详解

    一.react的优势 1.React速度很快:它并不直接对DOM进行操作,引入了一个叫做虚拟DOM的概念,安插在javascript逻辑和实际的DOM之间,性能好. 2.跨浏览器兼容:虚拟DOM帮助我 ...

  6. rails下react的demo

    gemfile gem 'react-rails' gen一下 react:install 创建组件 react:component MyComponent name:string age:int v ...

  7. react dnd demo2

    import React, { Component } from 'react'; import './App.css'; import Card from './Card'; import HTML ...

  8. react购物车demo

    import React, { Component } from 'react'; import './App.css'; import {connect} from 'react-redux'; i ...

  9. React Native DEMO for Android

    Demo1: 主要知识:navigator,fecth 地址:https://github.com/hongguangKim/ReactNativeDEMO1 Demo2: 主要知识:navigato ...

随机推荐

  1. Spring之旅第三篇-Spring配置详解

    上一篇学习了IOC的概念并初步分析了实现原理,这篇主要学习Spring的配置,话不多说,让我们开始! 一.Bean元素配置 1.1 基本配置 看一个最基本的bean配置 <bean name=& ...

  2. 《前端之路》之 Cookie && localStorage && Session Storage 缓存相关

    08: Cookie && localStorage && Session Storage 缓存相关 客户端.前端 存储 一. 起 因 首先解释下为什么想来写这个关于前 ...

  3. 【Android Studio安装部署系列】二十一、Android studio将项目上传到github中

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 概述 两个相关概念:git和github Git是一个开源的分布式版本控制系统,用以有效.高速的处理从很小到非常大的项目版本管理.Git ...

  4. 服务器性能测试工具 ---- nmon

    一.下载nmon 根据CPU的类型选择下载相应的版本: http://nmon.sourceforge.net/pmwiki.php?n=Site.Downloadwget http://source ...

  5. JVM回收算法

    根搜索算法 原理:设立若干种根对象,当任何一个根对象到某一个对象均不可达时,则认为这个对象是可以被回收的.一般是对象持有的引用指向该对象不可达 在JAVA语言中,可以当做GC roots的对象有以下几 ...

  6. 【Python3爬虫】使用异步协程编写爬虫

    一.基本概念 进程:进程是一个具有独立功能的程序关于某个数据集合的一次运行活动.进程是操作系统动态执行的基本单元. 线程:一个进程中包含若干线程,当然至少有一个线程,线程可以利用进程所拥有的资源.线程 ...

  7. SQL优化 MySQL版 - 多表优化及细节详讲

    多表优化及细节详讲 作者 : Stanley 罗昊 [转载请注明出处和署名,谢谢!] 注:本文章需要MySQL数据库优化基础或观看前几篇文章,传送门: B树索引详讲(初识SQL优化,认识索引):htt ...

  8. Java将数据按列写入Excel并设置格式(字体、背景色、自动列宽、对齐方式等)

    本文使用jxl.jar工具类库将数据按列写入Excel并设置格式(字体.背景色.自动列宽.对齐方式等). /** * 按列写入Excel并设置格式 * * @param outputUrl * 输出路 ...

  9. centos7+rsyslog+loganalyzer+mysql 搭建rsyslog日志服务器

    一.简介 在centos7系统中,默认的日志系统是rsyslog,它是一类unix系统上使用的开源工具,用于在ip网络中转发日志信息,rsyslog采用模块化设计,是syslog的替代品. 1.rsy ...

  10. Sql万能分页代码

    sql数据库中常用的分页 我做了一个万能的 用的上的小伙伴拿去耍吧 go  ----万能分页代码create procedure [dbo].[sp_datapager] @pagesize int, ...