React-dnd实现拖拽，最简单代码，直接可以跑

xiaokai 发布于2019-08-23 17:51 / 723人阅读

摘要：不多说，直接上代码需要版本貌似与方法有关类似的高阶组件包裹被拖的元素高阶组件包裹被释放的元素这个库是必须的，类似于的合成事件解决浏览器差异，抽象事件操作为可以处理的

不多说，直接上代码

react-dnd 需要react版本 > 16.6 ,貌似与react.memo方法有关

import React from "react"
// DragDropContext 类似React的Context
// DragSource 高阶组件 包裹被拖的元素
// DropTarget 高阶组件 包裹被释放的元素 
import {DragDropContext, DragSource, DropTarget} from "react-dnd";
// HTML5Backend  这个库是必须的，类似于React的合成事件
// 解决浏览器差异，抽象事件操作为可以处理的state
import HTML5Backend from "react-dnd-html5-backend";
import "./index.css"

const data = [
  {id: 10, text: "1"},
  {id: 11, text: "2"},
  {id: 12, text: "3"},
  {id: 13, text: "4"},
  {id: 14, text: "5"}
]

const datas = {
  data
}

class Item extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {
    const {connectDragSource, connectDropTarget, move, ...restProps} = this.props;
    return (
      connectDragSource(
        connectDropTarget(
          {restProps.text}
        )
      )
    )
  }
}


const dragNode = DragSource("li", {
  beginDrag(props, monitor, component) {
    return {
      index: props.index,
    };
  },
}, connect => ({
  connectDragSource: connect.dragSource(),
}))(Item);


const DropNode = DropTarget("li", {
    drop(props, monitor) {
      const dragIndex = monitor.getItem().index;
      const hoverIndex = props.index;
      if (dragIndex === hoverIndex) return;
      props.move(dragIndex, hoverIndex);
      //monitor.getItem().index = hoverIndex;
    }
  }, function (connect) {
    return {
      connectDropTarget: connect.dropTarget()
    }
  }
)(dragNode)


class Demo extends React.Component {
  state = datas;

  moveRow = (start, end) => {
    let {data} = this.state;
    let temp = data[start]
    data[start] = data[end];
    data[end] = temp;
    this.setState({data})
  }

  render() {

    return (
      
        {
          this.state.data.map( (item, index) => {

            const prop = {
              move: this.moveRow,
              key: item.id,
              id: item.id,
              text: item.text,
              index: index
            }
            return 

          })
        }
      
    )
  }
}

export default DragDropContext(HTML5Backend)(Demo);

GPU云服务器云服务器最简单的asp代码简单拖拽实现拖拽可以直接

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104241.html

使用React DND 完成一个简单的卡片排序功能

摘要：简介在公司初学其中一个要求让我实现拖拽排序的功能完成之后记录一下实现方法，采用和来实现这个功能。一环境搭建首先，使用脚手架创建一个最基本的项目。简介在公司初学react,其中一个要求让我实现拖拽排序的功能,完成之后记录一下实现方法，采用antd和reactDND来实现这个功能。一、环境搭建首先，使用 create-react-app 脚手架创建一个最基本的react项目。 np...

edgardeng 2019-08-26 12:25 评论0 收藏0
react-dnd中context丢失解决方法

摘要：等等这不就用的将的给覆盖了么这也很合理的解释了为啥会报错了。嗯还是拿不到，想起来了，虽然将静态属性拿了出来，但是原型方法不会拿出来啊，所以的就没用了，所以我们需要也将他拿出来，于是，加上一下代码这次总算拿到正确的结果了，开心踩坑场景在做业务的时候，有些模块是可以拖动的，恰好这些模块需要从根组件App的context上拿属性，同时App也是作为拖动上下文，被@DragDropCont...

Arno 2019-08-21 12:01 评论0 收藏0
写了一个简单、灵活的React标签组件

摘要：最近的项目里需要实现一个标签组件，内部标签可任意拖动排序。网上搜了一圈发现几乎没有现成的基于的组件能很好的满足需求。最近的项目里需要实现一个标签组件，内部标签可任意拖动排序。网上搜了一圈发现几乎没有现成的基于react的组件能很好的满足需求。较为知名的是react-dnd，然而它似乎只支持把一个元素移到固定的位置，我需要的是一个标签可以移动到任意位置的两个标签之间（每个标签长度不固...

arashicage 2019-08-22 17:36 评论0 收藏0
页面搭建工具总结及架构思考

摘要：在初步完成了在线流程图编辑工具之后又接到了在线搭建页面工具的需求刚开始其实并不想接项目因为从历史以及现实原因来看个性化及动态渲染都是很难解决的痛点各种页面搭建工具的不温不火早已说明了这条路并没有这么好走但从另一个方面来说既然有了这样的需求那在初步完成了在线流程图编辑工具之后,又接到了在线搭建页面工具的需求,刚开始其实并不想接项目,因为从历史以及现实原因来看,个性化及动态渲染都是很难解决的痛...

William_Sang 2019-04-23 11:57 评论0 收藏0
使用 Drag and Drop 给Web应用提升交互体验

摘要：注意点在鼠标操作拖放期间，有一些事件可能触发多次，比如和。可拖拽元素，建议使用，设定可拖拽元素的鼠标游标，提升交互。在中使用拖拽中使用可以直接绑定到组件上。什么是 Drag and Drop （拖放）？简单来说，HTML5 提供了 Drag and Drop API，允许用户用鼠标选中一个可拖动元素，移动鼠标拖放到一个可放置到元素的过程。我相信每个人都或多或少接触过拖放，比如浏览...

legendmohe 2019-08-02 12:03 评论0 收藏0