Backport 'Fix drag_and_drop on mobile without scrolling' to v0.30 (#94)

Author: davidbeig

decidim-forms/app/packs/src/decidim/forms/forms.js

@@ -35,10 +35,31 @@ $(() => {
     }
   });
 
-  document.querySelectorAll(".js-sortable-check-box-collection").forEach((el) => new DragonDrop(el, {
-    handle: false,
-    item: ".js-collection-input"
-  }));
+  document.querySelectorAll(".js-sortable-check-box-collection").forEach((el) =>  {
+
+    /**
+    * Due to a bug reported in https://github.com/decidim/decidim/issues/15191
+    * we have to listen to the `drag` event and prevent the scrolling
+    * and enabling it back again after it.
+    */
+
+    let preventScroll = function(event) {
+      event.preventDefault();
+    }
+
+    el.addEventListener("touchmove", (event) => {
+      preventScroll(event);
+    }, { passive: false });
+
+    el.addEventListener("touchend", () => {
+      el.removeEventListener("touchmove", preventScroll)
+    });
+
+    return new DragonDrop(el, {
+      handle: false,
+      item: ".js-collection-input"
+    });
+  });
 
   $(".answer-questionnaire .question[data-conditioned='true']").each((idx, el) => {
     createDisplayConditions({