Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!

Petr Urban priority asked 1 year ago


Hello, I'm trying to use the Drag and Drop plugin with the sortable functionality - MDBSortable.

I have very simple case from your page:

import {MDBRow, MDBCol, MDBBtn, MDBIcon, MDBProgress, MDBSpinner, MDBBtnClose} from 'mdb-vue-ui-kit';
import {MDBSortable, MDBSortableItem} from "mdb-vue-drag-and-drop";

...

<MDBRow class="mt-4">
      <MDBCol col="2"></MDBCol>
      <MDBCol class="border p-4 d-flex justify-content-center mb-4">
        <MDBSortable>
          <MDBSortableItem>Item 1</MDBSortableItem>
          <MDBSortableItem>Item 2</MDBSortableItem>
          <MDBSortableItem>Item 3</MDBSortableItem>
          <MDBSortableItem>Item 4</MDBSortableItem>
          <MDBSortableItem>Item 5</MDBSortableItem>
        </MDBSortable>
      </MDBCol>
    <MDBCol col="2"></MDBCol>
 </MDBRow>

But is not working. I'm getting this error message in console:

Uncaught ReferenceError: TouchEvent is not defined z MDBSortable.vue:366 ae MDBSortable.vue:273 x MDBSortable.vue:341 O MDBSortable.vue:227 ee MDBSortable.vue:211 X MDBSortable.vue:205 X MDBSortable.vue:200 setup MDBSortable.vue:217 node_modules chunk-6DK54HCS.js:8733 callWithErrorHandling runtime-core.esm-bundler.js:158 callWithAsyncErrorHandling runtime-core.esm-bundler.js:166 __weh runtime-core.esm-bundler.js:2655 flushPostFlushCbs runtime-core.esm-bundler.js:325 flushJobs runtime-core.esm-bundler.js:363 promise callback*queueFlush runtime-core.esm-bundler.js:270 queueJob runtime-core.esm-bundler.js:264 effect runtime-core.esm-bundler.js:5810 triggerEffect reactivity.esm-bundler.js:373 triggerEffects reactivity.esm-bundler.js:363

This is my import in main.ts:

import 'mdb-vue-ui-kit/css/mdb.min.css';
import "mdb-vue-drag-and-drop/css/mdb-vue-drag-and-drop.min.css";
import { createApp } from 'vue';
import './style.css';
import router from './router';
import store from './store';
// @ts-ignore
import App from './App.vue';
import axios from "axios";
import VueAxios from "vue-axios";

Any help will be very useful. Thanks Petr


Bartosz Cylwik staff answered 1 year ago


Hi! At first I couldn't recreate the issue, but it seems like it is occuring only on Safari and Firefox. Can you confirm that the issue is also visible here?

https://b-cylwik-test-drag-and-drop.mdbgo.io/

Unfortunately, this is a bug. I have added this to our to-fix list so we can fix this as soon as possible. Although not a much of a workaround, but you can go to node_modules => mdb-vue-drag-and-drop and remove TouchEvent from MDBDraggable and MDBSortable. Then try using the edited files in your app.

Thank you for reporting this and sorry for the inconvenience.

Best Regards!


Petr Urban priority commented 1 year ago

Hello, thanks for answer. I've tried your example and you are right. It is working only in Chrome and Edge.

It is Safari and Firefox specific issue.

Thanks, Petr



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Vue
  • MDB Version: MDB5 4.0.0
  • Device: MacBook
  • Browser: Firefox
  • OS: macOS Ventura
  • Provided sample code: No
  • Provided link: No