Nodo.jsからSQLServerに接続しデータを取得する方法
hebishima.shogo
プログラマーのあれこれ
はい、hebiです。
作成したコンポーネントを動かす要件があり、Draggableライブラリを使ってみたため記事にしたいと思います。
「npm install react-draggable」でインストールを行い、’react-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には移動範囲やMouseDownイベント、Dragイベントなどを指定できるpropsが準備されており、要件に合わせた実装ができるようになっております。
今回の要件としてx軸のみの移動だったため、axis=’x’を使用しました。
移動が簡単にできるようにするための「Draggable」の紹介でした。
とても簡単に利用できたので、使ってみてください。
最後までお読みいただきありがとうございました(^^♪