当前位置: 首页 > Web前端 > vue.js

1分钟实现拖拽,让你划水更自如

时间:2023-03-31 15:04:28 vue.js

/*定义被拖动元素的样式*/.ghostClass{background-color:blue!important;}.chosenClass{background-color:red!important;opacity:1!important;}.dragClass{background-color:blueviolet!important;opacity:1!impo咆哮;框阴影:无!重要;大纲:无!重要;背景图像:无!重要;}.itxst{边距:10px;}.title{填充:6px12px;}.col{宽度:40%;弹性:1;填充:10px;边框:实心1px#eee;边界半径:5px;float:left;}.col+.col{margin-left:10px;}.item{padding:6px12px;边距:0px10px0px10px;边框:实心1px#eee;背景色:#f1f1f1;}.item:hover{背景色:#fdfdfd;cursor:move;}.item+.item{border-top:none;margin-top:6px;}vue.draggable一个神奇的组件,快速实现列表拖拽,让你划水更久。vue.draggable是一个基于sortable.js的vue拖拽插件。支持移动设备,拖选文本,智能滚动,不同列表间拖拽,兼容vue2转场动画,支持撤销操作,总之vue.draggable是一个很不错的拖拽组件。下面是基本用法:安装方法yarnaddvuedraggablenpmi-Svuedraggable单列拖动多栏拖动