# SortList 可拖拽排序列表

# 使用指南

实现对组件元素的拖拽排序。

# 代码演示

查看代码
<template>
  <div class="list">
    <p>单元行拖拽</p>
    <h3-sort-list :list="items">
      <h3-sort-item
        v-for="(item, index) in items"
        :key="index"
        :order="index"
        header=".h3think-cell__icon"
        @click="handleCellClick(item)"
      >
        <h3-cell :title="`单元行${item} 操作`" value="详细信息" icon="IconScanStroke" />
      </h3-sort-item>
    </h3-sort-list>

    <p>宫格拖拽</p>

    <h3-sort-list :list="items2" :columnNum="3" @onOrderChange="onOrderChange">
      <h3-grid>
        <h3-sort-item
          v-for="(item, index) in items2"
          :key="index"
          :order="index"
          :style="{width: 'calc(100% / 3)'}"
          @click="handleGridClick(item)"
        >
          <h3-grid-item :title="`宫格${item}`" subInfo="辅助文字" style="width: 100%">
            <template #icon>
              <h3-image
                :width="44"
                :height="44"
                :radius="8"
                :src="avatar"
                style="pointer-events: none"
              />
            </template>
          </h3-grid-item>
        </h3-sort-item>
      </h3-grid>
    </h3-sort-list>
  </div>
</template>

<script>
import H3SortList from '@/components/h3-sort-list';
import H3Cell from '@/components/h3-cell';
import H3Grid from '@/components/h3-grid';
import H3Image from '@/components/h3-image';
export default {
  components: {
    H3SortList,
    H3SortItem: H3SortList.Item,
    H3Cell,
    H3Grid,
    H3GridItem: H3Grid.Item,
    H3Image,
  },
  data () {
    return {
      selectItem: 'radioItem1',
      enabled: true,
      eventArgs: {
        msg: 'Hello',
      },
      items: ['aaa', 'bbb', 'ccc', 'ddd'],
      items2: ['aaa', 'bbb', 'ccc', 'ddd', 'eee', 'fff', 'ggg', 'hhh', 'iii'],
      avatar:
        'http://5b0988e595225.cdn.sohucs.com/q_70,c_zoom,w_640/images/20191031/0884b1f480ee47058c82c2a3cf6f84f6.jpeg',
    };
  },
  computed: {
    // itemComponent () {
    //   return this.enabled ? H3SortItem : H3Radio;
    // },
  },
  methods: {
    onOrderChange (list) {
      console.log(list);
    },
    radioChange (val) {
      this.selectItem = val;
      console.log(val);
    },
    onItemClick (args) {
      console.log(args);
    },
    handleCellClick (item) {
      console.log(`cell: ${item}`);
    },
    handleGridClick (item) {
      console.log(`grid: ${item}`);
    },
  },
};
</script>

<style lang="less" scoped>
.list {
  p {
    font-weight: 600;
    font-size: 16px;
    padding: 15px;
  }
  .drag-wrap {
    width: 200px;
    height: 300px;
    background-color: white;
  }
}
</style>

# 与thinking-ui 2.0版组件的区别以及迁移

新增组件

# API - H3SortList

# Props - H3SortList

属性	说明	类型	默认值
list	要排序的列表	array	-
columnNum	列数	number	1
pressTime	长按触发拖拽动作时长，单位为`ms`	number	250

# Events - H3SortList

事件名	说明	参数
onOrderChange	监听列表顺序改变	list: array
click	列表选项点击事件，列表选项长按拖拽时不执行click事件	-

# API - H3SortItem

# Props - H3SortItem

属性	说明	类型	默认值
order	选项顺序	number	0
disabled	是否可以拖拽	boolean	false
header	拖拽头元素, 值如 '.draggable' 或 '#draggable' 等，不提供该值则默认sortItem 为拖拽元素	string	-

# Slots - H3SortItem

插槽名	说明	SlotProps
default	默认插槽，可拖拽的选项	-

← Draggable 拖拽