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!


Topic: Drag and drop plugin TouchEvent error

digi-conception priority asked 1 year ago


Hi,

I have an issue with the drag and drop plugin that I'm using for the first time, in a vue 3 app combined with your ui kit.

I've imported the module and use the exact same code as in the docs to test it.

Expected behavior

Drag and drop working using MDBSortable and MDBSortableItem

Actual behavior

When I try to drag an element, it selects the text instead. In the console I have an error:

[Error] ReferenceError: Can't find variable: TouchEvent
z (mdb-vue-drag-and-drop.js:341)
ae (mdb-vue-drag-and-drop.js:309)
x (mdb-vue-drag-and-drop.js:335)

Resources (screenshots, code snippets etc.)

Draggable elements not draggable


Bartosz Cylwik staff answered 1 year ago


Hi! Unfortunatelly i cannot reproduce this problem. Please check the points below:

  • 1) plugins are part of mdb vue pro advanced package. Make sure that you installed this one in your app (plugins should be installed aswell)
  • 2) in script there should be import for MDBSortable and MDBSortableItem: import { MDBSortable, MDBSortableItem } from "mdb-vue-drag-and-drop";
  • 3) in main.ts should be added css files for both, mdb-vue-ui-kit and drag-and-drop: import "mdb-vue-ui-kit/css/mdb.min.css";<br>import "mdb-vue-drag-and-drop/css/mdb-vue-drag-and-drop.min.css";
  • 4) check pro plugins installation page: https://mdbootstrap.com/docs/vue/pro/plugins-installation/

If noone of that will help, send us some code that you are using, so we could take a look and see what may be the problem. Best Regards!



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 3.2.0
  • Device: Computer
  • Browser: Safari
  • OS: Mac OS
  • Provided sample code: No
  • Provided link: No