title: Drag and Drop for Semantic-UI-React component with Packery (masonary) layout
body: <p>I am working on a card-based UI with brick layout. I am using semantic-ui-react for the card components and react-packery-component for the masonary layout.</p>
  
  <p>My react component is this.</p>
  
  <pre><code>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 (
              &lt;Grid.Column&gt;
                &lt;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}
              /&gt;
            &lt;/Grid.Column&gt;
  
          );
      });
      return (
        &lt;Packery
          elementType={'div'} options={packeryOptions} className = 'packery'&gt;
            {Data}
          &lt;/Packery&gt;
      );
    }
  }
  DisplayHomePageCard .propTypes = {
     display: React.PropTypes.func
   };
  module.exports = DisplayHomePageCard;
  </code></pre>
  
  <p>As explained in <a href="https://github.com/eiriklv/react-packery-component" rel="nofollow noreferrer">https://github.com/eiriklv/react-packery-component</a>, I'm getting the masonary layout as expected, similar to <a href="http://www.hearsay.me/" rel="nofollow noreferrer">http://www.hearsay.me/</a>. </p>
  
  <p>I now want to implement drag-and-drop of my cards, somrthing functionally similiar to <a href="http://packery.metafizzy.co/draggable.html#jquery-ui-draggable" rel="nofollow noreferrer">http://packery.metafizzy.co/draggable.html#jquery-ui-draggable</a></p>
  
  <p>I need advice on how to achieve this. Can it be done via React only (without JQuery)? If I need to use JQuery, how should I do it?</p>