Level 80
Oct 20, 2020
9
Level 16
What are some good draggable javscript libraries?
I want to create a draggable and resizable grid interface for vue components. Any suggestions for a Javascript library? (vanillaJS, vueJS or jQuery0.)
Example site
https://www.cryptotiles.io/?utm_source=github&utm_medium=web&utm_campaign=vue-grid-layout
Functionalities I am trying to build
- Allow user to add a vue component to the workspace.
- Allow him to drag and resize those components according to the grid
- Save the state of the vue component and positioning of each components
- Use the saved data to re render ui when user requests for it.
Level 102
Are you already using a js framework? And is it drag around (draggable) or drag and drop (drop stuff into other stuff). I use react and have both in a project
Level 14
Check this https://packery.metafizzy.co/draggable.html
For save and restore check this example https://codepen.io/desandro/pen/PZrXVv
Level 16
@sinnbeck I aint using any frameworks as if now. I want to develop this using and js or vuejs library
Level 35
I like Vue Draggable: https://github.com/SortableJS/Vue.Draggable
I have an old (but still relevant) screencast here: https://www.youtube.com/watch?v=1Yrzli1PqFc
1 like
Level 102
@ravish Still wondering if it is draggable or drag and drop. You said drag and drop, but people are linking to draggable (which I think is correct, but I would prefer to be sure)
Level 16
@sinnbeck Please check the question again. I updated it. Sorry for keeping it confusing.
Level 102
Great. So something like this https://github.com/mauricius/vue-draggable-resizable
Playground: https://mauricius.github.io/vue-draggable-resizable/?path=/story/basic--basic-component
And you can check when dragging starts/stops for ajax saving fun :) https://mauricius.github.io/vue-draggable-resizable/?path=/story/events--dragging
Level 16
@sinnbeck Thanks. It was helpful.
Please or to participate in this conversation.