# 可拖拽列表
> 数据列表可任意拖拽调换顺序

### 导入使用
```code[javascript]
import seListSort from "ss-universal-client-web/comp/data/su-list-sort";
```
## 基本用法

:::demo `show`用于控制弹窗展示与否
```html
<template>
    <div>
        <su-list-sort v-slot="scope" :data="data">
            <template>
                {{scope.row.name}}
            </template>
        </su-list-sort>
    </div>
</template>

<script>
    export default {
        components:{seListSort},
        data() {
            return {
                data: [
                    {
                        "id": "12987122", "name": "王小虎1", "amount1": "234", "amount2": "3.2", "amount3": 10
                    },
                    {
                        "id": "12987123", "name": "王小虎2", "amount1": "165", "amount2": "4.43", "amount3": 12
                    },
                    {
                        "id": "12987124", "name": "王小虎3", "amount1": "324", "amount2": "1.9", "amount3": 9
                    },
                    {
                        "id": "12987125", "name": "王小虎4", "amount1": "621", "amount2": "2.2", "amount3": 17
                    },
                    {
                        "id": "12987126", "name": "王小虎5", "amount1": "539", "amount2": "4.1", "amount3": 15
                    }
                ]
            }
        }
    }
</script>
```
:::


## 列表可配置化
可通过`options`对列表进行配置：多组之间进行拖拽，是否可拖入、拖出，组内可进行拖拽等，详情见 <a href="https://github.com/SortableJS/Sortable" target="_blank">options配置</a>

:::demo 
```html

<template>
    <div style="height:200px">
        <div style="width: 30%;float:left;height:fit-content">
            <su-list-sort v-slot="scope" :options="options1" :data="data">
                <template>
                    <div>{{scope.row.name}}</div>
                </template>
            </su-list-sort>
        </div>
        <div style="width: 30%;float:left;height:fit-content">
            <su-list-sort v-slot="scope" :options="options2" :data="data">
                <template>
                    <div>{{scope.row.id}}</div>
                </template>
            </su-list-sort>
        </div>
        <div style="width: 30%;float:left;height:fit-content">
            <su-list-sort v-slot="scope" :options="options3" :data="data">
                <template>
                    <div :class="[scope.row.content=='内容1'?'filter':'']">{{scope.row.content}}</div>
                </template>
            </su-list-sort>
        </div>
    </div>
</template>

<script>
    export default {
        components:{seListSort},
        data() {
            return {
                data: [
                    {
                        "id": "12987122", "name": "王小虎1", "content": "内容1"
                    },
                    {
                        "id": "12987123", "name": "王小虎2", "content": "内容2"
                    },
                    {
                        "id": "12987124", "name": "王小虎3", "content": "内容3"
                    },
                    {
                        "id": "12987125", "name": "王小虎4", "content": "内容4"
                    },
                    {
                        "id": "12987126", "name": "王小虎5", "content": "内容5"
                    }
                ],
                options1: {
                    group: {name: 'list', pull: true, put: false},   // 多个排序组进行拖拽时可配置。 pull:是否允许拖出当前组 put:是否允许拖入当前组。
                    sort:false,          // 是否运行组内排序，默认为true，当有多个排序组时，设为false，多个组之间可拖拽，组内不能拖拽
                    animation: 1000,   // 调换移动动画执行时间，单位:ms
                },
                options2: {
                    group: {name: 'list', pull: 'clone', put: true}, // pull:是否允许拖出当前组,参数值可选：true/false/array/clone,设为clone时，复制当前组数据而不是从当前组移除
                    sort:true,          // 是否运行组内排序，默认为true，当有多个排序组时，设为false，多个组之间可拖拽，组内不能拖拽
                    animation: 1000,   // 调换移动动画执行时间，单位:ms
                },
                options3: {
                    group: {name: 'list', pull: false, put: true}, // put:是否允许拖入当前组,参数值可选：true/false/array
                    animation: 500,   // 调换移动动画执行时间，单位:ms
                    filter: ".filter"  // 可设置不允许拖动的元素的class类名
                }
            }
        }
    }
</script>
```
:::


### 函数调用
拖拽数据时可触发的一些回调

:::demo 

```html

<template>
    <div>{{data}}
        <su-list-sort v-slot="scope" :data="data" @onChoose="onChoose" @onStart="onStart" @onChange="onChange" @onSort="onSort">
            <template>
                {{scope.row.name}}
            </template>
        </su-list-sort>
    </div>
</template>

<script>
    export default {
        components:{seListSort},
        data() {
            return {
                data: [
                    {
                        "id": "12987122", "name": "王小虎1"
                    },
                    {
                        "id": "12987123", "name": "王小虎2"
                    },
                    {
                        "id": "12987124", "name": "王小虎3"
                    },
                    {
                        "id": "12987125", "name": "王小虎4"
                    },
                    {
                        "id": "12987126", "name": "王小虎5"
                    }
                ]
            }
        },
        methods: {
            // 点击要拖拽的对象后会回调该事件
            onChoose(e) {
                let index = e.oldIndex + 1;
                this.$message('你选中了第'+ index + '个元素');
            },
            // onStart 开始拖动的事件,执行的顺序在onChoose选中顺序之后。
            onStart(e) {
                let index = e.oldIndex + 1;
                this.$message('开始拖拽第'+ index + '个元素')
            },
            // 拖拽中的元素位置发生变化时会触发的事件
            onChange(e) {
                let index = e.newIndex + 1, name = e.item.innerText;
                this.$message(name + '移动到第'+ index + '个');
                console.log(this.data);
            },
            // 拖拽位置发生改变后会触发的事件
            onSort(e) {
                let index = e.newIndex + 1, name = e.item.innerText;
                this.$message(name + '更新至第'+ index + '个')
            }
        }
    }
</script>
```
:::




### Attributes

| 参数      | 说明          | 类型      | 可选值                           | 默认值  |
|---------- |-------------- |---------- |--------------------------------  |-------- |
| data | 拖拽列表数据源 | array | — | — |
| options | 拖拽列表配置项 | object | — | — |

### Events
| 事件名称 | 说明 | 回调参数 |
|---------- |-------- |---------- |
| onChoose | 选中元素的回调函数 | — |
| onUnchoose | 取消选中元素的回调函数 | — |
| onStart | 拖拽开始的回调函数 | — |
| onEnd | 拖拽结束后的回调函数 | — |
| onAdd | 多组列表拖拽新增元素时的回调函数 | — |
| onUpdate | 拖拽元素更改变化时的回调函数 | — |
| onSort | 拖拽位置改变后的回调函数 | — |
| onRemove | 移除拖拽元素的回调函数 | — |
| onFilter | 阅读器加载完毕后的回调函数 | — |
| onMove | 拖拽中的回调函数 | — |
| onClone | 复制拖拽元素时的回调函数 | — |
| onChange | 拖拽元素位置发生变化时的回调函数 | — |