drag & drop tags into the order you'd like before posting
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...
Before you save the work or the draft, the tags you enter are "draggable".
Click and hold the tag, drag it across the screen (it will slot between the other draggable tags as you go), and finally drop the tag into the spot you want it to be.
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.
Tags which were already saved in a particular order (if you posted your work or saved your draft previously) are fixed in place by AO3 and cannot be re-ordered. Such tags are shown with a pushpin icon, 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/draft, 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.
Fixed tags have a pushpin icon. In addition, you can highlight fixed vs. draggble tags with background colors for easier distinction:
Selecting "Reset" in the config dialog deletes all stored values and disables the color-highlights.
Using the "Edit" button on the Preview page stops the script from working! You can preview your work - but if you want to go back to continue changing tags, please use the ⇦ back button in your browser.
When enabling the background colors, the script adds a bit of CSS padding to the tags so it displays nicely in the AO3 default site skin. If you have a custom skin, this may interfere a bit. You can always adjust your custom skin (for #work-form li.added.tags and #work-form li.added.tags.fixed) to override those padding values again.
