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:

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

  • 00:26 Dragging (on) CodePen
  • 01:04 How the browser works with drag and drop
  • 05:52 iFrame bugs with drag and drop
  • 08:29 Sponsor:
  • 09:02 Kanban style drag and drop in the browser
  • 15:49 Triggering a drag event
  • 23:56 Lack of support for dragging
  • 28:12 Dealing with Grid

Sponsor: 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.