Question

的例子

我想知道这是否可以扩展用于在两个或更多列表之间进行排序。我设法用TypeScript做这个代码，但是当在两个列表之间移动元素时状态变得不同步。

     class TaskItem {
        public id: number;
        public title: string;
        public position: number;
        public MomentNowToEnd: string;
        public roles: string;
        public User: string;
        public IsCritical: boolean;
        public hidden: boolean;
    }

    export class TasksShelf extends React.Component {
        public props: { Tasks: Array<TaskItem>, name: string, color: string };
        public state: { Tasks: Array<TaskItem> };



        sortedItems() {

            var items = _.sortBy(this.state.Tasks, 'position');

            return items.map((item: TaskItem) => {
                var classna = item.hidden ? 'sortdisabled ' : '';
                return <li className={classna + "mdl-list__item mdl-list__item--two-line task-item  pointer"} key={guid() } data-id={item.id}>
                    <div className="mdl-list__item-check-action"></div>
                    <div className=" mdl-list__item-primary-content task-list__item__title-wrapper pointer">
                        <span>{item.title}</span>
                        <span className="mdl-list__item-sub-title mdl-list__item-taskinfo">
                            <span className={item.IsCritical ? 'mdl-color-text--red' : ''}>
                                {item.hidden ? null : <MaterialIcon className= { "material-icons--inline" } IconName= {"&#xE425;" } />}
                                <span>{item.MomentNowToEnd }</span>
                                </span>
                                <span className=" mdl-list__item-task-roles">
                                {item.roles}
                                    </span>
                            </span>
                        </div>
                    <div className="mdl-list__item-taskinfo mdl-list__item-task-assignees">
                        </div>
                    </li>
            });
        }
        render() {
            return (<div className="TaskShelf mdl-card mdl-shadow--2dp"style={{
                width: "350px",
                float: "left",
                height: "800px",
                margin: "2px",
                minHeight: "50px",
            }}>
                    <div className="TaskShelfheader mdl-card__title mdl-card--border">
                    <div className="mdl-card__title-text">{this.props.name}</div>
                        </div>
                <div style={{ backgroundColor: this.props.color, height: '1px' }}>
                    </div>
                    <div className="task-list-wrapper">
                        <ul className="mdl-list task-list tasksSortable" id={ this.guiid}>

                        {this.sortedItems() }
                            </ul>
                        </div>
                </div>);
        }

        componentDidMount() { 
            if (this.state.Tasks.length > 0) {
                var self = this;
                $("#" + this.guiid).sortable({
                    connectWith: 'ul',
                    items: 'li:not(.sortdisabled)',
                    update: self.handleSortableUpdate,
                    change: function (event, ui) {
                        ui.placeholder.css({ visibility: 'visible', border: '1px solid black' });
                    }
                }); 
            }
        }

        private handleSortableUpdate = () => {

            var self = this;

            var newItems: Array<TaskItem> = _.clone(self.state.Tasks, true);

            var ids = $("#" + this.guiid).sortable('toArray', { attribute: 'data-id' });


            console.log(ids);

        }

    }


render() {
            //console.log("render");
            return (<div className="task-view">
               <button className="mdl-button mdl-js-button mdl-button--raised" onClick={this.AddShelf}>
                   Add New Status
                   </button>
                <div   id="taskBoradView">
                {this.state.Tasks.length > 0 ? <TasksShelf Tasks= { this.state.Tasks} name={"To Do"} color="red" /> : null}
                {this.state.Tasks.length > 0 ? <TasksShelf Tasks= { this.state.Tasks} name={"Done"}  color="black"/> : null}
                {this.state.Shelves}
                    </div>
                </div>);
        }

此代码我创建了TasksShelf作为列表，然后使用它创建不同的列表并在它们之间进行排序

Answer 1

可以使用组件代替jquery端口，如：

https://github.com/JakeSidSmith/react-reorder

与jquery排序反应

1 个答案: