zoukankan      html  css  js  c++  java
  • react-dnd 介绍及使用,react-dnd实现拖拽效果,

    react-dnd  是什么?
    干嘛用?
    如何使用?
    在什么情况下使用?

    一、概念
    React DnD 是一组 React 高阶组件,使用的时候只需要使用对应的 API 将目标组件进行包裹,即可实现拖动或接受拖动元素的功能。将拖动的事件转换成对象中对应状态的形式,不需要开发者自己判断拖动状态,只需要在传入的 spec 对象中各个状态属性中做对应处理即可。刚刚接触可能难以理解,真正熟悉用法之后会感觉很方便。


    几个概念

    • DragSource 用于包装你需要拖动的组件,使组件能够被拖拽(make it draggable)
    • DropTarget 用于包装接收拖拽元素的组件,使组件能够放置(dropped on it)
    • DragDropContext 用于包装拖拽根组件,DragSource 和 DropTarget 都需要包裹在DragDropContext内

    参数说明

     DragSource(type, spec, collect)
     DropTarget (type, spec, collect)
     
    DragSource和DropTarget各有三个参数
    type: 拖拽类型,必填。当 source组件的type 和 target组件的type 一致时,target组件可以接受source组件。 spec: 拖拽事件的方法对象,必填。 collect: 把拖拽过程中需要信息注入组件的 props,接收两个参数 connect and monitor,必填。
    
    
    





    
    
    


    二、DragSource:使组件能够被拖拽

    使用 DragSource 包裹住组件,使其可以进行拖动。



    
    
    

































































































      

    1、路在何方? 路在脚下 2、何去何从? 每个人都在探索,未来的方向在何处。如果说某些方向是世人已经公认的,那么就先按照公认的去走吧(ps:站在巨人的肩膀上看世界会清晰)。 如果说方向,当今世人还不清晰准确。那么就大胆往前走吧,对与错并不重要。心中的方向更加重要。
  • 相关阅读:
    mongodb本地搭建过程
    vue-cli+webpack搭建简单的vue项目框架
    jquery效果
    通过类名查找类名里面的标签
    高亮显示代码部分
    高亮显示用户键盘输入(<kbd>)
    排版----描述
    排版----引用
    排版----首字母缩略语()
    排版----缩略语(<title>)
  • 原文地址:https://www.cnblogs.com/yuanjili666/p/12060836.html
Copyright © 2011-2022 走看看