Javascript 如何使用React/Meteor添加可排序、拖放列表？

我想添加拖放功能，对使用React构建的列表进行排序，并将排序所做的更改保存在Meteor应用程序中的mongodb中

我看过几个库（React-Dnd和Sortable-hoc），但我无法跳过这些示例

我的收藏：

recipes

，键：

stepByStep

是一个对象数组。每个对象都有一个

步骤说明

（这是一个字符串）

容器：

StepEditor

订阅

recipes

，并按照stepByStep数组中对象的顺序呈现步骤列表。 我想要实现的是拖放任何步骤，并按照数据库中的顺序保留更改。可能是以非常方便用户的方式

容器如下所示：

class StepsEditor extends Component {

    // Renders the list
    renderRecipeSteps( ) {

    return this.props.recipe.stepByStep.map(( step, index ) => {
        return (
            <div key={index}>
                <div>
                    <h4>{index + 1}</h4>
                </div>
                <div>
                    <textarea defaultValue={step.stepDescription}
                              onChange={( event ) => {
                   Meteor.call( 'recipeStep.update', this.props.recipe, index,                      event.target.value );
                    }}/>
                </div>
            </div>
        );
    });

   }


    render( ) {
      return (
            <div>
                {this.renderRecipeSteps( )}
            </div>
           );
    }

}



// Create container, subscribe to `recipes`
export default createContainer( ( props ) => {
   Meteor.subscribe( 'recipes' );

   const { recipeId } = props.params;

   return ({recipe: Recipes.findOne( recipeId )});
}, StepEditor );

类StepsEditor扩展组件{
//呈现列表
renderRecipeSteps（）{
返回此.props.recipe.stepByStep.map（（步骤，索引）=>{
返回(
{index+1}
{
Meteor.call（'recipeStep.update'，this.props.recipe，index，event.target.value）；
}}/>
);
});
}
渲染（）{
返回(
{this.renderRecipeSteps（）}
);
}
}
//创建容器，订阅“配方”`
导出默认createContainer（（道具）=>{
Meteor.订阅（‘食谱’）；
const{recipeId}=props.params；
返回（{recipe:Recipes.findOne（recipeId）}）；
}，步骤编辑器）；