Building Our Components

Before we commence with the drag-and-drop functionality, we need to create some foundational components.

First, we’ll create our draggable item, which will simply display text for dragging purposes. Remember to set the draggable attribute to true:

const Draggable = () => {

return (

<div draggable>

Drag me

</div>

)

}

export default Draggable;

Next, we will create a Box component that serves as the container for our draggable item:

import './App.css';

import Draggable from "./Draggable";

const Box = ({ hasItem }) => {

return (

<div className="box">

{hasItem && <Draggable />}

</div>

);

}

export default Box;

In your App.css, you can style the box as follows:

.box {

display: flex;

width: 100px;

height: 100px;

border: 1px solid black;

justify-content: center;

align-items: center;

}

Now, let's prepare our containers to interact with the draggable component.

Handling Events

We will utilize three primary events for our drag-and-drop feature:

1. Drag enter (dragenter)
2. Drag over (dragover)
3. Drop (drop)

For our purposes, we'll treat the dragenter and dragover events similarly, although both are necessary.

To enable interaction between the draggable item and the containers, we must invoke event.preventDefault() during the dragenter or dragover events. This action designates our containers as valid drop targets:

const Box = ({ hasItem }) => {

const dragEnterOrOver = (e) => {

e.preventDefault();

}

return (

<div

onDragEnter={dragEnterOrOver}

onDragOver={dragEnterOrOver}

className="box">

{hasItem && <Draggable />}

</div>

);

}

Now, let’s implement our Box components in the main application:

return (

<div>

<Box hasItem />

<Box />

</div>

);

Try running your application! Dragging the "Drag me" text around should display an icon next to your cursor:

The appearance of the drag icon may vary based on your operating system, but you should recognize it!

You might notice that the drag icon appears above the currently selected item, which isn’t ideal. Let’s tweak the code to prevent this icon from displaying when the box already contains an item:

const dragEnterOrOver = (e) => {

if (hasItem) return;

e.preventDefault();

}

Managing State for Draggable Items

Next, we’ll introduce a state variable to manage the selection of items (using positions), and render the Box components dynamically:

const ITEMS = 3;

function App() {

const [position, setPosition] = useState(0);

return (

<div>

{

Array(ITEMS).fill(null).map((_, index) => {

return <Box

key={index}

hasItem={index === position}

onSelect={() => setPosition(index)} />

})

}

</div>

);

}

While using an index as a key is generally not recommended, it’s acceptable for this simple example.

Inside the Box component, we will also handle the drop event and invoke the onSelect callback:

const Box = ({ hasItem, onSelect }) => {

const dragEnterOrOver = (e) => {

if (hasItem) return;

e.preventDefault();

}

return (

<div

onDrop={onSelect}

onDragEnter={dragEnterOrOver}

onDragOver={dragEnterOrOver}

className="box"

>

{hasItem && <Draggable />}

</div>

);

}

Voilà! Test your application again, and you should now be able to move the draggable item between containers!

I hope this guide has clarified how drag-and-drop functionality works! If you found it useful, feel free to show your appreciation or follow for more content.