反応におけるドラッグ可能な構成要素の作製

ユーザーの対話性が現代的なアプリケーションでより一般的になると、それは時々あなたのアプリで実装されたドラッグ可能なコンポーネントを持つことが良いです.トレックスやWIXのようなウェブサイトビルダーの考えてください.彼らはそれを簡単かつ直感的にユーザーのためのドラッグアンドドロップ要素があります.
皆さんこんにちは!この記事では、いくつかの簡単な方法を説明するdraggableコンポーネントの反応を使用してreact-draggable package .

ステップ1 : NPMパッケージのインストール

あなたの反応アプリを作成した後npx create-react-app my-app , 実行:

npm install react-draggable

ステップ2：ドラッグ可能なコンポーネントを追加する

インApp.js , 単にドラッグ可能なコンポーネントをインポートします.

import Draggable from 'react-draggable';

次に、このようにしてドロジーにしたい要素をラップします.

<Draggable>
    <div className="box">
        <div>Move me around!</div>
    </div>
</Draggable>

我々は、いくつかのCSSを追加することができますbox :

.box {
  position: absolute;
  cursor: move;
  color: black;
  max-width: 215px;
  border-radius: 5px;
  padding: 1em;
  margin: auto;
  user-select: none;
}

そして、それ！

それはとても簡単ですね.今すぐドラッグして少しドラッグしてカスタマイズすることができますドラッグ可能なコンポーネントのいくつかのクールなプロパティを議論しましょう.

1軸上のドラッグ

The axis プロパティをboth 上記の例で見られるようにデフォルトでは、コンポーネントを任意の方向にドラッグすることができます.その他の値は以下の通りです.

軸=“x”:コンポーネントを水平方向にドラッグすることができます.

軸=“Y”:コンポーネントは垂直にドラッグすることができます.

axis ="none ":コンポーネントをドラッグすることはできません.

一例

以下の例を示します.

2 .ドラッシャブルの位置を追跡する

The onDrag コンポーネントがドラッグされるたびにイベントハンドラーが発生します.コンポーネントの位置を追跡するために使用できます.
まず、インポートuseState フック

import React, { useState } from "react";

そして、position 我々の位置を格納する状態.

const [position, setPosition] = useState({ x: 0, y: 0 });

次に、当社の' Trackpos '関数は、我々の更新されますposition いつでもonDrag がトリガされる.

const trackPos = (data) => {
    setPosition({ x: data.x, y: data.y });
 };

そして、この関数をonDrag がトリガされる.

<Draggable onDrag={(e, data) => trackPos(data)}>
   <div className="box">
       <div>Here's my position...</div>
       <div>
            x: {position.x.toFixed(0)}, y: {position.y.toFixed(0)}
       </div>
   </div>
</Draggable>

結果。

3 .ハンドルにのみドラッグ可能

を含めることができますhandle そのハンドルの上でのみドラッグを許可するプロパティ.例えば、

<Draggable handle="#handle">
   <div className="box">
      <span id="handle">Drag here</span>
         <div style={{ padding: "1em" }}>Cannot drag here</div>
   </div>
</Draggable>

結果。

結論

この記事では、我々はdraggableに反応するために導入され、どのように我々はドラッグ可能なコンポーネントを作るために使用します.また、draggableなコンポーネントをさらにカスタマイズすることができる多くの特性のいくつかについて議論しました.ドラッグ可能な要素を持つインタラクティブなアプリケーションを構築するために便利です.私が作ったこのミニプロジェクトをチェックしてくださいbulletin board app それはドラッグ可能な機能を利用します.参照repo コード用.

反応Dragableに関する詳細については、そのドキュメンテーションをチェックしてくださいhere . この記事が役に立ちましたら幸いです.閉じるこの動画はお気に入りから削除されています.以下のコメントでこのパッケージで作られたどんな質問でも共有してください.乾杯!