怎样做水果外卖加盟网站,大学html网站建设作业,网站建设步和客户沟通,成都网站建设推广可以vue项目中拖动元素改变其顺序的功能实现 实现此功能#xff0c;我利用的是SortableJs,其官网上直接介绍其为功能强大的js拖拽库#xff0c;只需要简单的代码即可实现dom拖拽
1.下载 npm i sortablejs 2.引入
使用时#xff0c;我们在那个页面中使用#xff0c;就在该vue文…vue项目中拖动元素改变其顺序的功能实现 实现此功能我利用的是SortableJs,其官网上直接介绍其为功能强大的js拖拽库只需要简单的代码即可实现dom拖拽
1.下载 npm i sortablejs 2.引入
使用时我们在那个页面中使用就在该vue文件中引入即可
script
import Sortable from sortablejs
/script3.使用
首先参考官网中的案例和配置项 使用sortablejs需要new一个示例出来初始化实例时第一个参数是一个dom是拖拽列表元素的容器第二个参数是传入的配置对象可以在配置对象中写入配置项来实现各种不同的功能效果
上述我们知道要操作dom, 因此初始化的代码我写在了一个方法中并在mounted生命周期回调中调用该方法
首图展示的效果代码如下
templatedivdiv idexample1div classlist-group-item v-fori in 10 :keyiel-button classmove iconDiscount typeprimary sizesmall plain circle/el-buttonItem{{i}}/div/div/div
/template
script
import Sortable from sortablejs
export default {data(){return {sortableObj:null}},mounted(){this.rowDrop()},methods:{rowDrop(){if(this.sortableObj){this.sortableObj.destroy()}this.sortableObjnew Sortable(document.getElementById(example1),{animation:150,//官网中配置项的注释已经非常详细了这里我就不一一注释啦handle:.move,ghostClass:blue-background-class})}}
}
/script
style langscss
.list-group-item{padding: 12px 20px;border: 1px solid rgba(0,0,0,.125);
}
.blue-background-class{background-color: #c8ebfb;
}/style
以上就是近期对该内容的学习如果内容有错误/需要改进的地方欢迎大家提出并指正
