网站开发实用技术答案,乐山公司网络建设,网站优化计划,页面设计怎么写我们右键项目 选择 使用命令行窗口打开所在目录 然后 在终端中输入
npm install vuedraggable --save导入 vuedraggable 然后组件编写代码如下
templateview classcontainerdraggable v-modellist :optionsdragOptionstemplateview classcontainerdraggable v-modellist :optionsdragOptions classdragAreaview v-for(item, index) in list :keyitem.id classitemview classcontent{{ item.name }}/view/view/draggable/view
/templatescriptimport draggable from vuedraggableexport default {components: {draggable},data() {return {list: [{ id: 1, name: Item 1 },{ id: 2, name: Item 2 },{ id: 3, name: Item 3 },{ id: 4, name: Item 4 },{ id: 5, name: Item 5 }],dragOptions: {animation: 200}}}}
/scriptstyle.container {padding: 20rpx;}.item {margin-bottom: 10rpx;background-color: #f5f5f5;padding: 10rpx;}.handle {width: 70rpx;height: 30rpx;background-color: #999;color: #fff;text-align: center;line-height: 30rpx;margin-right: 10rpx;}.content {cursor: move;}
/style运行代码 这样就是一个可拖拽排序的列表了
