open-index/open-npm huggingface dataset:
npm package: @mas.io/adc-movable-items
Description: ```bash tnpm i @alipay/adc-movable-items -S ``` ## 组件介绍
Author: mhb01019024
Latest version: 1.0.0

## 安装

```bash
tnpm i @alipay/adc-movable-items -S
```
## 组件介绍

可拖动排序列表，支持一键置顶操作

## API
| 参数 | 描述 | 类型 | 必填 | 默认值 |
| :-: | :-: | :-: | :-: | :-: |
| title | 顶部文案 | `string` | 否 | 长按拖动排序 |
| btnDesc | 操作按钮文案 | `string` | 否 | 确认 |
| showBtn | 是否展示操作按钮 | `boolean` | 否 | true |
| items | 列表数据 | [Item](#item)[] | 否 | [] |
| onSubmit | 提交 | `function()` | 否 |  |
| onChange | 排序变更时回调 | `function()` | 否 |  |

## Item
| 参数 | 描述 | 类型 | 必填 | 默认值 |
| :-: | :-: | :-: | :-: | :-: |
| key | key | `string` | 否 |  |
| value | 值 | `string` | 否 |  |
| label | 文案 | `string` | 否 |  |

## 代码演示

```html
<!-- index.axml -->
<view class="container">
  <movable-items items="{{items}}" onChange="handleChange" onSubmit="handleSubmit" />
</view>
```
```json
// index.json
{
  "usingComponents": {
    "movable-items": "@alipay/adc-movable-items/es/movable-items/index"
  }
}

```
```js
// index.js
interface IData {
  items?: Items[];
}
interface Items {
  key: string;
  label: string;
}

Page({
  data: {
    items: []
  },
  onLoad () {
    /** 创建测试数据 */
    const items = [];
    for (let i = 0; i < 15; i++) {
      const ob = {
        key: i,
        label: `可拖拽列表${i}`
      };
      items.push(ob);
    }
    this.setData({
      items
    });
  },
  handleSubmit (items: Items[]) {
    // 确认
    console.log('handleSubmit::', items);
  },
  handleChange (items: Items[]) {
    // 列表排序改变
    console.log('handleChange::', items);
  }
});
```
```css
/* index.acss */
.page {
  background-color: #fff;
}

.container {
  height: 100vh;
}
```