JS 仿頭條頻道編輯功能 (拖拽排序，添加，刪減)

前言

項目地址：github.com/zhengjunxia…

因爲，項目中使用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 ；獲得改實例後，在用戶一頓操做後，調用實例 instance 的 returnEditData 方法，返回出當前編輯好的順序數組。

參數說明

名稱	是否必須	備註	類型
editData	是	當前已選數據	Array
addData	是	全部數據	Array
editCon	是	編輯選項的容器	String / Dom
addCon	是	添加選項的容器	String / Dom
animation	否	動畫設置	String（default: 'all 0.2s ease'）

結束語

仿頭頻道編輯功能效果比較複雜，該庫實現的代碼比較簡單，沒徹底實現全部的效果，但基本知足開發需求；但願能夠給到有相關需求的同窗一些參考。TX