vue拖拽dom排序

安装vuedraggable插件

npm i vuedraggable

使用说明

以上这个第三方插件使用起来极为便捷。只需要用标签包裹需要拖拽排序的dom就可以了。

  • v-model绑定的是排序dom所在的数据源数组
  • v-bind绑定的是配置项,如需要动态禁用拖拽功能,只需要控制配置项里的disabled属性即可
  • ghost-class绑定的是拖拽时dom的移动样式,一般用下面示例里的.ghost样式就可以了
  • 以下通用示例里的结构可以直接复制过去使用,足够解决一般的dom拖拽排序场景了。如果需要更复杂的效果,可移步至以下链接查看详细的代码片段示例

vuedraggableicon-default.png?t=N7T8https://sortablejs.github.io/Vue.Draggable/#/simple

通用示例



效果图:

你可能感兴趣的:(JavaScript的世界,vue2.0,vue3.0,vue.js,前端,javascript)