Semantic-UI-Reactコンポーネントのドラッグアンドドロップ（パッカー（masonary）レイアウト）

Question

私はレンガレイアウトのカードベースのUIで作業しています。私は、カード構成要素のためにsemantic-ui-reactを使用し、masonaryレイアウトのために反応パッケージ構成要素を使用しています。

私の反応成分はこれです。

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; 

としては、予想通り、私はhttp://www.hearsay.me/に似て、masonaryレイアウトを取得しています、https://github.com/eiriklv/react-packery-componentで説明しました。

私は今、私はこれを達成する方法についてのアドバイスが必要http://packery.metafizzy.co/draggable.html#jquery-ui-draggable

と機能的に似somrthing、私のカードのドラッグ＆ドロップを実装したいです。それはReact only（JQueryなし）経由で行うことができますか？ JQueryを使用する必要がある場合、どうすればよいですか？

Answer 1

react-dndライブラリを使用して比較的簡単に反応させるだけで実装できます。