H5 Gridstack.js completely useless in safari

[kevinlandsberg]

Subject of the issue

Gridstack.js completely useless in safari.

Your environment

• Gridstack.js version: 3.1.2 with HTML5
• Safari, Version 14.0.2 (16610.3.7.1.9) under MacOS Big Sur

Steps to reproduce

Just visit libary homepage and try to use examples.

Expected behavior

Tiles should be draggable

Actual behavior

No dragging ability...

[adumesny]

will take me a while to try this on a mac as I'm on windows...

[kevinlandsberg]

Yeah,

but it seems to get more importance to support Safari cause Apple is selling a lot of computers atm 👍🏿

[kevinlandsberg]

You can try out Browserstack (https://www.browserstack.com/)

[shmolf]

JavaScript Console Error

TypeError: $('.newWidget').draggable is not a function. (In '$('.newWidget').draggable({
      revert: 'invalid',
      scroll: false,
      appendTo: 'body',
      helper: 'clone'
    })', '$('.newWidget').draggable' is undefined)
    ```

[adumesny]

@shmolf sounds like you are mixing html5 and jquery-ui there... I don't think that pertains to the site demos but I have not looked on safari yet.

[shmolf]

@shmolf sounds like you are mixing html5 and jquery-ui there... I don't think that pertains to the site demos but I have not looked on safari yet.

Ack! You're probably right. I'll try changing my assets, and let you know the result.

[shmolf]

I was using the following CDN URL
https://cdn.jsdelivr.net/npm/gridstack@3.1.2/dist/gridstack-h5.js

This was referenced by the JS Fiddle example.

Nothing else is loaded, other than CSS.

[shmolf]

We may independently use Jquery UI, but not for Gridstack.

Does Gridstack check if Jquery UI is globally available, then references if so?

[adumesny]

please file a separate bug with reproduceable example. And no we don't reference JQ ui if it's available...onlyif our JQ plugin is used.

[shshen]

I have same issue in safari, when i drag a grid element. I'm using latest release build:

[Error] ReferenceError: Can't find variable: DragEvent
initEvent (gridstack-h5.js:2:58075)
_dragStart (gridstack-h5.js:2:41983)
_dragStart

[adumesny]

for now you will need to use the jquery version

[adumesny]

I spent a lot of time over the break and think I have a fix for Safari (and also better behavior for Chrome). Help or Donations would be appreciated..

[kevinlandsberg]

I spent a lot of time over the break and think I have a fix for Safari (and also better behavior for Chrome). Help or Donations would be appreciated..

I will definetly donate as soon as it will work on Safari and there will be the engine fix for swapping grid items instead of pushing them down...#149

[adumesny]

fixed in upcoming 3.1.3