ENG
  • KOR
  • ENG
  • JPN

react-dnd

ui-component reactive framework

react-dndは、Reactアプリケーションでドラッグアンドドロップインターフェースを簡単に実装できるようにするライブラリです。これにより、開発者は複雑なマウスイベントロジックを処理することなく、効率的にアプリケーションにドラッグアンドドロップ機能を統合できます。

Latest Ver 16.0.1
Homepage
Github
1
21,399
📢 react-dndは、Reactベースのアプリケーションでドラッグアンドドロップ機能を実装するためのライブラリです。

CDNダウンロード

License: MIT
すべてのバージョンを見る
https://cdnjs.cloudflare.com/ajax/libs/react-dnd/16.0.1/core/DndContext.js
https://cdnjs.cloudflare.com/ajax/libs/react-dnd/16.0.1/core/DndContext.min.js
https://cdnjs.cloudflare.com/ajax/libs/react-dnd/16.0.1/core/DndProvider.js
https://cdnjs.cloudflare.com/ajax/libs/react-dnd/16.0.1/core/DndProvider.min.js
https://cdnjs.cloudflare.com/ajax/libs/react-dnd/16.0.1/core/DragPreviewImage.js
https://cdnjs.cloudflare.com/ajax/libs/react-dnd/16.0.1/core/DragPreviewImage.min.js
https://cdnjs.cloudflare.com/ajax/libs/react-dnd/16.0.1/core/index.js
https://cdnjs.cloudflare.com/ajax/libs/react-dnd/16.0.1/core/index.min.js
https://cdnjs.cloudflare.com/ajax/libs/react-dnd/16.0.1/hooks/index.js
https://cdnjs.cloudflare.com/ajax/libs/react-dnd/16.0.1/hooks/index.min.js

Sample Code

⚠️ import 文を含む一部のコードは、jsFiddleで正しく実行されない場合があります。エラーが発生した場合は、コードをコピーしてご自身の環境でお試しください。 
⚙️ JavaScript
{ "import": "import { useDrag, useDrop } from 'react-dnd';", "usage": "const [{ isDragging }, drag] = useDrag(() => ({ type: 'BOX', item: { id }, collect: (monitor) => ({ isDragging: !!monitor.isDragging() }) })); const [{ isOver }, drop] = useDrop(() => ({ accept: 'BOX', drop: () => handleDrop(id), collect: monitor => ({ isOver: !!monitor.isOver() }) }));" }

Related Libraries

Library Icon
react

'react'ライブラリはコンポーネントベースのアーキテクチャを通じてユーザーインターフェースの構築を容易にします。

Library Icon
redux

Reduxは、アプリケーションの状態を予測可能な方法で管理・維持するためのJavaScriptライブラリです。Fluxアーキテクチャパターンに基づいており、アプリケーション全体でアクセスできるグローバル状態コンテナを提供します。

⚡ Top Tools for Developers
Text Compare

テキスト比較

2つのテキストの違いを一目で確認できます。

Favicon Generator

Faviconジェネレーター

簡単かつ迅速にファビコンを生成します。

Lorem Ipsum Generator

Lorem Ipsumジェネレーター

デザイン用のダミーテキストを生成します。

Character Counter

文字数カウント

文字数と単語数をリアルタイムで確認できます。

SRT ↔ SMI

SRT ↔ SMI変換ツール

字幕形式を簡単に変換できます。

Text Extract(OCR)

画像テキスト抽出

画像内のテキストを自動で抽出します。