About DragList

[Mical]

我想在我的项目中实现一个可拖拽排序的列表，然后在物料市场发现了DragList。
直接按照组件下的说明，安装，拷贝样例到工程中：
有两个语法提示报错，另外运行起来也看不到内容，谁能给一个靠谱点的示例，谢谢！
语法提示报错是说View下没有slot这个属性。

[muhai]

安装这个版本试试

yarn add --registry=https://registry.npmjs.org/ @ray-js/drag-list@2.0.0-beta-3

[Mical]

，，，还没到这一步，我是参照文档的举例，在我的项目中使用，但是列表没有显示出来。我找不到有关这个组件的完整的使用示例。

安装这个版本试试

yarn add --registry=https://registry.npmjs.org/ @ray-js/drag-list@2.0.0-beta-3

[mingshang]

这个组件的正式版目前存在一些问题，beta 版正在开发中，过两天会提供一个完整示例给到你。

[mingshang]

，，，还没到这一步，我是参照文档的举例，在我的项目中使用，但是列表没有显示出来。我找不到有关这个组件的完整的使用示例。

安装这个版本试试

yarn add --registry=https://registry.npmjs.org/ @ray-js/drag-list@2.0.0-beta-3

Code: Select all

import React, { useState } from 'react';
import Drag from '@ray-js/drag-list';
import { ScrollView, Text, View } from '@ray-js/ray';

const data = [
  { name: 'item1', key: 'key1' },
  { name: 'item2', key: 'key2' },
  { name: 'item3', key: 'key3' },
  { name: 'item4', key: 'key4' },
  { name: 'item5', key: 'key5' },
  { name: 'item6', key: 'key6' },
];

const DragList = () => {
  const [list, setList] = useState(data);
  const [scrollEnabled, setScrollEnabled] = useState(true);
  const [dragAreaKey, setDragAreaKey] = useState('dragAreaKey');

  return (
    <ScrollView
      scrollY={scrollEnabled}
      style={{
        display: 'flex',
        width: '100%',
        height: '100%',
        flexDirection: 'column',
      }}
    >
      <View id="dragArea" style={{ height: `${list.length * 66}px` }}>
        <Drag
          key={dragAreaKey}
          topBarHeight={0}
          space={0}
          list={data}
          touchStart={() => {
            setScrollEnabled(false);
          }}
          handleSortEnd={data => {
            console.log(data);
            // 排序取消
            if (!data?.detail) {
              setScrollEnabled(true);
              return;
            }
            const nextList = data?.detail.reduce((acc: [], cur) => {
              const item = list.find(a => a.key === cur.key);
              return [...acc, item];
            }, []);

        console.log(nextList);

        setList(nextList);
        setDragAreaKey(`dragAreaKey${new Date().getTime()}`);
        setScrollEnabled(true);
      }}
      height={66}
      keyId="key"
    >
      {list.map((item, index) => (
        <React.Fragment key={item.key}>
          {/* 拖拽项 */}
          <View
            slot={`dataItem${index}`}
            style={{ border: '1px solid #000', height: '56px', width: '100%' }}
          >
            <Text>{item.name}</Text>
          </View>

          {/* 拖拽图标 */}
          <View
            style={{
              backgroundColor: 'red',
              width: '20px',
              height: '20px',
            }}
            slot={`drag${index}`}
          />
        </React.Fragment>
      ))}
    </Drag>
  </View>
</ScrollView>
  );
};

export default DragList;