I’ve been catching up on Critical Role lately and wanted to make a few stat selectors. First up is the Standard Array method, where 6 predetermined values are distributed across a character’s abilities.

The drag API in HTML is a pain. It’s got a lot of boilerplate, isn’t all that intuitive, and can’t really do anything without JavaScript.

I’ve made it so that when an element is dropped, its class and innerHTML are swapped with the square it’s dropped on. I could only get the swap to work using destructuring syntax; I’m guessing a swap function using a ‘temp’ variable runs into shallow copy issues. The destructuring looks like this:

[heldItem.innerHTML, e.target.innerHTML] = [e.target.innerHTML, heldItem.innerHTML];
[heldItem.className, e.target.className] = [e.target.className, heldItem.className];

I’m also using a variable to store the element I’m dragging. Sure would be nice if the drop event contained a reference to the dragged item.