Drag & Drop für Semantic-UI-React Komponente mit Packery (masony) Layout

Question

Ich arbeite an einer kartenbasierten UI mit Brick Layout. Ich verwende semantic-ui-react für die Kartenkomponenten und react-packery-Komponente für das masonary Layout.

Meine Reaktionskomponente ist dies.

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; 

Wie in https://github.com/eiriklv/react-packery-component, erhalte ich das masonary Layout wie erwartet, ähnlich wie http://www.hearsay.me/.

Ich möchte jetzt per Drag-and-Drop meiner Karten implementieren, Somrthing funktionell ähnlich zu http://packery.metafizzy.co/draggable.html#jquery-ui-draggable

Ich brauche Ratschläge, wie dies zu erreichen. Kann es nur über React erfolgen (ohne JQuery)? Wenn ich JQuery verwenden muss, wie soll ich das machen?

Answer 1

Sie können es implementieren über nur relativ einfach reaktiv mit react-dnd Bibliothek.