react-beautiful-dnd拖拽插件指定拖拽元素

import React, { useMemo } from 'react';

import { List, Avatar } from 'antd';

import classNames from 'classnames';

import { TransferSortProps, TransferItem } from './types';

import { MenuOutlined } from '@ant-design/icons';

import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';

const SortTableItem = (props: TransferSortProps) => {

    const { target, direction, sort, sourceActive, targetActive, item = {}, rowKey, onActive, onItemDoubleClick, view, getTitle, prefixCls, icon } = props

    const className = useMemo(() => {

        return direction === 'left'

            ? sourceActive.includes(item[rowKey])

            : targetActive.includes(item[rowKey])

    }, [direction, sourceActive, targetActive, item])

    const isChecked = target && target.filter(it => it[rowKey] === item[rowKey]).length > 0;

    const isDisabled = direction === 'left' ? isChecked : false;

    const getAvatar = (item: TransferItem) => {

        const { avatar } = view || {};

        if (!avatar) return null;

        if (typeof avatar === 'function') {

            const avatarProps = avatar(item);

            return avatarProps ? : null;

        } else {

            return item[avatar] ? : null;

        }

    };

    const avatarRender = () => {

        if (sort && direction === 'right') {

            return

        }

        return getAvatar(item)

    }

    const getDescription = (item: TransferItem) => {

        const { fieldDesc } = view || {};

        if (fieldDesc) {

            return fieldDesc.split(',').map((name, index) =>

                item[name] && ({item[name]}));

        } else {

            return null;

        }

    };

    const handleClick = (isDisabled: boolean, fn: Function) => {

        return !isDisabled && fn(direction, item)

    }

    return (

       

            className={classNames({

                [`${prefixCls}-item-active`]: className, [`${prefixCls}-item-disabled`]: isDisabled

            })}

            key={`${item.id}`}

            onClick={() => handleClick(isDisabled, onActive)}

            onDoubleClick={() => handleClick(isDisabled, onItemDoubleClick)}

        >

           

                avatar={avatarRender()}

                title={getTitle(item)}

                description={getDescription(item)}

            />

       

    )

}

const SortTable = (props: TransferSortProps) => {

    const { direction, unTarget, target, loading = false, sort, onSortEnd } = props;

    const isLeft = direction === 'left';

    const data = useMemo(() => {

        return isLeft ? unTarget : target

    }, [direction, unTarget, target])

    const listProps = (isLeft && loading) ? { locale: { emptyText: <> } } : {};

    const showLoading = isLeft ? { spinning: loading, tip: '加载中···', wrapperClassName: 'ant-list' } : false;

    return (

       

            {...listProps}

            size="small"

            itemLayout="horizontal"

            loading={showLoading}

            style={{ overflowY: 'auto' }}

        >

           

               

                    {(droppableProvided: any) => (

                       

                                        )}

                                   

                                )

                            })}

                            {droppableProvided.placeholder}