Web Developers : 10-Enable Conditional Movement with Draggable and Droppable Props

Screenshot from the tutorial

Enable Conditional Movement with Draggable and Droppable Props

In the dynamic world of web development, creating interactive and user-friendly interfaces is paramount. One popular way to achieve this is through the use of draggable and droppable elements. In this tutorial, we’ll explore how to implement conditional movement for draggable items using popular libraries like React Beautiful DnD or similar frameworks.

Understanding Draggable and Droppable Props

Before diving into the implementation, let's clarify what draggable and droppable props are. These props allow elements on your web page to be moved around, enhancing interactivity.

• Draggable: Refers to an element that can be dragged by the user.
• Droppable: Refers to an area where draggable elements can be dropped.

Using these props effectively allows for creating complex UI interactions, such as rearranging lists, dragging items to specific areas, and more.

Setting Up Your Environment

To get started, ensure you have a basic React application set up. If you haven't done this yet, you can create one using Create React App:

npx create-react-app draggable-demo
cd draggable-demo
npm start

Next, you’ll need to install the react-beautiful-dnd library:

npm install react-beautiful-dnd

Implementing Draggable and Droppable Components

Let’s create a simple example where users can drag items into specific areas based on certain conditions.

Step 1: Basic Structure

We'll create a list of draggable items and two droppable areas.

import React from 'react';
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';

const initialItems = [
    { id: 'item-1', content: 'Item 1' },
    { id: 'item-2', content: 'Item 2' },
    { id: 'item-3', content: 'Item 3' },
];

const App = () => {
    const [items, setItems] = React.useState(initialItems);

    const onDragEnd = (result) => {
        // Logic will go here
    };

    return (
        <DragDropContext onDragEnd={onDragEnd}>
            <Droppable droppableId="droppable-1">
                {(provided) => (
                    <div {...provided.droppableProps} ref={provided.innerRef}>
                        {items.map((item, index) => (
                            <Draggable key={item.id} draggableId={item.id} index={index}>
                                {(provided) => (
                                    <div ref={provided.innerRef} {...provided.draggableProps} {...provided.dragHandleProps}>
                                        {item.content}
                                    </div>
                                )}
                            </Draggable>
                        ))}
                        {provided.placeholder}
                    </div>
                )}
            </Droppable>
            {/* Additional Droppable areas can be added here */}
        </DragDropContext>
    );
};

export default App;

Step 2: Adding Conditional Logic

Now, let’s implement conditional logic to restrict where items can be dropped. For this example, we’ll allow items to be dropped only into a specific area based on their content.

First, create two droppable areas in your App component:

<Droppable droppableId="droppable-1">
    {(provided) => (
        <div {...provided.droppableProps} ref={provided.innerRef}>
            {/* Items for Droppable Area 1 */}
        </div>
    )}
</Droppable>

<Droppable droppableId="droppable-2">
    {(provided) => (
        <div {...provided.droppableProps} ref={provided.innerRef}>
            {/* Items for Droppable Area 2 */}
        </div>
    )}
</Droppable>

In the onDragEnd function, you will check the destination droppable area and the item being dragged:

const onDragEnd = (result) => {
    const { destination, source } = result;

    // If dropped outside the designated droppable areas
    if (!destination) {
        return;
    }

    // Check if the item can be dropped in the destination based on conditions
    if (destination.droppableId === 'droppable-1' && source.droppableId === 'droppable-2') {
        // Logic for movement condition
        return;
    }

    // Logic for moving items within the same droppable area
    const newItems = Array.from(items);
    const [removed] = newItems.splice(source.index, 1);
    newItems.splice(destination.index, 0, removed);

    setItems(newItems);
};

Step 3: Styling Your Components

To make your application visually appealing, add some CSS styles. Here’s a simple example:

div {
    padding: 8px;
    margin: 4px;
    border: 1px solid lightgray;
    background-color: white;
}

.droppable {
    background-color: lightblue;
}

Conclusion

With these steps, you’ve successfully implemented conditional movement for draggable items using React Beautiful DnD. This functionality enhances user experience by allowing users to interact with your application in a more meaningful way.

Feel free to expand on this foundation by adding more complex logic, styling, or even integrating with a backend service. The possibilities are endless when it comes to creating engaging web applications.

Further Reading

For more advanced features and options, refer to the official documentation of React Beautiful DnD. Happy coding!

Another view from the tutorial

---

Connect with SkillBakery Studios

Explore more tutorials, tools, and resources:

• skillbakery.com
• Facebook
• X (Twitter)
• YouTube Channel

Posted by SkillBakery Studios