<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
const { useState } = React
const [items, setItems] = useState([
{ id: 1, text: 'Item 1' },
{ id: 2, text: 'Item 2' },
{ id: 3, text: 'Item 3' },
{ id: 4, text: 'Item 4' },
{ id: 5, text: 'Item 5' },
{ id: 6, text: 'Item 6' },
const handleDragStart = (e, index) => {
e.dataTransfer.setData('index', index);
const handleDragOver = (e) => {
const handleDrop = (e, newIndex) => {
const oldIndex = e.dataTransfer.getData('index');
const newItems = [...items];
const [draggedItem] = newItems.splice(oldIndex, 1);
newItems.splice(newIndex, 0, draggedItem);
<div className='container'>
<h2>React Js Drag and Drop List Example</h2>
{items.map((item, index) => (
onDragStart={(e) => handleDragStart(e, index)}
onDragOver={handleDragOver}
onDrop={(e) => handleDrop(e, index)}
ReactDOM.render(<App />, document.getElementById("app"));
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.24);
transition: background-color 0.3s, transform 0.3s;
background-color: #f0f0f0;