参考文档:http://www.sortablejs.com/index.html
我司有需求,拖动列表改变列表排序。
so,尝试了一下。
按照文档介绍,通过npm安装:
npm install sortablejs --save
在react中使用:(仅示例)
import React, { useEffect } from 'react';
// import Sortable from 'react-sortable';
import Sortable from "sortablejs";
import { PageContainer } from '@ant-design/pro-layout';
import style from './style.less'
const testa = () => {
useEffect(() => {
new Sortable(document.getElementById('items'), {
animation: 150,
ghostClass: 'blue-background-class',
onUpdate: function (evt) {
console.log(evt.oldIndex, evt.newIndex);//oldIndex元素原始位置,newIndex元素最新位置
},
});
}, [])
return (
<PageContainer title={false}>
<ul id="items" className={style.example1}>
<li key="0">a0</li>
<li key="1">a1</li>
<li key="2">a2</li>
<li key="3">a3</li>
<li key="4">a4</li>
<li key="5">a5</li>
<li key="6">a6</li>
</ul>
</PageContainer>
)
}
export default testa
其他有需要用到的方法如下:
var sortable = new Sortable(el, {
group: "name", // or { name: "...", pull: [true, false, 'clone', array], put: [true, false, array] }
sort: true, // boolean 定义是否列表单元是否可以在列表容器内进行拖拽排序
delay: 0, // number 定义鼠标选中列表单元可以开始拖动的延迟时间;
touchStartThreshold: 0, // px, how many pixels the point should move before cancelling a delayed drag even