'sup !

With other modders we noticed that the drag and drop as we would do on a standard web browser was not working.
To remedy this problem I've tweaked my side to get as close as possible to the drag and drop we know.

You will find below the file and information to better understand how it works.

Download
https://github.com/DjCtavia/OnsetDragAndDrop

Going deeper

We have 3 main elements that we find in a drag and drop, when the user starts to press the element, moves it, and drops it.

So we use 3 events:
  • onmousedown
  • onmousemove
  • onmouseup
In this example we use a kind of very basic inventory system. Items, slots dedicated to items.
So we have a constrain. Items can only be deposited in `itemSlots'.

I know I'm only going to slip items. To make it as simple as possible, I'm going to put an `item' class on images (which basically represent items),
so manipulating my drag and drop like this allows me to be more ample and permissive if I need to make a change later.

I insert on the item the attribute `onmousedown` with the function `drag(event)`. This will initiate the start of the drag.

The body of the HTML page then takes over with the `onmousemove' event using the `MousePosUpdate(event)` function. Having the event on the body allows us to track all the events.
As soon as the cursor is moved, the position of the image is automatically updated to its new position thanks to the event.

This is especially the case for the `onmouseup' event which uses the `mUp(event)` function.
As soon as the user lets go of the left mouse button, a condition sequence checks different things,

such as:
  • Which button on the mouse was released
  • can the object under my drag and drop accommodate my object
  • is the object under my drag and drop the same type? And if yes, exchange the position of the 2 items
Globally it's the way the code works, I advise you to tinker a bit to understand it better!