Fix buggy drag and drop

[KyrneDev]

The current Tags drag and drop in admin is really buggy and hard to use. It is almost impossible to use on mobile. This updates the sortable library to something more modern which makes it much, much easier to use (and has a nice little animation).

Before:

Mobile (totally unusable):

New:

Mobile:

[KyrneDev]

Please note that I changed to Dragula as per @datitisev's request. The functionality on mobile remains the same, but there is no animation as shown above.

[askvortsov1]

@KyrneDev @datitisev are there plans to make additional changes in animation to this, or is this ready for review?

[dsevillamartin]

Imma play around with it. Regarding animation - that's not important here, and I see the sortablejs implementation as an unintended feature more than the focus of the PR.

[dsevillamartin]

FYI - you removed the dist files instead of resetting them to a previous commit. That is fine, but you got me confused as to why the dist folder didn't exist.

[dsevillamartin]

Let's not use dragula because it hasn't been updated since 2018.

Revert your latest commit(s) so we are using sortablejs again, and add the following line to make sure our styles are applied.

[dsevillamartin]

Oh, one thing I forgot to add. We probably want to expose sortablejs to window - so other extensions can take advantage of it or lazy load their own.

[askvortsov1]

How would we do that? webpack/importing/exporting JS is still a minefield for me

[dsevillamartin]

With expose-loader. It'd be like this, so import 'expose-loader?sortable!sortablejs' (with testing to make sure that it works)

[clarkwinkelmann]

@datitisev We probably want to expose sortablejs to window - so other extensions can take advantage of it or lazy load their own

I'm not seeing a benefit here. If another extensions needs sortable but doesn't depend on the Tags extension, they will need to include the sortable library in their dist file anyway in case Tags isn't being used.

Unless we also have a way for extension to conditionally add javascript dependencies only when it's not already registered, there won't be any benefit from a bundle size perspective, and I'm not seeing any other possible benefit.

[dsevillamartin]

@clarkwinkelmann I mentioned lazy-loading because they can still request a JS file after building - it'll just need to be in the extension's assets folder or use an external CDN.

See https://github.com/FriendsOfFlarum/drafts/blob/aece8dfe3f0b294f17807258b229f16857a0957a/js/src/forum/components/ScheduleDraftModal.js for an example.