Vue.Draggable Vue 动态拖放组件 ,拖拽diy页面的实现

[ 2023-06-17 15:34:42 | 作者: admin ]
字号: | |
Vue.Draggable参考应用代码: https://gitee.com/china-bin/vdesjs
vue.draggable中文文档 (基于sortable.js):https://www.itxst.com/vue-draggable/tutorial.html
sortable.js文档:https://www.itxst.com/sortablejs/rmmr3i73.html


软件简介

Vue.Draggable 是基于 Sortable.js 的 Vue 拖放组件。它允许拖放和视图模型数组同步,基于并提供 Sortable.js 的所有功能。
attachments/202306/17_153501_082132_zfpe_4105562.gif




特性
        完全支持 Sortable.js 功能:
               支持触摸设备
               支持拖动手柄和可选文本
               智能自动滚动支持
               不同列表之间的拖放
               没有 jQuery 依赖
        保持同步 HTML 和视图模型列表
        与 Vue.js 2.0 transition-group 兼容
        支持取消
        在需要完全控制时报告任何更改的事件
        重用现有的 UI 库组件(例如 vuetify、element 或 vue 材料等)并使用 tag 和 componentData 道具使它们可拖动

安装
npm or yarn
yarn add vuedraggable
npm i -S vuedraggable

请注意,对于 Vue 2.0 而言,它是 vuedraggable,而不是版本 1.0 的 vue-draggable

浏览器
<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
<script src="//cdn.jsdelivr.net/npm/sortablejs@1.8.4/Sortable.min.js"></script>
<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.20.0/vuedraggable.umd.min.js"></script>
[最后修改由 admin, 于 2023-06-17 15:51:55]
评论Feed 评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=2933

这篇日志没有评论。

此日志不可发表评论。