npm i @redbuck/sorter或者
yarn add @redbuck/sorter
插件打包格式为UMD
因此既可以使用<script>标签引入,然后直接使用window.Sorter
也可以通过import或require的方式引入.
注意,插件使用了部分ES6API,如需兼容需要添加polyfill或者配置babel-runtime等.
- 一般用法
<ul class="free" id="free">
<li class="item item-1">item-1</li>
<li class="item item-2">item-2</li>
<li class="item item-3">item-3</li>
<li class="item item-4">item-4</li>
<li class="item item-5">item-5</li>
<li class="item item-6">item-6</li>
<li class="item item-7">item-7</li>
<li class="item item-8">item-8</li>
</ul>new Sorter(document.getElementById('free'))- 结合MVVM框架 以VUE为例
mounted() {
this.dragger = new Sorter(this.$refs.list, {
change: false,
})
this.dragger.on('drag-over', pos => {
this.changeItem(pos);
setTimeout(() => {
this.dragger.freshThreshold();
}, 20)
})
}知道了需要交换位置的元素,开发者可以自行操作数据,示例如下
changeItem({source, target}) {
let list = this.list;
let temp = list.splice(source, 1);
let start = list.splice(0, target);
// do something
this.list = [...start, ...temp, ...list];
},- 运行
git clone https://github.com/xty1992a/sorter.git - 进入项目根目录,运行
npm i或yarn - 运行
npm run dev - 浏览器查看
localhost:8080
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent