Drag and Drop with React

Drag and Drop with React

Are you curious how to use drag and drop with React? If so, this article is exactly for you! Have a good read.

Are you curious how to use drag and drop with React? If so, this article is exactly for you! Have a good read.

Modern web applications have multiple forms of interaction. Among those, drag and drop is, certainly, one of the most appealing to the user. Apps such as Trello, Google Drive, Office 365 and Jira make heavy use of DnD and users simply love it.

Our example component

To illustrate this article, we’ll implement a jigsaw puzzle in React. The puzzle consists of two boards: the first one with the pieces shuffled, the second one with no pieces and the original image in the background.

The pieces

This is the original image of our puzzle:

We need to split it in multiple pieces. I think 40 is an optimal number, given the proportion of this image:

Then, we save all assets in the images folder:

Now we need to save the original image (non-splitted) in this same folder:

Tip: You don’t need to split the sample image by yourself. Just take a look at this sandbox and you’ll find all needed images right there.

The component’s state

After that, let’s create our component basic structure:

import React, { Component } from 'react';
import originalImage from './images/ny_original.jpg';
import './App.css';

class Jigsaw extends Component {
  state = {
    pieces: [],
    shuffled: [],
    solved: []
  };

  // ...
}

In the above code, we’ve defined the component’s state. It has three arrays:

  1. The pieces array will store objects containing data for each piece of our puzzle.
  2. The shuffled array represents the board where every piece will start at, all shuffled.
  3. The solved array represents the board where all pieces will be dragged to, in the correct order.

Once we’ve defined the structure of our component’s state, we need to set the initial values of each array. We can do this in the componentDidMount lifecycle method:

componentDidMount() {
  const pieces = [...Array(40)]
    .map((_, i) => (
      {
        img: `ny_${('0' + (i + 1)).substr(-2)}.jpg`,
        order: i,
        board: 'shuffled'
      }
    ));

  this.setState({
    pieces,
    shuffled: this.shufflePieces(pieces),
    solved: [...Array(40)]
  });
}

In the above snippet, we’ve initialized the three arrays of our component’s state. Did you notice the […Array(40)] part? We use it twice in this method. It’s leveraging the spread operator to create an iterable array with 40 items.

Each item of the pieces array is an object containing three properties:

  1. The pieces array will store objects containing data for each piece of our puzzle.
  2. The shuffled array represents the board where every piece will start at, all shuffled.
  3. The solved array represents the board where all pieces will be dragged to, in the correct order.

To initialize the shuffled array, we’ve created a shufflePieces method. It randomizes the items of a given array by using the Durstenfeld shuffle algorithm:

shufflePieces(pieces) {
  const shuffled = [...pieces];

  for (let i = shuffled.length - 1; i > 0; i--) {
    let j = Math.floor(Math.random() * (i + 1));
    [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
  }

  return shuffled;
}

Note: You don’t really need to understand this algorithm for the purpose of this article, but if you’re curious to know how it works, here’s a detailed explanation.

The render method

Now let’s see how the render method for this component looks like:

render() {
  return (
    <div className="jigsaw">
      <ul className="jigsaw__shuffled-board">
        {
          this.state.shuffled.map((piece, i) =>
          this.renderPieceContainer(piece, i, 'shuffled'))
        }
      </ul>
      <ol className="jigsaw__solved-board" style={{ backgroundImage: `url(${originalImage})` }}>
        {
          this.state.solved.map((piece, i) =>
          this.renderPieceContainer(piece, i, 'solved'))
        }
      </ol>
    </div>
  );
}

As you can see, we create two lists, one for each board. The piece’s rendering logic was extracted to a separate method. Here it is:

renderPieceContainer(piece, index, boardName) {
  return (
    <li key={index}>
      {piece && <img src={require(`./images/${piece.img}`)}/>}
    </li>
  );
}

This method uses short circuit evaluation to render the piece image conditionally.

I’ve added some styling to make it look nice. In this article, I won’t cover how it was made, but you can find the complete CSS file in this sandbox.

And here’s how our component looks:

It looks good. Doesn’t it? However, it does nothing for now. The next step is to implement the drag and drop logic itself.

Drag and drop: first things first

To make it possible to drag a piece, we need to mark it with a special attribute called draggable:

renderPieceContainer(piece, index, boardName) {
  return (
    <li key={index}>
      {
        piece && <img
          draggable
          src={require(`./images/${piece.img}`)}/>
      }
    </li>
  );
}

After that, we need to create a handler for the onDragStart event of our pieces:

piece && <img
  draggable
  onDragStart={(e) => this.handleDragStart(e, piece.order)}
  src={require(`./images/${piece.img}`)}/>


And here’s the handler itself:

handleDragStart(e, order) {
  e.dataTransfer.setData('text/plain', order);
}

This is what the above snippets do:

  1. The pieces array will store objects containing data for each piece of our puzzle.
  2. The shuffled array represents the board where every piece will start at, all shuffled.
  3. The solved array represents the board where all pieces will be dragged to, in the correct order.

The drag part is done. But dragging a piece is useless if you have no place to drop it. The first thing to do in order to make pieces droppable is to define a handler for the onDragOver event of our piece containers (the li tags of both lists). This handler will be very simple. So simple that, in fact, we can define it inline:

renderPieceContainer(piece, index, boardName) {
  return (
    <li key={index}
      onDragOver={(e) => e.preventDefault()}>

  // ...
}

By default, most zones of a page won’t be a valid dropping place. This is the reason why the normal behavior of the onDragOver event is to disallow dropping. To overcome this, we’re calling the event.preventDefault() method.

Drag and drop: let’s finally drop it!

Finally, let’s implement the dropping logic. To do this, we must define a handler for the onDrop event of our piece containers:

renderPieceContainer(piece, index, boardName) {
  return (
    <li
      key={index}
      onDragOver={(e) => e.preventDefault()}
      onDrop={(e) => this.handleDrop(e, index, boardName)}>

    // ...
}

Now, the handler code:

handleDrop(e, index, targetName) {
  let target = this.state[targetName];
  if (target[index]) return;

  const pieceOrder = e.dataTransfer.getData('text');
  const pieceData = this.state.pieces.find(p => p.order === +pieceOrder);
  const origin = this.state[pieceData.board];

  if (targetName === pieceData.board) target = origin;
  origin[origin.indexOf(pieceData)] = undefined;
  target[index] = pieceData;
  pieceData.board = targetName;
  this.setState({ [pieceData.board]: origin, [targetName]: target })
}

Let’s understand what’s happening here:

  1. The pieces array will store objects containing data for each piece of our puzzle.
  2. The shuffled array represents the board where every piece will start at, all shuffled.
  3. The solved array represents the board where all pieces will be dragged to, in the correct order.

And here’s the puzzle working:

Take a look at the final sandbox.

Conclusion

  • To make an element draggable, mark it with the draggable attribute.
  • Use the onDragStart event to store data for uniquely identifying the item being dragged.
  • By default, most areas of a page won’t allow dropping. To fix this, define a handler for the onDragOver event and call the event.preventDefault() method inside it.
  • Finally, to finish the dropping process, create a handler for the onDrop event. In this method, update your component’s state to reflect the desired dropping behavior.

Why ReactJS is better for Web Application Development?

Why ReactJS is better for Web Application Development?

Web Application Development is the point of contact for a business in today's digital era. It is important to choose the right platform for Web Application Development to build a high end Web

Web Application Development is essential for a business in today’s digital era. Finding the right platform for Web Application Development is important for building an effective Web Application that can enhance the overall customer engagement. Here’s what makes ReactJS a better option for building your next Web Application.

ReactJS Development Services | ReactJS Development Company - Chapter 247 Infotech

ReactJS Development Services | ReactJS Development Company - Chapter 247 Infotech

Chapter 247 Infotech is a leading ReactJS development company in India, USA, offering ReactJS development services at par to a spectrum of business domains from E-commerce, healthcare to Edutech at

The ease of user interface in an application drives the customer engagement. By leveraging ReactJS Development you can build Web Applications that are user centric and deliver high end user experience to tap into better business opportunities...

Pagination in ReactJs

Pagination in ReactJs

There are a lot of resourceful materials online that give good insights into pagination in ReactJs, as well as NPM packages you can easily use

There are a lot of resourceful materials online that give good insights into pagination in ReactJs, as well as NPM packages you can easily use. As much as I appreciate those materials and love to use those packages, they mostly deal with loading the whole dataset on the page first then completely handle the pagination in the frontend. I am approaching this article with the concept of loading the exact data needed on the page, then manually loading other dataset based on the request when the user clicks the pagination number display. Below is the content structure to guide us through this article:

Table of Contents
  • Project Setup
  • HTML and CSS Styling
  • Pagination Data Format
  • Sample API request
  • Displaying the initial data
  • Showing Page Number and getting Other data
Project Setup

We are going to use create-react-app v0.1.0 which has the CSS Module configured already. Open your terminal and cd to the folder you want the project installed. Then run the below command:

npx create-react-app pagination  --use-npm

The above command will download the project into the folder calledpagination. You need to cd into the folder and run npm start. If everything goes well, you will have a page that looks like below:

HTML and CSS Styling

Open the project in your favorite code editor and locate the App.js file, We need to prepare our App.js to the look exactly like the way we want it by adding the HTML code and CSS style below:

Create a new file called App.module.css in the same directory where you have your App.js, then import it into your App.js using:

import styles from './App.module.css';

I want us to handle the display of the pagination number first, below is the style and HTML structure of what we are going to use.

  render() {
    

    return (
      <div className={styles.app}>
        
        <table className={styles.table}>
          <thead>
            <tr>
              <th>S/N</th>
              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>
              <tr>
                <td>1</td>
                <td>Abel</td>
                <td>Agoi</td>
              </tr>
              <tr>
                <td>2</td>
                <td>Muyiwa</td>
                <td>Aregbesola</td>
              </tr>
              <tr>
                <td>3</td>
                <td>Opeyemi</td>
                <td>Agoi</td>
              </tr>
              <tr>
                <td>4</td>
                <td>Ope</td>
                <td>Aina</td>
              </tr>
          </tbody>
        </table>


        <div className={styles.pagination}>
          <span>&laquo;</span>
          <span className={styles.active}>1</span>
          <span>2</span>
          <span>3</span>
          <span>4</span>
        </div>

      </div>
    );
  }

pagination_01.js

Add the content below into your App.module.css.

.app {
    width: 50%;
    margin: 0 auto;
}

table {
  border-collapse: collapse;
  border-spacing: 0; 
}


table {
  border-collapse: separate;
  border-spacing: 0;
  color: #4a4a4d;
  font: 14px/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
  width: 100%;
}
tr {
  overflow-x: scroll;
}
th,
td {
  padding: 15px 15px;
  vertical-align: middle;
  /* text-align: left; */
}
thead {
  font-size: 14px;
  line-height: 24px;
  font-family: Lato;
  border: 1px solid transparent;

  max-width: 100%;
  font-weight: 900;
  line-height: 24px;
  mix-blend-mode: normal;

  color: rgba(51, 51, 51, .5);
  background: rgba(255, 255, 255, .9);
}
thead tr th {
  padding: 15px 15px;
  border: 1px solid transparent;


  text-align: left;
}
tbody {
  max-width: 100%;
}
tbody tr:nth-child(odd) {
  background: #f0f0f2;
}
tbody tr:hover {
  background: #f0f0f2;
}
td {
  padding: 15px 15px;
}
td:first-child {
}


.pagination {
    margin-top: 25px;
}
.pagination span {
  cursor: pointer;
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
  transition: background-color .3s;
  border: 1px solid #ddd;
}

.pagination span.active {
  background-color: #0099FF;
  color: white;
  border: 1px solid #0099FF;
}

pagination_app.module.css

Sorry for the plenty code written so far :), I want us to have a good looking table with pagination style in place before we move into the actual paging. If everything goes well, your view should look like below:

Pagination Data Format

In most cases, when you are making API calls to an endpoint that returns a paginated data, you need to pass at least the page number with the URL, hence a sample URL will look like below:

https://reqres.in/api/users?page=2

The most important thing to take note of in the URL above is the page=2 where 2 is the page number dataset we want to get. It can be 3,4 or any number as much as the dataset we have in the backend.

The response will always contain three important data which are per_page, total and the actual data we want to loop through. A sample response looks like below:

Sample API request

Talking about making an API request to the backend, We need a backend to make the request to, I decide to use https://reqres.in/ as the API endpoint for this tutorial because it is free, always available and reliable. You can decide to make your API request directly inside your component’s ComponentDidMount() or dispatch an action to redux from your ComponentDidMount() but for the purpose of this tutorial, we are going to make the API call from the App.js componentDidMount().

Firstly, we need to set the component’s state like below inside your App.js

  state = {
    users: null,
    total: null,
    per_page: null,
    current_page: null
  }

pagination_component_state.js

users is going to be the data we are going to loop over, while total and per_page is going to help us with calculating paging logic while the current_page will be used to style the active pagination link.

The next thing we should do is create a helper method that will serve the purpose of making an HTTP request to the API endpoint and also update the state with the response data. The method will look like below:

  makeHttpRequestWithPage = async pageNumber => {
    let response = await fetch(`https://reqres.in/api/users?page=${pageNumber}`, {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
    });

    const data = await response.json();

    this.setState({
      users: data.data,
      total: data.total,
      per_page: data.per_page,
      current_page: data.page,
    });
  }

pagination_http_request.js

This method will accept a parameter called pageNumber so it can be reusable and will always update the state with the right data when the response is successful.

Since on page load, we need to make the HTTP request to the backend, and we are going to do this inside thecomponentDidMount() by calling the method above and passing it the first-page number we want which should be 1. Hence, the componentDidMount() will look like below:

 componentDidMount() {
    this.makeHttpRequestWithPage(1);
  }

pagination_componentDidMount.js

If we add console.dir(this.state.users) inside the render() method, below will be printed in the console

The null was before the data arrived, once the data arrived, it updates the state, hence the array of users data.

Displaying the initial data

Haven gotten the data needed, we need to loop through the data and display it. Hence we can update our render method to have below:

    let users;

    if (this.state.users !== null) {
      users = this.state.users.map(user => (
        <tr key={user.id}>
          <td>{user.id}</td>
          <td>{user.first_name}</td>
          <td>{user.last_name}</td>
        </tr>
      )); 
    }
    
    return (
      <div className={styles.app}>
        
        <table className={styles.table}>
          <thead>
            <tr>
              <th>S/N</th>
              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>
              { users }
          </tbody>
        </table>


        <div className={styles.pagination}>
          <span>&laquo;</span>
          <span className={styles.active}>1</span>
          <span>2</span>
          <span>3</span>
          <span>4</span>
          <span>&raquo;</span>
        </div>

      </div>
    );

gistfile1.txt

I replaced the dummy data we had inside the with the result of the loop which I equated to users. We have the assurance that when the state changes, ReactJs will automatically update the content of the table. The final stage is displaying the page logic and getting the other contents based on the page number clicked which will be sent to the API endpoint.

Showing Page Number and getting other data

Before we talk about showing page number automatically using the desired logic, I want us to manually show those numbers and make the actual API calls when the numbers are clicked. For now, we are going to hard code the pagination numbers ourselves like below:

<div className={styles.pagination}>
  <span onClick={() => this.makeHttpRequestWithPage(1)}>1</span>
  <span onClick={() => this.makeHttpRequestWithPage(2)}>2</span>
  <span onClick={() => this.makeHttpRequestWithPage(3)}>3</span>
  <span onClick={() => this.makeHttpRequestWithPage(4)}>4</span>
</div>

pagination_hard_code.js

The above code will look like below when previewed in the browser.

Notice that each span has an event handler attached to it, and I passed the page number to that event handler, so anytime we click on the pagination link, it will make a new HTTP request and update the component states, hence the user’s table data. We do not want to hard-code the links as we did above, so we need to automatically display those links.

So we’re planning on showing the page numbers for a series of pieces of data so that users can easily navigate multiple items. There are a few things that we need to know first:

  • The page that we’re on
  • Total number of items
  • Number of items per page

Good news is that we have captured all these things in our component’s state.

Next, we need to look at how we want to display the page numbers, there is a wide range of methods that people use:

  • Simple Next/Previous buttons with no numbers
  • A list of all possible pages
  • Page 1 & the last page, with the current page (and 2 above/below) shown

I personally prefer to show the very first page, that last page, and then the current page with 2 pages above & below. So for example on page 12 out of 24 pages we’d see:

1, 10, 11, 12, 13, 14, 24

This allows users to quickly navigate to the start, and to the end, as well as jump through multiple pages at once. For the purpose of this tutorial, I am going to show us how to show a list of all possible pages(item two above) then item three too.

The Arithmetic

We need to work out the total number of pages, for this, we want to take the total number of items that there are, and divide it by the number of items per page. But we want to make sure that we take that number and round it up.

So if there were 12 items in total, and we were showing 5 per page, we’d have a total of 3 pages of items. If we were to show 3 per page, we’d show 4 pages.

const pageNumbers = [];
for (let i = 1; i <= Math.ceil(this.state.meta.total / this.state.meta.per_page); i++) {
    pageNumbers.push(i);
}

page_logic_pagination.js

Haven gotten the page numbers, we need to loop through to display the span since we want to show all possible numbers first, our loop will look like below:

renderPageNumbers = pageNumbers.map(number => {
  let classes = this.state.current_page === number ? styles.active : '';

  return (
    <span key={number} className={classes} onClick={() => this.makeHttpRequestWithPage(number)}>{number}</span>
  );
});

pagination_all_numbers_loop.js

We need to update our pagination view to look like below:

<div className={styles.pagination}>
  <span onClick={() => this.makeHttpRequestWithPage(1)}>&laquo;</span>
  {renderPageNumbers}
</div>

pagination_view._01js

Congrats, we have successfully handle pagination, make HTTP request to the backend and changing the table content when user click on the page number to see.

To be sure we are on the same page, my App.js code looks like below:

import React, { Component } from 'react';
import styles from './App.module.css';

class App extends Component {


  state = {
    users: null,
    total: null,
    per_page: null,
    current_page: 1
  }


  componentDidMount() {
    this.makeHttpRequestWithPage(1);
  }


  makeHttpRequestWithPage = async pageNumber => {
    const response = await fetch(`https://reqres.in/api/users?page=${pageNumber}`, {
      method: 'GET',
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
    });

    const data = await response.json();

    this.setState({
      users: data.data,
      total: data.total,
      per_page: data.per_page,
      current_page: data.page
    });
  }


  render() {

    let users, renderPageNumbers;

    if (this.state.users !== null) {
      users = this.state.users.map(user => (
        <tr key={user.id}>
          <td>{user.id}</td>
          <td>{user.first_name}</td>
          <td>{user.last_name}</td>
        </tr>
      ));
    }

    const pageNumbers = [];
    if (this.state.total !== null) {
      for (let i = 1; i <= Math.ceil(this.state.total / this.state.per_page); i++) {
        pageNumbers.push(i);
      }


      renderPageNumbers = pageNumbers.map(number => {
        let classes = this.state.current_page === number ? styles.active : '';

        return (
          <span key={number} className={classes} onClick={() => this.makeHttpRequestWithPage(number)}>{number}</span>
        );
      });
    }

    return (


      <div className={styles.app}>

        <table className={styles.table}>
          <thead>
            <tr>
              <th>S/N</th>
              <th>First Name</th>
              <th>Last Name</th>
            </tr>
          </thead>
          <tbody>
            {users}
          </tbody>
        </table>


        <div className={styles.pagination}>
          <span onClick={() => this.makeHttpRequestWithPage(1)}>&laquo;</span>
          {renderPageNumbers}
          <span onClick={() => this.makeHttpRequestWithPage(1)}>&raquo;</span>
        </div>

      </div>
    );
  }

}

export default App;

pagination_app.js

and my view like below:

We can change the page number display logic to below since it will accommodate for large dataset.

renderPageNumbers = pageNumbers.map(number => {
  let classes = this.state.current_page === number ? styles.active : '';

  if (number == 1 || number == this.state.total || (number >= this.state.current_page - 2 && number <= this.state.current_page + 2)) {
    return (
      <span key={number} className={classes} onClick={() => this.makeHttpRequestWithPage(number)}>{number}</span>
    );
  }
});

pagination_another_display_logic.js

Thanks for reading.