gridster.js icon indicating copy to clipboard operation
gridster.js copied to clipboard

dragging doesn't prevent scrolling on mobile

Open nekojanai opened this issue 5 years ago • 1 comments

Tried to drag a widget in chrome dev tools mobile view, console went haywire with the following error:

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See <URL> [Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See https://www.chromestatus.com/features/5093566007214080

preventDefault @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:5423
fn.on_dragstart @ jquery.dsmorse-gridster.self-cfb002bbf694b3a9005ae7a21ee4439fc439d4e82bb4ed555a03c921f7166440.js?body=1:786
(anonymous) @ jquery.dsmorse-gridster.self-cfb002bbf694b3a9005ae7a21ee4439fc439d4e82bb4ed555a03c921f7166440.js?body=1:770
dispatch @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:5184
elemData.handle @ jquery3.self-5af507e253c37e9c9dcf65064fc3f93795e6e28012780579975a4d709f4074ad.js?body=1:4992

How I intitialized gridster:

  var gridsterEdit;

  gridsterEdit = $(".gridsterEdit .gridster ul").gridster({
    widget_base_dimensions: ['auto',50],
    widget_margins: [5,5],
    max_cols: 12,
    max_rows: 12,
    shift_widgets_up: false,
    shift_larger_widgets_down: false,
    autogenerate_stylesheet: true,
    serialize_params: function($w, wgd) {
      return { name: $w.data('name'), col: wgd.col, row: wgd.row, size_x: wgd.size_x, size_y: wgd.size_y }
    },
    collision: {
      wait_for_mouseup: true,
    },
    draggable: {
      stop: function (e,ui,$widget) {
        $("#misc").val(JSON.stringify(gridsterEdit.serialize()));
        console.log(gridsterEdit.serialize());
      },
    },
    disabled: true,
  }).data('gridster');

nekojanai avatar Mar 29 '19 11:03 nekojanai

Seems like this issue isn't trivial to resolve or is it? The problem is related to this change in Chrome. And this library attaches the event via jQuery and the guys over there also didn't come up with a solution yet.

I haven't looked into it that much, but will have to at some point, so...

Anyone more experienced that may be able to comment on my naive assumption that it could be as easy as changing this line: https://github.com/dsmorse/gridster.js/blob/7cf095da2c189bae4d7deae4886af4ba0437953e/src/jquery.draggable.js#L306 to use the vanilla js variant of attaching events plus including the options hash? with passive: false

nekojanai avatar Apr 27 '19 00:04 nekojanai