Cannot drag skill icon to skill bar on mobile

[ledenis]

Describe the bug

1. Open robrowser on mobile
2. Open the skill list
3. Try to drag any skill (e.g. First Aid) (by starting the drag from the icon) to the skill bar.

Actual behavior: Skill is not dragged
Expected: Skill should be dragged

Packet/Client version
Tested with packetver 20130618 and 20131223

Browser/device info

• Browser: Chrome Android 120
• Device: Samsung Galaxy A52

Additional context
We can drag items however, not skills.

[MrAntares]

Yes, this is a known issue. Chrome on android doesn't respect the drag method we use. Funny thing is that Samsung Browser, which is also chromium based does work, only the image is not shown when draggind and you only can see the code being dragged. The whole drag system needs a redo for touch.

[ledenis]

Actually, I discovered this:

• drag from the skill name (a.g. "First Aid Lv : 1"): OK
• drag from the skill cost (e.g. "Sp: 3"): OK
• drag from the skill icon: KO

(I will update the issue description to reflect that)

I investigated and found out that Chrome Android does not (yet) support dragging <img> elements (see issue: https://issues.chromium.org/issues/40136077, reason is it would conflict with the context menu)

Indeed the skill list uses <img> to render the icon.

I can confirm this by comparing with other draggable icons:

• drag from skill bar icons: OK: uses <div style="background-image">
• drag from inventory items icons: OK: uses <div style="background-image">
• drag from NPC shop items icons: OK: uses <div style="background-image">
• drag from skill list icons: KO: uses <img>

So, a possible fix is to also use <div style="background-image"> instead of <img> to render the skill list icons?