双鸭山市建设局网站,wordpress 默认评论,谷歌关键词挖掘工具,网站做整合页面效果: 拖拽排序 背景#xff1a;
作为一名前端开发人员#xff0c;在工作中难免会遇到拖拽功能#xff0c;分享一个github上一个不错的拖拽js库#xff0c;能满足我们在项目开发中的需要#xff0c;下面是我在uniapp中使用SortableJS的使用详细流程#xff1b;
vue开发…效果: 拖拽排序 背景
作为一名前端开发人员在工作中难免会遇到拖拽功能分享一个github上一个不错的拖拽js库能满足我们在项目开发中的需要下面是我在uniapp中使用SortableJS的使用详细流程
vue开发的web项目可以参考我的另一篇文章
Vue中拖动排序功能,引入SortableJs前端拖动排序。https://blog.csdn.net/weixin_64530670/article/details/132328122?spm1001.2014.3001.5501
开始前先下载好Sortable至项目中,可直接下载min包,官方文档:SortableJs中文文档http://www.sortablejs.com
sortable下载到本地 renderjs只支持H5和App-vue不支持小程序和App-nvue开发下载好后,在html代码处,找到你要拖拽排序的元素的父元素,给它设置一个id,我这边设置的就是sort ,然后 给要拖拽的元素设置:data-id 它的作用是,决定了拖拽结束后返回给你一个怎样的数组,传item.id,它就会自动在拖拽结束后返回给你一个拖拽后排序好的id数组. 然后我们就可以拿去处理数据,发请求保存顺序啦! view classappList idsortview classappItem v-for(item,index) in usualist :keyitem.appId :data-iditem.appIdview classremove tapremove(item)u-icon nameminus-circle-fill/u-icon/viewimage classimg :srcgetimgUrl(item.overImgUrl) v-ifBoolean(item.overImgUrl)/imageview classfirst v-else{{getfirst(item.name)}}/viewview classappIntroductiontext{{item.name}}/text/viewview classtotopu-icon namelist/u-icon/view/view/view css: .sort {display: flex;align-items: center;flex-wrap: wrap;-item {width: 200rpx;height: 100rpx;display: flex;align-items: center;justify-content: center;border-radius: 15rpx;background: #f5f5f5;margin: 5rpx;}} js代码 再写一个script标签: script modulesortable langrenderjs
import Sortable from static/Sortable.min.js
export default {mounted() {this.initSortable()},methods: {initSortable() {if (typeof window.Sortable function) {this.setSortable()} else {const script document.createElement(script)script.src /static/Sortable.min.jsscript.onload this.setSortable.bind(this)document.head.appendChild(script)}},setSortable() {let option {animation: 150,delay:300,onEnd: (e) {// 拖拽完成后回调this.$ownerInstance.callMethod(changeSort, sortable.toArray());}}let sortable Sortable.create(document.getElementById(sort), option);},}
}
/script 以上代码中,在执行完拖拽后会执行changeSort方法,这个方法需要写到原本的那个script中: changeSort(e) {console.log(e)this.flag truethis.updatelist e.join(,)}, 拖拽后打印出来的e就是有已经排序好的每一项的id组成的数组。
