Login

Lost your password?
Don't have an account? Sign Up

Implementing React Drag and Drop without any external library. | by Gunjan Kalita | A


Gunjan Kalita
React-DnD in use
import React, { useState } from ‘react’;import ‘./App.css’;const App = () => {const [list, setList] = useState([
‘Chicken Biriyani’,
‘Mutton Pulao’,
‘Paneer Masala’,
‘Tandoori Chicken’,
‘Dal Makhana’,
‘Malai Kofta’,
]);
// All dishes above. Indian
return (
<>
{
list &&
list.map((item, index) => (
<h1 key={index} draggable>
{item}
</h1>
))}
</>
);
};
export default App;
* {
box-sizing: border-box;
}
html,
body,
#root {
width: 100%;
height: 100%;
padding-top: 40px;
}
h1 {
background-color: white;
color: #222222;
font-size: 16px;
font-weight: 800;
margin-right: 30%;
margin-left: 30%;
padding: 10px;
cursor: move;
}
A draggable list.
import React, { useState, useRef } from 'react';
import './App.css';
const App = () => {const draggingItem = useRef();const [list, setList] = useState([
'Chicken Biriyani',
'Mutton Pulao',
'Paneer Masala',
'Tandoori Chicken',
'Dal Makhana',
'Malai Kofta',
]);
const handleDragStart = (e, position) => {
draggingItem.current = position;
console.log(e.target.innerHTML);
};
return (
<>
{
list &&
list.map((item, index) => (
<h1
onDragStart={(e) => handleDragStart(e, index)}
key={index} draggable>
{item}
</h1>
))}
</>
);
};
export default App;
import React, { useState, useRef } from 'react';
import './App.css';
const App = () => {const draggingItem = useRef();
const dragOverItem = useRef();
const [list, setList] = useState([
'Chicken Biriyani',
'Mutton Pulao',
'Paneer Masala',
'Tandoori Chicken',
'Dal Makhana',
'Malai Kofta',
]);
const handleDragStart = (e, position) => {
draggingItem.current = position;
console.log(e.target.innerHTML);
};
const handleDragEnter = (e, position) => {
dragOverItem.current = position;
console.log(e.target.innerHTML);
};
return (
<>
{
list &&
list.map((item, index) => (
<h1
onDragStart={(e) => handleDragStart(e, index)}
onDragEnter={(e) => handleDragEnter(e, index)}
key={index}
draggable
>
{item}
</h1>
))}
</>
);
};
export default App;
import React, { useState, useRef } from 'react';import './App.css';const App = () => {const draggingItem = useRef();
const dragOverItem = useRef();
const [list, setList] = useState([
'Chicken Biriyani',
'Mutton Pulao',
'Paneer Masala',
'Tandoori Chicken',
'Dal Makhana',
'Malai Kofta',
]);
const handleDragStart = (e, position) => {
draggingItem.current = position;
console.log(e.target.innerHTML);
};
const handleDragEnter = (e, position) => {
dragOverItem.current = position;
console.log(e.target.innerHTML);
};
const handleDragEnd = (e) => {const listCopy = [...list];const draggingItemContent = listCopy[draggingItem.current];
listCopy.splice(draggingItem.current, 1);
listCopy.splice(dragOverItem.current, 0, draggingItemContent);

draggingItem.current = null;
dragOverItem.current = null;
setList(listCopy);
};

return (
<>
{
list &&
list.map((item, index) => (
<h1
onDragStart={(e) => handleDragStart(e, index)}
onDragEnter={(e) => handleDragEnter(e, index)}
onDragEnd={handleDragEnd}
key={index}
draggable
>
{item}
</h1>
))}
</>
);
};
export default App;
onDragOver={(e) => e.preventDefault()}
Final work.



Source link

https://avasta.ch

Leave a Comment

Your email address will not be published. Required fields are marked *

*
*