react-grid-layout 移动后排序新数组

import GridLayout from 'react-grid-layout';

import React from 'react';

import './index.css';

function compare(property){

  return function(a,b){

      var value1 = a[property];

      var value2 = b[property];

      return value1 - value2;

  }

}

const stop = ( layout, oldItem, newItem, placeholder, e, element )=>{

  // console.log(l)

  // console.log(l.sort(compare('y')))

// 根据对象中的某个值进行排序

  layout.sort(compare('y'))

  console.log( layout )

// 提取对象数组中的某个值 重新组成新的数组

  var a = Array.from(layout,({i})=>JSON.parse(i));

  console.log( a )

}

const mixedList = [

  {

    name: 1,

    age: 1

  },

  {

    name: 2,

    age: 2

  },

  {

    name: 3,

    age: 3

  }

]

class MyFirstGrid extends React.Component {

  randerContent(item, index){

    return(

      <div key={JSON.stringify(item)}>

        <div className="aaaaa"  data-grid={{x: 0, y: 1*index, w: 2, h: 2}}>{JSON.stringify(item)}</div>

      </div>

    )

  }

  render() {

    return (

      <GridLayout onDragStop={( layout, oldItem, newItem, placeholder, e, element )=>stop( layout, oldItem, newItem, placeholder, e, element )} className="layout" cols={12} rowHeight={30} width={1200}>

        {mixedList.map((item, index)=>{

          return this.randerContent(item, index)

        })}

      </GridLayout>

    )

  }

}

export default MyFirstGrid