New Project from Keenthemes => CrudHuntAnyone Can Become a React Developer – Dive into the Future’s Hottest Framework
Learn more

keenthems Draggable The function doesn't work.


hello.
The drag function does not work in the doc example.
Even if you copy the source code, it doesn't work.

keenthemms : seven-html-pro
doc Url : https://preview.keenthemes.com/html/seven-html-pro/docs/general/draggable/restricted


Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(

Replies (2)


Hi,

Thank you for reporting this issue. We will check it further and provide a quick fix asap.

Regards.



Hi,

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

1. 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",
},
},


3. 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");


4. 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
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(
Text formatting options
Submit
Here's a how to add some HTML formatting to your comment:
  • <pre></pre> for JS codes block
  • <pre lang="html"></pre> for HTML code block
  • <pre lang="scss"></pre> for SCSS code block
  • <pre lang="php"></pre> for PHP code block
  • <code></code> for single line of code
  • <strong></strong> to make things bold
  • <em></em> to emphasize
  • <ul><li></li></ul>  to make list
  • <ol><li></li></ol>  to make ordered list
  • <h3></h3> to make headings
  • <a></a> for links
  • <img> to paste in an image
  • <blockquote></blockquote> to quote somebody
  • happy  :)
  • shocked  :|
  • sad  :(