Drag and Drop It Like It's Hot

-
The ability to drag and drop items and elements was first created by Jef Raskin, best known for starting the Macintosh project for Apple in the 1970's. Originally named the "click-and-drag" paradigm, drag and drop is a cornerstone of the user experience when interfacing with computers and smartphones.

I recently discovered how to implement this fundamental aspect of designing and developing a program, using Atlassian's React Beautiful DnD Library. This library helps to simplify and more importantly, beautiful and naturalize the movement of items within an app.

There are three main parts to keep in mind when designing a drag and drop feature:

1. The Draggable component, which is the item that will actually be dropped.
2. The Droppable component, which contains the Draggable components.
3. The DragDropContext component where the other components live.



To test and see how to utilize the tools provided by the library in a project I'm working on, I went ahead and built a simple task list containing tasks that can be dragged between three columns using the provided free code along on egghead.io in BeautifulDnD's repository. After building out the necessary components, I was ready to begin.

Step 1. Install Beautiful-DnD and Set Up DragDropContext Components

First, I needed to install the Beautiful DnD library and import the { DragDropContext } component in my App.js by wrapping the children components in a DragDropContext JSX tag. DragDropContext also takes 3 callbacks - onDragStart, onDragUpdate, and onDragEnd, which is the only callback that is required.



Step 2. Make Column Component "Droppable"

In order to be able to drop a task into a column component, it must be wrapped within a { Droppable  } component from the library, which takes one required prop of an ID. This ID will be used later on for identifying which column the task component is being dropped into.

{ Droppable } utilizes the same render props pattern as react that expects a child component to be a function that returns a react component. This allows ReactDnD to latch onto your existing component structure. { Droppable } also contains an object called { Provided } that is passed in as the first argument of the function. { Provided} also contains a prop "innerRef" that is used to supply the DOMNode of the component to BeautifyDnD.

{ Droppable } also provides a { Snapshot } object that contains attributes that can be used for styling, such as isDraggingOver which is a boolean that becomes true when another element is being dragged over the component.

Finally, a placeholder React element is needed as a child of the component being made Droppable.


Step 3. Make Task Components Draggable

The { Draggable } component is applied in an identical way to the { Droppable } component, except it takes in an additional required prop of "Index" which is used to track the position of the element within its container.

{ Draggable } also has a { Provided } object supplied, with props of "draggableProps" and "dragHandleProps" that need to be supplied to the task component.

Just like the Droppable component, the "ref" property also needs to be supplied the DOMNode of the component to Beautiful DnD.

Step 4. Persisting Changes with onDragEnd

In order to persist the changes, the onDragEnd callback needs to be supplied the logic necessary to persist the changes made by the drag and drop actions. To construct the algorithms, the BeautifulDnD provides a { Result } object that makes available attributes recorded from the drag and drop action, such as the Source, Destination, and the ID of the element being moved.

onDragEnd is also where any changes to the State would be made.



Finally, if all the components are applied correctly, this will be the result:














Comments

Post a Comment

Popular posts from this blog

Exceptional Exception Handlers

-
Image
As a budding developer, I quickly discovered that there's nothing quite as satisfying as debugging a frustrating error after hacking away at it for what seems to be an eternity. But sometimes error messages aren't very clear and it can make the debugging process especially difficult. Enter exception handlers ! Before we dive into just what an exception handler is and does, we need to take a look at a key question - what is an error and how are errors raised?  In Ruby, an error is an instance of the predefined class Exception  that is raised (or thrown) when something has gone wrong. By default, Ruby programs terminate when an exception occurs, unless you have an exception handler  - a block of code that is executed when an exception occurs. To handle exceptions, we can enclose the code that could throw an exception in a begin-end block and use one or more rescue clauses to tell Ruby the types of exceptions to handle. Note that the body of a method d
Read more

Would you like an extra end with that? Curly Braces vs. Do End Blocks

-
Image
As a new programmer, I developed (get it?) a quick growing affinity towards using curly braces {} in my code, because I just simply find it cleaner to read, and when it comes to coding, I am Mr. Clean. Plus, who really likes seeing 10 ends in a block of code? And if they both function the same way, why not use the one that's more pleasing to the eye? Well, actually, they are in fact not the same, as I have learned. Here's how it works: Let's say we want to iterate through an array of numbers [1, 2, 3, 4, 5, 6, 7] and return a new array of numbers divisible by 3, we could write the method out in two ways. First, the curly braces (clean) way: And then the do..end (ugly) way: Again, both yield the same result here, but there is a difference. With the curly braces, the block in the braces are passed to the rightmost method, while with the do end block, the code within the block is passed to the leftmost method. You'll see that given the following example, th
Read more