Draggable Components in Metronic Vue

Hello,

Is there any draggable components/elements demo available in Medtronic, we have to implement draggable dashboard components so if is there any demo available please provide it!

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 (7)

Hi,

You can refer to the Draggable plugin in the HTML version documentation. The draggable plugin can be used in Vue as other js plugins we used in Vue.

Regards

Do you have some documentation on how to implement/use in in vue?

1. Install Package:
npm install @shopify/draggable --save

Then add below mentioned code:

import { Sortable } from "@shopify/draggable";


In onMounted:

const draggable = new Sortable(document.querySelectorAll(".dragContainer"), {
draggable: ".dragAble",
handle: ".dragAble .draggable-handle",
mirror: {
//appendTo: selector,
appendTo: "body",
constrainDimensions: true
}
});
draggable.on("drag:start", () => console.log("drag:start"));
draggable.on("drag:move", () => console.log("drag:move"));
draggable.on("drag:stop", () => console.log("drag:stop"));
draggable.on("sortable:sorted", () => console.log("drag:sorted"));<pre>

.dragContainer this class is the main wrapper and in this class, all your draggable components should be placed.

.draggable-handle this is a button class to move components you can place this class to any component you want inside .dragContainer

Hi,

Thank you for describing this. We will consider using @shopify/draggable package in upcoming releases.

Regards,
Lauris Stepanovs,
Keenthemes Support Team

good news, it would be also great if you could use more plugins in vue. when is the upcoming release planned?

draggable is working, but when i drop i want to update the order in backend. how can i get the new order after dropping?

hello!
Did you manage your question?

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  :(