宝哥软件园

Vue组件Draggable实现拖放功能

编辑:宝哥软件园 来源:互联网 时间:2021-08-28

Draggable是一个基于Sortable.js的vue组件,用于实现拖放功能。

有关具体说明,请参考:学习链接

Npm官方演示:

Vuedraggable功能:

支持触控设备,支持拖拽选择文本,支持智能滚动,支持不同列表之间的拖拽,不基于jQuery,与视图模型同步,兼容vue2国家动画,支持撤销操作。当需要完全控制时,可以抛出所有更改,这可以与现有的UI组件兼容。

安装:

npm安装vuedraggable页面介绍:

从“vue draggable”数据导入draggable定义用于模拟的数据:这是一个排序案例,与上图不同

模板div!-正在调用组件-可拖动元素=' ul ' v-model=' listdata ' Li v-for=' listdata ' { item。名称} }/李/可拖动!-显示列表数据的效果-{ { listdata } }/div/template script import draggable from ' vue draggable ' export default { name : ' draggable test ',Components : {draggable,},data(){ return { listdata :[{ id : 1,name:' Ye罗森1' },{ id: 2,name 33: ' Ye罗森2' },{ id: 3,name 333366希望对大家的学习有帮助,支持我们。

更多资讯
游戏推荐
更多+