Drag 拖拽排序，通过拖动列表元素以此来达到对数据的重新排列。

支持平台

App（vue）	App（nvue）	H5	小程序
✓	✓	✓	✓

图片元素

通过 width 属性设置总宽度，itemList 属性设置拖拽数据， columns 属性设置每行显示列数，square 属性设置item项是否显示为正方形，即高度与宽度相等，styles 属性设置内容样式 。

<view class="wui-page__bd rounded-20rpx overflow-hidden">
    <!-- #ifndef MP-TOUTIAO -->
    <wui-drag
            :width="680"
            custom
            :itemList="itemList"
            :columns="3"
            :itemHeight="200"
            @end="end"
    >
        <template v-slot="{ model, width, height }">
            <view
                    class="wui-item"
                    :style="{ width: width + 'px', height: height + 'px' }"
            >
                <text class="wui-text">{{ model.text }}</text>
            </view>
        </template>
    </wui-drag>
    <!-- #endif -->
</view>

  const itemList = ref<any>([
    {
      id: 1,
      text: '1',
    },
    {
      id: 2,
      text: '2',
    },
    {
      id: 3,
      text: '3',
    },
    {
      id: 4,
      text: '4',
    },
    {
      id: 5,
      text: '5',
    },
    {
      id: 6,
      text: '6',
    },
    {
      id: 7,
      text: '7',
    },
    {
      id: 8,
      text: '8',
    },
    {
      id: 9,
      text: '9',
    },
  ]);

  const end = e => {
    //排序后列表
    console.log(e.itemList);
  };

Slots

插槽名称	说明
default	自定义item项内容，需要将custom属性设为true，字节小程序不支持

Props

属性名	类型	说明	默认值	平台差异说明
itemList	Array	拖拽列表数据	[ ]	-
width	Number, String	拖拽列表宽度，为0时使用屏幕宽度，单位rpx	0	-
columns	Number, String	每行显示个数（列数）	1	-
itemHeight	Number, String	item项高度，square为false时必传（square为true时失效），单位rpx	0	-
square	Boolean	item项是否以正方形显示，为true时itemHeight失效	false	-
styles	Object	item项内容样式，custom为false时有效，具体属性内容见下方说明	{ }	-
scrollTop	Number	初始化时，页面滚动高度，单位px	0	-
isDrag	Boolean	是否可拖拽	true	-
custom	Boolean	是否自定义item项内容	false	-

Events

事件名	说明	回调参数
@change	拖动变化时触发	{ itemList:改变后的list列表 }
@end	拖动结束时触发	{ itemList:改变后的list列表 }
@click	item项点击时触发	{ index：点击项索引值， item：索引对应item项数据 }
@delete	点击item项删除图标时触发	{ index：点击项索引值 }