Reactjs Drag Drop Working Tutorial

Hello friends, welcome back to my blog. Today in this blog post, I am going to tell you, Reactjs Drag Drop Working Tutorial.

For react js new comers, please check the below link:
React js Basic Tutorials

Friends now I proceed onwards and here is the working code snippet for Reactjs Drag Drop Working Tutorial and please use this carefully to avoid the mistakes:

1. Firstly friends we need fresh reactjs setup and for that we need to run below commands into our terminal and also w should have latest node version installed on our system:

Guys you can skip this first step if you already have reactjs fresh setup:

npx create-react-app reactdragdrop

cd reactdragdrop

npm start // run the projec

2. Now friends, we need to run below commands into our reactjs project to install drag drop  modules:

npm install jquery-ui-dist

npm install jquery

npm start

3. Now friends we need to add below code into our src/App.js file to get final output on web browser:

import React from 'react';

import './App.css';

import "jquery-ui-dist/jquery-ui.min.css";
import "jquery-ui-dist/jquery-ui.min.js";

import * as $ from 'jquery';

class App extends React.Component
{

  componentDidMount(){
   
    $( "#sortable1, #sortable2" ).sortable({
      connectWith: ".connectedSortable"
     }).disableSelection();
  }
  
  render(Message)
  {
    
   
    return (
      <div>
        
        <ul id="sortable1" class="connectedSortable">
        <li class="ui-state-default">Item 1</li>
        <li class="ui-state-default">Item 2</li>
        <li class="ui-state-default">Item 3</li>
        <li class="ui-state-default">Item 4</li>
        <li class="ui-state-default">Item 5</li>
      </ul>
      <ul id="sortable2" class="connectedSortable">
        <li class="ui-state-highlight">Item 1</li>
        <li class="ui-state-highlight">Item 2</li>
        <li class="ui-state-highlight">Item 3</li>
        <li class="ui-state-highlight">Item 4</li>
        <li class="ui-state-highlight">Item 5</li>
      </ul>
        
        </div>
       
) } }
 export default App;

4. Now friends we need to add below code into our src/App.css file to to styles the lists:

#sortable1, #sortable2 {
  border: 1px solid #eee;
  width: 142px;
  min-height: 20px;
  list-style-type: none;
  margin: 0;
  padding: 5px 0 0 0;
  float: left;
  margin-right: 10px;
}
#sortable1 li, #sortable2 li {
  margin: 0 5px 5px 5px;
  padding: 5px;
  font-size: 1.2em;
  width: 120px;
}

Now we are done friends. If you have any kind of query or suggestion or any requirement then feel free to comment below.

Note: Friends, I just tell the basic setup and things, you can change the code according to your requirements. For better understanding must watch video above.

I will appreciate that if you will tell your views for this post. Nothing matters if your views will be good or bad.

Jassa

Thanks