The Digital Commerce Conference | November 12, 2019, Sheraton Grand Los AngelesLearn More

X

In this revolutionary front-end development, a simpler UI is mostly preferred, in that line drag and drop fall under the impression of the easiest UI, instead of typing or any other mode of doing operations.

Let’s take a look at what we are going to build based on the Drag and Drop UI.

Drag and Drop
Fig: React Drag and Drop Model

Drag and drop can be done using the standard JS library or HTML, but why do we go for react?

The reason behind is that while developing an application, we have to look for scalability, efficiency, and speed. Can the standard JS or HTML provide the above qualities? The answer is NO!

React provides scalability through its reusable components for efficiency and speed, it has states and props, where each and every component loads only when it’s needed or changed.

Let’s start building by importing the very basic requirements for reactJS

Create a root component for the rendering where all the components renders.

import React form "react";
import ReactDOM from "react-dom";
class MainComponent extends React.Component {
constructor(props) {
super(props);
this.state = {tasks: []};
this.mappingValues = [
{ name: "FirstName" },
{ name: "LastName" },
{ name: "City" }
];
this.triggerDelete = this.triggerDelete.bind(this);
}
ReactDOM.render(, document.getElementById("root"));

For complete code: https://codesandbox.io/s/52rzz78ozp
For Sample: https://52rzz78ozp.codesandbox.io/

Our Main component will have data for rendering and state. In our case, we are going to store the dragged and dropped values to the state. The value for dragging will be rendered from this.mappingValues.

Create functions for dragging and dropping which is HTML drag and drop event functions.

/* Draggable and Drop */
onDragStart = (ev, id) => {
ev.dataTransfer.setData("id", id.name);
ev.dataTransfer.effectAllowed = "copy";
};
onDragOver = ev => {
ev.preventDefault();
ev.dataTransfer.dropEffect = "copy";
};
onDrop = ev => {
let id = ev.dataTransfer.getData("id");
let tasks = this.state.tasks;
this.mappingValues.filter(key => {
if (key.name === id) {
tasks.push(key);
}
});
this.setState({
tasks: tasks
});
};
triggerDelete(t) {
let tasks = this.state.tasks;
tasks.splice(t, 1);
this.setState({
tasks: tasks
});
}

In the above function we can see that once the drop event happens, the task state is updated.

Our job is to render the values present in the state task. In order to do that we are going to create another component for rendering the state values.

we can pass the state value and required functions to another component through props.

Create PlayArea Component which handles the dropping area.

Sample task will look like:
this.state = {tasks : [{'name' : 'firstname'}, {'name' : ''}]}

The below code will render the task values to the HTML elements.

class PlayArea extends React.Component {
constructor(props) {
super(props);
} render() {
let className = "custom";
if (this.props.isActive) {
className += " here";
}
return (
<div className={className}
onDragOver={e => this.onDragOver(e)}
onDrop={e => this.onDrop(e, this.state.playarea)} >
<ul className="list-group">
{this.props.playAreaData.map((value, i) => (
<li className="list-group-item" name={value.name}>
{value.name} &nbsp;
<span id={"close_" + value.name}
className="close_item"
onClick={e ={this.props.triggerDelete(i);}}> x
</span>
</li>
))}
</ul>
</div>
);}}

Passing required function and state to PlayArea component.

<PlayArea
triggerDelete={this.triggerDelete}
playAreaData={this.state.tasks}
/>

Now the state will be available to PlayArea component.

NOTE: If functions are to be used in HTML tags, the functions should be bound. Otherwise, the function won’t be triggered.

Domnicamalan S

Domnicamalan S

Domnicamalan is a Software Engineer and Experienced in Python.