search

dsmorse / gridster.js

gridster.js is a jQuery plugin that makes building intuitive draggable layouts from elements spanning multiple columns
http://dsmorse.github.io/gridster.js/
MIT License
795 stars 194 forks source link

dragging doesn't prevent scrolling on mobile #132

Open nekojanai opened 5 years ago

nekojanai commented 5 years ago

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 commented 5 years ago

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