I am aiming to integrate sortablejs's MultiDrag feature with Vuejs2 and Typescript.
The official documentation states:
MultiDrag is a plugin for SortableJS, but it may not be included in all of Sortable's builds. It comes pre-installed in the main Sortable.js file, but is not activated by default in the modular builds (except in sortable.complete.esm.js). To activate it from a modular build, simply use this code:
import { Sortable, MultiDrag } from 'sortablejs';
Sortable.mount(new MultiDrag());
I was able to locate sortable.complete.esm.js in the repository, but I am unsure where to place it within my project's directory structure so that the import statement mentioned above functions correctly.
I attempted
% npm install ~/gitrepos/sortablejs/modular/sortable.complete.esm.js
npm ERR! code ENOLOCAL
npm ERR! Could not install "../../../../sortablejs/modular/sortable.complete.esm.js" as it is not a directory and is not a file with a name ending in .tgz, .tar.gz or .tar
I tried moving the file into my /node_modules directory, followed by:
import { Sortable, MultiDrag } from "sortablejs";
However, this resulted in the following error:
This dependency was not found:
* sortablejs in ./node_modules/cache-loader/dist/cjs.js??ref--14-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--14-2!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Pages.vue?vue&type=script&lang=ts&
How can I properly mount this file?
=======================UPDATE============================
After following dwosk's advice below, I encountered the following error:
warning in ./src/main2.ts
"export 'MultiDrag' was not found in 'sortablejs'
ERROR in /Users/jeff/gitrepos/code/code/paidmerge/from-vue/src/main2.ts(11,10):
11:10 'Sortable' can only be imported by using a default import.
9 | import 'bootstrap-vue/dist/bootstrap-vue.css'
10 |
> 11 | import { Sortable, MultiDrag } from 'sortablejs';
| ^
12 |
13 | Sortable.mount(new MultiDrag());
14 |