乐趣区

JS-仿头条App频道编辑功能-拖拽排序添加删减

前言

项目地址:https://github.com/zhengjunxi…

由于,项目中使用 App 混合开发,要实现频道编辑功能;在没找到合适的解决方案的情况下,自己写了这个库;已经在项目中跑了 2 年多,有不错的可用性;写下这篇文章分享下????

启动项目

git clone https://github.com/zhengjunxiang/drap-sort.git && cd drap-sort
yarn install
yarn run dev

预览效果:

使用浏览器的 device toolbar 或手机浏览器浏览

使用样例说明

项目中的 main.js 使用样例:

import './style/DragSort.less'
import './style/index.less'
import DragSort from './js/DragSort.js'

// 模拟从服务器请求回来后,当前显示的数据;// editData:当前已选数据
// addData:所有数据
const editData = ['热点', '推荐', '最新', '科技', '国际'],
  addData = ['热点', '推荐', '最新', '科技', '娱乐', '体育', '军事', '影视', '星座', '美食', '音乐', '健身', '宠物', '问答', '旅行', '宗教', '历史', '国际'];
var instance = new DragSort({editCon: document.querySelector('#switchCoinExitCoinContent'),
  editData: editData,
  addCon: document.querySelector('#addCoinContent'),
  addData: addData
});

document.querySelector('#handleGetRet').onclick = function () {console.log(instance.returnEditData()); // ['热点', '推荐', '最新', '科技', ...]
}

引入该类,然后传入初始参数,实例化出实例 instance;得到改实例后,在用户一顿操作后,调用实例 instancereturnEditData 方法,返回出当前编辑好的顺序数组。

参数说明

名称 是否必须 备注 类型
editData 当前已选数据 Array
addData 所有数据 Array
editCon 编辑选项的容器 String / Dom
addCon 添加选项的容器 String / Dom
animation 动画设置 String(default: ‘all 0.2s ease’)

结束语

仿头频道编辑功能效果比较复杂,该库实现的代码比较简单,没完全实现所有的效果,但基本满足开发需求;希望可以给到有相关需求的同学一些参考。TX

退出移动版