React コンポーネント/Div をドラッグ可能にする
-
React のコンポーネント/Div を
onMouseでドラッグ可能にする - React-Draggable 依存関係を使用して React コンポーネント/Div をドラッグ可能にする
- Beautiful DnD で React の Component/Div をドラッグ可能にする
- まとめ
今では、ウェブサイトビルダーになることや、ウェブサイト構築を趣味として選ぶことは楽しいことです。ジグソーパズルのように、マウスを使ってコンテンツを選択して配置するだけで、Web サイトを構築できます。
ユーザーがアイテムを簡単にドラッグアンドドロップできるコンテンツやアプリを作成すると、初心者でも使いやすくなり、市場で広く受け入れられるようになります。
React でアプリやゲームを作成する場合、コンテンツをドラッグアンドドロップする機能により、より複雑なタスクであっても、これらのタスクを簡単かつ迅速に完了することができます。
コンポーネントをドラッグ可能にする方法を学ぶのに役立つ例を見てみましょう。
React のコンポーネント/Div を onMouse でドラッグ可能にする
React ドラッグ可能機能は、大量のイベントリスナーを利用しますが、この例では、onMouseDown、onMouseMove、および onMouseUp の 3つを利用します。
まず、新しい React プロジェクトを作成します。ターミナルを VS コードで開き、npx create-react-app dragone と入力します。
次に、dragone フォルダに移動して、2つのフォルダを作成します。最初のフォルダには Main という名前が付けられ、その中に MainApp.js ファイルと MainApp.css ファイルが作成されます。
これらのファイルには、ホームページのコードが含まれます。
2 番目のフォルダーには Components という名前が付けられ、その中に Dialog.js と Dialog.css の 2つのファイルがあります。これらは、ブラウザ画面全体にドラッグするコンポーネントになります。
MainApp.js 内に、次のコードを入力します。
コードスニペット（MainApp.js）：
import React, { Component } from 'react';
import './MainApp.css';
import Dialog from '../Components/Dialog';
export default class MainApp extends Component {
constructor(props) {
super(props);
this.state = {
showDialog: false
}
}
_showDialog() {
this.setState({showDialog: !this.state.showDialog});
}
render() {
return (
<div className='MainApp'>
<div className='Title'>Example Dialog Popper</div>
<div className='button' onClick={this._showDialog.bind(this)}> Show Dialog </div>
<Dialog onClose={this._showDialog.bind(this)} show={this.state.showDialog}/>
</div>
);
}
}
このページでは、[ダイアログの表示]ボタンをクリックすると、onClick イベントリスナーがアクティブになり、ドラッグするコンポーネントがポップアップ表示されます。
MainApp.css には、ページを美しくするスタイリングが含まれています。
コードスニペット（MainApp.css）：
.Title {
font-weight: bold;
font-size: 16px;
padding-top: 30px;
}
.button {
font-size: 12px;
width: 100px;
color: black;
border: 2px solid black;
border-radius: 30px;
padding: 10px;
margin: 10px;
margin-left: 650px;
}
.MainApp {
background-color: lightsalmon;
height: 1000px;
}
この例の最良の部分に移動し、ドラッグ可能なコンポーネントを作成します。Dialog.js に向かい、コーディングを行います。
コードスニペット（Dialog.js）：
import React, { Component } from 'react';
import './Dialog.css';
export default class Dialog extends Component {
constructor(props) {
super(props);
this.state = {
diffX: 0,
diffY: 0,
dragging: false,
styles: {}
}
this._dragStart = this._dragStart.bind(this);
this._dragging = this._dragging.bind(this);
this._dragEnd = this._dragEnd.bind(this);
}
_dragStart(e) {
this.setState({
diffX: e.screenX - e.currentTarget.getBoundingClientRect().left,
diffY: e.screenY - e.currentTarget.getBoundingClientRect().top,
dragging: true
});
}
_dragging(e) {
if(this.state.dragging) {
var left = e.screenX - this.state.diffX;
var top = e.screenY - this.state.diffY;
this.setState({
styles: {
left: left,
top: top
}
});
}
}
_dragEnd() {
this.setState({
dragging: false
});
}
render() {
var classes = this.props.show ? 'Dialog' : 'Dialog hidden';
return (
<div className={classes} style={this.state.styles} onMouseDown={this._dragStart} onMouseMove={this._dragging} onMouseUp={this._dragEnd}>
<div className='DialogTitle'>My Dialog</div>
<div className='Contents'>
Contents of the Dialog:
- one
- two
- three
</div>
<div className='closeButton' onClick={this.props.onClose}>
Close
</div>
</div>
);
}
}
コンポーネントをあらゆる状況に配置する状態を定義します。デフォルトの状態では、コンポーネントはどこにも移動しておらず、ドラッグを false に設定しています。
次に、コンポーネントが含まれる 3つの状態、つまり、dragStart、dragging、および dragEnd をバインドし、それぞれを適切な onMouse イベントリスナーに割り当てます。onMouseDown は、マウスがコンポーネントに置かれるとアクティブになり、_dragStart に割り当てられた関数が機能します。
onMouseMove は、コンポーネントがドラッグされていることを示します。これにより、_dragging に割り当てられた機能がアクティブになります。
最後に、onMouseUp は、マウスがコンポーネント上に配置されていないことを示します。これにより、_dragEnd に関連付けられた機能がアクティブになります。
Dialog.css は、ドラッグ可能なコンポーネントのスタイルを設定するためのコードが実行される場所です。
コードスニペット（Dialog.css）：
.Dialog {
width: 400px;
height: 400px;
background-color: lightblue;
border-radius: 10px;
border: 3px solid grey;
position: absolute;
cursor: move;
top: 150px;
left: 520px;
}
.hidden {
display: none;
}
.DialogTitle {
font-weight: bold;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 3px solid grey;
}
.Contents {
padding-top: 50px;
padding-bottom: 200px;
}
.closeButton {
font-size: 12px;
width: 100px;
color: black;
border: 2px solid black;
border-radius: 25px;
padding: 10px;
margin: 10px;
margin-left: 140px;
cursor: pointer;
}
次に、次のように MainApp を App.js にインポートします。
コードスニペット（App.js）：
import React from 'react';
import './App.css';
import MainApp from './Main/MainApp.js';
function App() {
return (
<div className="App">
<MainApp />
</div>
);
}
export default App;
出力：
React-Draggable 依存関係を使用して React コンポーネント/Div をドラッグ可能にする
また、react の依存関係を利用して、コンポーネントをドラッグ可能にすることもできます。npx create-react-app dragtwo を使用して新しいプロジェクトを作成した後。
dragtwo フォルダに移動して、依存関係をインストールします。ターミナルで、npm install react-draggable と入力します。
次に、App.js に移動して、コーディングを少し行います。
コードスニペット（App.js）：
import logo from './logo.svg';
import './App.css';
import Draggable from "react-draggable";
function App() {
return (
<Draggable>
<img
src="https://images.pexels.com/photos/20787/pexels-photo.jpg?auto=compress&cs=tinysrgb&h=350"
alt="new"
/>
</Draggable>
);
}
export default App;
出力：
まず、react-draggable から Draggable をインポートします。次に、ドラッグ可能なコンポーネントを作成します。
次に、このコンポーネントを <Draggable></Draggable> タグ内にラップします。
Beautiful DnD で React の Component/Div をドラッグ可能にする
React の Beautiful DnD 依存関係は、コンポーネントをドラッグ可能にするために利用できるもう 1つの簡単で使いやすいライブラリです。
起動するには、最初に react コンポーネントを作成し、次にプロジェクトフォルダーに移動して、install react-beautiful-dnd --save を使用して依存関係をインストールします。
次に、App.js ファイルを開き、次のコードを入力します。
コードスニペット（App.js）：
import React, { useState } from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
import './App.css';
const finalSpaceCharacters = [
{
id: 'james',
name: 'James',
},
{
id: 'john',
name: 'John',
},
{
id: 'israel',
name: 'Israel',
},
{
id: 'joker',
name: 'Joker',
},
{
id: 'quinn',
name: 'Quinn',
}
]
function App() {
const [characters, updateCharacters] = useState(finalSpaceCharacters);
function handleOnDragEnd(result) {
if (!result.destination) return;
const items = Array.from(characters);
const [reorderedItem] = items.splice(result.source.index, 1);
items.splice(result.destination.index, 0, reorderedItem);
updateCharacters(items);
}
return (
<div className="App">
<header className="App-header">
<h1>Final Space Characters</h1>
<DragDropContext onDragEnd={handleOnDragEnd}>
<Droppable droppableId="characters">
{(provided) => (
<ul className="characters" {...provided.droppableProps} ref={provided.innerRef}>
{characters.map(({ id, name }, index) => {
return (
<Draggable key={id} draggableId={id} index={index}>
{(provided) => (
<li ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
<p>
{name}
</p>
</li>
)}
</Draggable>
);
})}
{provided.placeholder}
</ul>
)}
</Droppable>
</DragDropContext>
</header>
</div>
);
}
export default App;
出力：
起動するには、最初にドラッグして並べ替える必要のある名前の配列を作成します。次に、スプライス方式を使用して、アイテムをその位置から外すと、自動的に次のアイテムに置き換えられます。
次に、アイテムのドラッグアンドドロップを処理する関数を作成します。コンポーネントをドラッグするための関数を作成した後、これらすべての関数を <Draggable></Draggable> タグ内にラップします。
アイテムを削除するための関数を作成し、それを<Droppable></Droppable>内に含めるようにラップします。そして、これらすべてを<DragDropContext></DragDropContext>タグ内にラップします。
まとめ
React の柔軟性により、ほぼすべてのプロジェクトが可能になり、簡単に作成できます。React ドラッグ機能は、ユーザー向けのゲームや使いやすいアプリを作成するのに役立ちます。
Fisayo is a tech expert and enthusiast who loves to solve problems, seek new challenges and aim to spread the knowledge of what she has learned across the globe.
LinkedIn