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". By default, they'll have an icon of three stacked horizontal lines ≡ as a handle.
Click and hold the icon. The tag will follow your mouse (or finger on mobile) and will slot between the other draggable tags. Drag & drop the tag into the spot you want it to be.
If the configuration is set to not add a handle, you can drag & drop tags by grabbing on anywhere in the tag. However it's pretty easy to accidentally cause the tag to drop back into the input textfield, so I strongly recommend using the handle.
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 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.
This script does not have a configuration GUI. There are some options within the code at the beginning of the script:
The script recognizes site skins such as Reversi, and adjusts its colors accordingly. But you can also set your own colors:
/* ********* COLORS CONFIGURATION *************** */
var fixed_stripe1 = "";
var fixed_stripe2 = "";
var sortable_border = "";
var sortable_fill = "";
This part lets you set the background and border colors of the fixed and sortable tags. Between the quotes, enter a Hex or RGB color, e.g. "#4a1919".
To disable the three stacked horizontal lines ≡ handle (which I don't recommend, btw):
// enabling the handle for sorting (workaround for touch devices)
// configurable just in case someone wants to disable it to save space by removing the handle
var mobile = true;
Switch the true word to false.
On mobile it is unfortunately a bit fiddly, especially when tags are long and screens are small, and you always have to drag the three stacked horizontal lines ≡ handle.
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.
