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

86 ratings


More shows like CodePen Radio

View all
Hanselminutes with Scott Hanselman by Scott Hanselman

Hanselminutes with Scott Hanselman

383 Listeners

The Changelog: Software Development, Open Source by Changelog Media

The Changelog: Software Development, Open Source

289 Listeners

Startups For the Rest of Us by Rob Walling

Startups For the Rest of Us

703 Listeners

ShopTalk by Chris Coyier & Dave Rupert

ShopTalk

500 Listeners

Software Engineering Daily by Software Engineering Daily

Software Engineering Daily

625 Listeners

Soft Skills Engineering by Jamison Dance and Dave Smith

Soft Skills Engineering

289 Listeners

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

Syntax - Tasty Web Development Treats

988 Listeners

Abroad in Japan by Stak

Abroad in Japan

1,917 Listeners

Tech Brew Ride Home by Morning Brew

Tech Brew Ride Home

961 Listeners

Naval by Naval

Naval

2,125 Listeners

The Real Python Podcast by Real Python

The Real Python Podcast

142 Listeners

Hard Fork by The New York Times

Hard Fork

5,512 Listeners

PodRocket by LogRocket

PodRocket

60 Listeners

BG2Pod with Brad Gerstner and Bill Gurley by BG2Pod

BG2Pod with Brad Gerstner and Bill Gurley

467 Listeners

Risky Business with Nate Silver and Maria Konnikova by Pushkin Industries

Risky Business with Nate Silver and Maria Konnikova

297 Listeners