react-draggable

React-Draggableは、要素をドラッグ可能にするためのReactコンポーネントライブラリです。react-grid-layout組織の一部であり、npmにreact-draggableとして公開されています。 このライブラリは2つのコンポーネントを提供します。`<Draggable>`は既存の要素をラップし、ドラッグイベントハンドラとスタイルを拡張し、CSS Transformsを介してアイテムを移動するため、現在の配置に関係なくドラッグできます。DOMにラッパー要素は作成されません。`<DraggableCore>`は、完全な制御を必要とするユーザー向けの低レベルオプションです。状態やスタイルを管理せずにドラッグコールバックを提供し、トランスフォームを設定しないため、配置は開発者に委ねられます。READMEは、DraggableCoreの使用例としてReact-ResizableとReact-Grid-Layoutを参照しています。 `<Draggable>`の主要なプロパティには、axis（both、x、y、none）、bounds（parent、CSSセレクタ、またはleft/top/right/bottomオブジェクト）、cancelおよびhandle CSSセレクタ、グリッドスナップ、制御された使用のためのposition、positionOffset、変換された親のためのscale、disabled、およびonStart、onDrag、onStop、onMouseDownのコールバックが含まれます。ハンドラに渡されるDraggableDataには、node、x、y、deltaX、deltaY、lastX、lastYが含まれます。onStartからfalseを返すとドラッグがキャンセルされます。`<Draggable>`にclassName、style、またはtransformを設定するとエラーになります。これらは子要素に属します。 READMEは互換性を文書化しています：バージョン4.xはReact 16.3+をサポートし、3.xはReact 15〜16を、2.xはReact 0.14〜15をサポートします。TypeScript型が含まれています。インストールはnpmまたはyarnを介して行われ、ESモジュールとCommonJSのインポート例があります。 注目すべきセクションではnodeRefについて説明しています：nodeRefプロパティを渡すと、React Strict ModeでのReactDOM.findDOMNode()非推奨警告を回避でき、READMEはカスタムコンポーネントにrefとpropsの両方を転送する方法を示しています。別のセクションでは、制御された使用と非制御の使用について説明し、Draggableの状態管理を使用しながらプログラムによる再配置のためにpositionプロパティを渡す方法を示しています。 Content Security Policyセクションでは、react-draggableが最初のドラッグ時にドキュメントヘッドに小さなスタイル要素を注入する（デフォルトで有効なenableUserSelectHack動作）ことで、ドラッグ中のテキスト選択を防ぐと説明しています。style-srcに'unsafe-inline'がない厳格なCSPでは、これはブロックされます。3つの対策が文書化されています：nonceプロパティを渡す、webpackの__webpack_nonce__グローバルフォールバックに依存する、またはenableUserSelectHack={false}を設定して2つの選択ルールを独自のスタイルシートに追加する。nonceは要素が最初に作成されたときにのみ読み取られ、同じ要素がページ上のすべてのDraggable/DraggableCoreで共有されます。 リポジトリには、デモサイト、変更ログ、CIワークフロー、およびyarn dev、yarn test、makeターゲットを使用したリリースチェックリストを含む貢献手順が含まれています。プロジェクトはMITライセンスです。