使用Packery(Masonary)布局拖放语义-UI反应组件

Question

我正在使用带有砖布局的基于卡的UI。我正在为梅森纳利布局的卡组件和反应包装组件使用语义-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/reaeact-packery-component中所述，我正在按预期获得梅森里布局，类似于http://www.hearsay.me/。

我现在想实现我的卡的拖放，与http://packery.metafizzy.co/draggable.html#jquery-ui-draggable

我需要有关如何实现这一目标的建议。可以通过反应（无jQuery）完成吗？如果我需要使用jQuery，该怎么做？

Answer 1

您可以通过相对简单地使用react-dnd库来实现它。