Make moving items with images less buggy

[OZZlE]

First of all, thank you a lot for an awesome module!

I have only one proposed change :-) When you try to drag on an image inside the grid for example then browsers usually starts dragging the image, like if you want to drag it into another application and save it there etc. This makes the actual dragging of items in the grid very buggy. At least half of the time when I tried to drag on top of an image in Chrome on my Mac it started dragging the image only + then I let go of mousedown and the item starts moving, but it also makes onLayoutChange not even fire.

So adding this simple css solves all that :-) Also fixes problems that might arise when dragging on text.

It took me quite a long while to realise this was the issue and I was going to create an issue on this module that onLayoutChange doesn't always fire even when you have moved something and it has fixated in position. But this small css fixes all that from what I've seen, sometimes life is actually simple :-)

Let me know what you think! :)

Issue: #1282

[STRML]

Hi @OZZlE. Thanks for this PR. Unfortunately I don't think this is generalizable to all use cases of RGL - we have significant numbers of users who embed forms or charts or other interactive widgets inside their grid items. This CSS would cause problems with those use cases. Instead, it makes more sense to add a note about this to the README, and let users sort out what CSS should be added to their grid items depending on what they are doing with it.

[OZZlE]

@STRML aha, what do you think about adding it by default on only Images instead?

.react-grid-item img {
    pointer-events: none;
}

I have worked with web for 10 years, mostly FE, and I had no idea about this 'pointer-events' thing, I though this was a bug in this module and was very close to just opening an issue :-)

But yeah in readme could work otherwise as well :)

[STRML]

I think the img styles are fine, yes - thanks for the suggestion!

[STRML]

Speedy - nice!