CodePen Radio

335: Code’s a Drag


Listen Later

There are lots of types of dragging that can happen on websites. While they are all click (or tap), hold down, move, and let go, they are all quite a bit different. For instance:

  • Drag files/folders onto the browser window and drop them. The likely use case there is uploading.
  • Drag an element on the screen to another (valid) area of the screen. The likely use case is dragging cards from one column to another
  • Drag the position of an element. The likely use case is dividers between different areas.

There are native APIs for dragging stuff on the web, and it's nice to use them when you can as that means not relying on potentially hefty JavaScript libraries. And yet, the native APIS are fairly limited, and the JavaScript libraries that exist for this stuff are pretty darn nice.

We use Filestack for file uploading. There are lots of incentives there, like them staying on top of the latest and greatest in browser tech around this stuff rather than us having to. Back when we switched to this, we got mobile uploading support overnight, for example. For drag-elements-to-other-areas we use react-beautiful-dnd, which is a pretty darn nice library for that, especially since we're using React anyway. Interestingly, as robust as react-beautiful-dnd is, it doesn't really support position-dragging at all. Just not what it's built for. So for that, we've gone back to the trenches to write our own componentry, which is a delicate balance of JavaScript event-powered and CSS behind it that supports the changes.

Time Jumps
Sponsor: WordPress.com

WordPress.com is easily the fastest way to spin up a great-looking WordPress site. Not to mention performant and secure, as your site will be hosted on the great WordPress cloud, and they make those things their concern, not yours. You might think you'd have to give up a lot of control and customizability when you use a fully hosted and managed WordPress service (as opposed to hosting yourself), but that's actually not true. If you're on the Business Plan or higher, you can install plugins, SFTP into the server, and even have direct database access like any other host.

...more
View all episodesView all episodes
Download on the App Store

CodePen RadioBy CodePen Blog

  • 4.9
  • 4.9
  • 4.9
  • 4.9
  • 4.9

4.9

85 ratings


More shows like CodePen Radio

View all
The Joe Rogan Experience by Joe Rogan

The Joe Rogan Experience

230,234 Listeners

Pivot by New York Magazine

Pivot

9,747 Listeners

Syntax - Tasty Web Development Treats by Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Syntax - Tasty Web Development Treats

988 Listeners

Darknet Diaries by Jack Rhysider

Darknet Diaries

8,109 Listeners

Prof G Markets by Vox Media Podcast Network

Prof G Markets

1,467 Listeners