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!
Replies (8)
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?
hi, no. i'm waiting for the upcoming release
