Vue Js Draggable

Posted on  by admin
Modified1 year, 7 months ago. I have a div inside a vue component, I want to make the component draggable.
I checked with many vue draggable plugins, but they have a seperate component for drag and not as a directive to just add like in angular draggable.
Please help me with this?
Apsara VidhyaApsara Vidhya.
You need to add vuedraggable to your node modules.
yarn add vuedraggable.
and then you need something like this:.
11 gold badge1010 silver badges1919 bronze badges.
1919 bronze badges.
Vue component (Vue.js 2.0) or directive (Vue.js 1.0) allowing drag-and-drop and synchronization with view model array.
Based on and offering all features of Sortable.js.
Full support of Sortable.js features:Supports touch devicesSupports drag handles and selectable textSmart auto-scrollingSupport drag and drop between different listsNo jQuery dependency.
Supports touch devices.
Supports drag handles and selectable text.
Smart auto-scrolling.
Support drag and drop between different lists.
No jQuery dependency.
Keeps in sync HTML and view model list.
Compatible with Vue.js 2.0 transition-group.
Cancellation support.
Events reporting any changes when full control is needed.


  • Reuse existing UI library components (such as vuetify, element, or vue material etc..) and make them draggable using tag and componentData props.
  • Admin Dashboard Templates made with Vue, React and Angular.
  • Find this project useful?
  • You can buy me a ☕️ or a 🍺.
  • Beware it is vuedraggable for Vue 2.0 and not vue-draggable which is for version 1.0.
Use draggable component:. Draggable component should directly wrap the draggable elements, or a transition-component containing the draggable elements.
Type: ArrayRequired: falseDefault: null.


Building a Kanban board

  • vue2.6使用pdf.js预览pdf文件-亲测有效

    lucky_zouzou: 能具体描述一下吗?我是这么做确实可以实现

  • vue2.6使用pdf.js预览pdf文件-亲测有效

    喊我回去学习: 这个就是ifram和embed直接展示啊,用不用下载pdf都无所谓的

  • vue2.6使用pdf.js预览pdf文件-亲测有效

    weixin_42097380: 写的不对

  • vue2.6使用pdf.js预览pdf文件-亲测有效

    lucky_zouzou: 我记得build和web这两个文件夹都在下载的文件里可以找到

  • vue2.6使用pdf.js预览pdf文件-亲测有效

    Darcy_dai: 我也有这个问题,请问你解决了吗

Live Demos

  • Input array to draggable component.
  • Typically same array as referenced by inner element v-for directive.This is the preferred way to use Vue.draggable as it is compatible with Vuex.It should not be used directly but only though the v-model directive:.
  • Type: ArrayRequired: falseDefault: null.
  • Alternative to the value prop, list is an array to be synchronized with drag-and-drop.The main difference is that list prop is updated by draggable component using splice method, whereas value is immutable.Do not use in conjunction with value prop.
  • New in version 2.19.