I took another look at React-Beautiful-dnd. The thing that caught my eye on the readme file was a video about the future of the library from five months ago.

It turns out that the video wasn’t really much about react-beautiful-dnd itself, but a new JavaScript/TypeScript project for @alaskit/pragmatic-drag-and-drop, which would work on any front-end platform, regardless if it was React or Angular.

Since React Beautiful DnD was such a great hit a few years ago, and Atlassian is such a well known tech company (Jira, Bamboo, etc.), I decided to give it a go before I move away from my home brew solution to Drag & Drop on top of React-DnD.

It’s different than React-Beautiful-DnD, and closer to React-DnD. They provide a few examples, and I got started with “Simple list on other stacks” since it looked fairly close to what I was attempting to do – drag an item to another place on a list.

I got everything setup and noticed something wasn’t working. I tracked it down to the fact that the onDragLeave event wasn’t firing when leaving certain items. Eventually I created a separate project to segregate the library from everything else and filed issue #127.

I went to sleep, and took a look with a fresh set of eyes. I worked out that the behavior was actually intended due to a getSticky setting. Until you drag over another valid target, the Drag & Drop manager assumes you are still on the prior drag target that was valid. In addition, the example was setup to prevent dropping items onto themselves.

I worked out all of the kinks that the example was configured to do, and got the list working the way that I needed it to work. I also added a few options to toggle the stick and self drop options so that I could visually see the difference in behavior.

Well that’s all good and fun, but what does this look like in the application? It looks great. Things move better than my version using React-DND. I also got the ripple effect working when you click the button. The Drag & Drop operation even has a little flourish where the dropped item flashes.

You can also see that I was able to make the buttons dip down to the right a little as I hover over them. This was done with a CSS Transition. Unfortunately, as the “Item” and “Digital” buttons swap, it appears to jump abruptly before it transitions back to the “over” position. Personally, I would like to see the two buttons glide up/down as they swap position. I’ve tried to use a translateX transformation, but it doesn’t seem to have an affect.

.draggable {
  transition: transform 0.3s ease-in-out;
  opacity: 1;

  // &.drag-none {}
  // &.drag-preview {}

  &.dragging, 
  &.dragging-over {
    opacity: 0.5;
    transform: translate(3px, 3px);
  }
}

Atlassian has separated much of the Drag & Drop logic into separate libraries. In the past, I was trying to calculate if a item dragged over anther was closer to the top or bottom of that item, to determine its placement. Now I just use the library @atlaskit/pragmatic-drag-and-drop-hitbox and use closest-edge. Wallah! No more code to write. It also lets you specify which edges you are interested in (top, bottom, left, right). On top of that, they have another function in the same library – reorderWithEdge. You provide it with a list, the index of the item being moved, the index and closest edge of the target, and the axis (vertical/horizontal). It’s some simple logic that I had previously worked out my my dragon-drop library, but it looks like it takes more things into account.

Benefits to the Pragmatic DnD library are that you don’t need a Drag & Drop Provider in the root of your application. It also looks like you can accept multiple drop types – which is something that was bothering me with the prior libraries that I had used, and the direction I was being pigeon holed into. This library exposes more freedom in what you are capable to doing.