SortableJS not working with Onsen UI on desktop

Question

Just copy-pasted the example code from Sortable's docs.

It works fine on any touchsreen device, but as soon as I view it on Chrome or any other desktop browser it stops working. No error, you just can't drag anymore.

Onsen UI's JS probably overwrites the drag events or something like that but couldn't manage to find the solution.

Answer 1

Per the answer given here: https://github.com/SortableJS/Vue.Draggable/issues/508#issuecomment-488314106

If anybody faces this issue then the following is a workaround for this;

document.body._gestureDetector.dispose()

If you need to enable it again for any reason, use the following

document.body._gestureDetector = new ons.GestureDetector(document.body);

Since my code is using Sortable in a Vue component, I ended up doing this as part of the options to Sortable.create. It seems to work well enough:

    onChoose: function(event) {
      if(this.$ons) {
        document?.body?._gestureDetector?.dispose();
      }
    },
    onStart: function(event) {
      if(this.$ons) {
        document?.body?._gestureDetector?.dispose();
      }
    },
    onEnd: (event) => {
      if(this.$ons) {
        document.body._gestureDetector = new this.$ons.GestureDetector(document.body);
      }
    },