React Draggableを使ってみた

はい、hebiです。

作成したコンポーネントを動かす要件があり、Draggableライブラリを使ってみたため記事にしたいと思います。

React-Draggableのインストール

「npm install react-draggable」でインストールを行い、’react-draggable’をインポートすることで簡単にコンポーネントを移動することがきるようになります。

Draggableを使ってみる

では、Draggableを使ってみます。

import Draggable from "react-draggable"; // The default

export const Test = () => {
  return (
    <div>
      <Draggable>
        <div style={{ fontSize: "50px" }}>☆</div>
      </Draggable>
    </div>
  );
};

<Draggable>タグで囲んだ<div>タグを移動できるようになりました。

Draggableのprops

Draggableには移動範囲やMouseDownイベント、Dragイベントなどを指定できるpropsが準備されており、要件に合わせた実装ができるようになっております。

今回の要件としてx軸のみの移動だったため、axis=’x’を使用しました。

最後に

移動が簡単にできるようにするための「Draggable」の紹介でした。
とても簡単に利用できたので、使ってみてください。

最後までお読みいただきありがとうございました(^^♪

スポンサーリンク

hebi

エンジニア

Twitter

フルスタックエンジニアとして活躍中。
HTML5プロフェッショナル認定Level1、Level2所持者です。

未経験の方でも簡単にプログラミングを学べるようにと情報を発信しております。