Super Sale Limited Time 50% OFF for All-Access Plans
Save 50% Now
Light
Dark
System
Ask  Question

Draggable demos do not work


Hi,
All demos of draggable plugins do not work. Could you help to check?

https://preview.keenthemes.com/html/metronic/docs/general/draggable/cards

Thanks


W
WilinkNet 2 years ago
Metronic HTML
3 Answers
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (3)

user
Lisandro Scofano 2 years ago

Hi Sean, could you please update the JS documentation here https://preview.keenthemes.com/html/metronic/docs/general/draggable/cards with your last comment? I lost quite a few hours trying to make it work until I got here.


user
Sean Author 2 years ago

Hi,

Thanks for the heads-up.

We are aware of this issue and we will provide a quick fix asap.

Regards.


user
Sean Author 2 years ago

Hi,

You can fix this issue by referring to the following steps:

  1. Get the latest Metronic from Themeforest and follow Quick Setup guide.

  2. If you are using Gulp go to core/html/tools/gulp.config.js and change the draggable build config as shown below:

 draggable: {
 src: {
 scripts: [
 "{$config.path.node_modules}/@shopify/draggable/build/umd/index.min.js",
 ],
 },
 dist: {
 scripts: "{$config.dist}/plugins/custom/draggable/draggable.bundle.js",
 },
 },
  1. If you are using Webpack go to tools/webpack/plugins/custom/draggable/draggable.js and change the build config as shown below:
require('@shopify/draggable/build/umd');
  1. In your custom JS code use
 var containers = document.querySelectorAll('.draggable-zone');
 var swappable = new Draggable.Sortable(containers, {
 draggable: '.draggable',
 handle: '.draggable .draggable-handle',
 mirror: {
 //appendTo: selector,
 appendTo: 'body',
 constrainDimensions: true
 }
 });

Regards.

Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Click any option to insert into your comment. Select text first to wrap it.
  • **text** to make things bold
  • *text* to emphasize
  • ### Heading to make headings
  • [link text](url) for links
  • ![alt text](image-url) to paste in an image
  • - item to make a list
  • 1. item to make an ordered list
  • > quote to quote somebody
  • `code` for single line of code
  • ```js ... ``` for JS code block
  • ```html ... ``` for HTML code block
  • ```scss ... ``` for SCSS code block
  • ```php ... ``` for PHP code block
  • --- for a horizontal rule
  • happy  :)
  • shocked  :|
  • sad  :(