AO3: Reorder Tags with Drag & Drop

drag & drop tags into the order you'd like before posting

Autor
escctrl
Instalaciones diarias
0
Instalaciones totales
262
Calificaciones
1 0 0
Versión
2.2
Creado
3/9/2023
Actualizado
7/9/2023
Licencia
MIT
Funciona en

Drag & Drop Ordering

On AO3, the order you're adding tags (fandoms, characters, relationships, additional tags) to your work determines the order they show up on your work once you save it. If you think of a tag late and want this to be the first tag, you'd have to delete and re-add all tags. No more!

With this script, each new tag becomes draggable: Once you have added all tags, you can just drag & drop them into the order you want.



That is, until you saved your work/draft...

Ordering Fixed Tags

Tags which were already saved in a particular order (if you posted your work or draft previously) are fixed in place by AO3 and cannot be re-ordered. Such tags are shown with a striped background, and a mouse-over text tells you that this tag isn't sortable. The only way to re-order fixed tags is to delete them, save the work, and re-add them. While re-adding, you can use the drag & drop feature of this script.

To help with that task, the script adds Copy and Delete buttons to the labels.

  1. Select the Copy button.
  2. A comma-separated list of these tags is now in your clipboard. Paste them in a notepad application somewhere for later.
  3. Select the Delete button to remove all tags under this label.
  4. Repeat steps 1-3 for any label where you need to re-order fixed tags.
  5. "Post" the work/draft. (Post, not Preview!)
  6. Go back to editing the work/draft.
  7. Copy the comma-seperated lists of tags from your notepad into the proper tags textboxes, and press the Enter key.
  8. Now the tags are sortable. Drag & drop them into the order you want.
  9. Post the work/draft again.

Preview

You can preview your work - but if you want to go back to continue changing tags, please use the  ⇦  back button in your browser.
Unfortunately AO3 does some weird things that I can't really work around, which means that using the "Edit" button on the Preview page stops the script from working.

Colors

The script recognizes site skins such as Reversi, and adjusts its colors accordingly. But you can also set your own colors in the code in lines #19 - #22.

Browser Support

This script has been tested on Windows, in Firefox and Chrome Desktop. It's also been tested on Firefox Mobile (Nightly) on Android (which is unfortunately the only mobile browser with userscript support I have available to me). It might be fiddly, and remember that you have to grab the ≡ symbol.
If you run into other issues, or have ideas how to improve the script, feel free to reach out e.g. via the feedback button.