使用Packery（masonary）佈局拖放Semantic-UI-React組件

我正在使用磚佈局的基於卡的UI。我正在使用針對卡片組件的semantic-ui-react和用於masonary佈局的react-packery-component。使用Packery（masonary）佈局拖放Semantic-UI-React組件

我的反應組件是這樣的。

import React from 'react'; 
import DisplayHomePageCardStructure from 
'./DisplayHomePageCardStructure.jsx'; 
import {Grid} from 'semantic-ui-react'; 
const Packery = require('react-packery-component')(React); 

let packeryOptions = { 
// transitionDuration: 0, 
    gutter: 20 
}; 

class DisplayHomePageCard extends React.Component { 
constructor() { 
    super(); 
} 

render() { 
    /* Getting the values from Mongo db*/ 
    let Data = this.props.display.map(function(item) { 
     return (
      <Grid.Column> 
       <DisplayHomePageCardStructure id={item.id} displayImage= 
       {item.displayImage} 
       heading={item.heading} question={item.question} postedBy= 
       {item.postedBy} 
       addedOn={item.addedOn} category={item.category} upVotes= 
       {item.upVotes} 
       downVotes={item.downVotes} answerCounts={item.answerCounts} '    
        views={item.views} 
       profileImage={item.profileImage} 
      /> 
      </Grid.Column> 

     ); 
    }); 
    return (
     <Packery 
     elementType={'div'} options={packeryOptions} className = 'packery'> 
      {Data} 
     </Packery> 
    ); 
    } 
} 
DisplayHomePageCard .propTypes = { 
    display: React.PropTypes.func 
}; 
module.exports = DisplayHomePageCard;

如https://github.com/eiriklv/react-packery-component解釋，我發現了磚石佈局如預期，類似http://www.hearsay.me/。

我現在想實現我的卡拖和下降，somrthing功能類同http://packery.metafizzy.co/draggable.html#jquery-ui-draggable

我需要就如何實現這一目標的建議。只能通過React完成（沒有JQuery）嗎？如果我需要使用JQuery，我該怎麼做？

來源

2017-03-12 user2693135