댓글 검색 목록

[Reactjs] React DnD

페이지 정보

작성자 운영자 작성일 19-10-16 21:24 조회 752 댓글 0

React DnD는 컴포넌트를 분리 된 상태로 유지하면서 복잡한 드래그 앤 드롭 인터페이스를 구축하는 데 도움이 되는 React 유틸리티 세트입니다.

드래그 하면 응용 프로그램의 여러 부분간에 데이터가 전송되고 구성 요소가 드래그 앤 드롭 이벤트에 따라 모양과 응용 프로그램 상태가 변경되는 Trello 및 Storify와 같은 앱에 적합합니다.


http://react-dnd.github.io/react-dnd 


설치 


# Using new-hotness ESModules
yarn add react-dnd react-dnd-html5-backend


# Using legacy, node-friendly CommonJS
yarn add react-dnd-cjs react-dnd-html5-backend-cjs

두 번째 패키지는 React DnD에서 HTML5 드래그 앤 드롭 API를 후드 아래에 허용합니다. 터치 백엔드와 같은 타사 백엔드를 대신 사용할 수도 있습니다.


그것은 어떻게 생겼습니까? 


// Let's make <Card text='Write the docs' /> draggable!

import React from 'react'
import { useDrag } from 'react-dnd'
import { ItemTypes } from './Constants'

/**
 * Your Component
 */
export default function Card({ isDragging, text }) {
  const [{ opacity }, dragRef] = useDrag({
    item: { type: ItemTypes.CARD, text },
    collect: monitor => ({
      opacity: monitor.isDragging() ? 0.5 : 1,
    }),
  })
  return (
    <div ref={dragRef} style={{ opacity }}>
      {text}
    </div>
  )
}










댓글목록 0

등록된 댓글이 없습니다.

웹학교 로고

온라인 코딩학교

코리아뉴스 2001 - , All right reserved.