Styjun

I am using the react library dazzle https://github.com/Raathigesh/dazzle and the default add method allows it such that when one widget is dragged and dropped to another container the container expands to hold both widgets. Would it be possible to have it such that the widgets swap. ex. drag A to container B, widget B now moves to container A and widget A is now in container b. Any help would be great:

import React, Component from 'react';
import Dashboard, addWidget from 'react-dazzle';


import Header from './Header';
import EditBar from './EditBar';
import Container from './Container';
import AddWidgetDialog from './AddWidgetDialog';
import CustomFrame from './CustomFrame';


import BarChart from './widgets/BarChart';
import LineChart from './widgets/LineChart';
//import ApprovalList from './ApprovalList';
import DataTable from './tableWidget';

import 'bootstrap/dist/css/bootstrap.css';


import 'react-dazzle/lib/style/style.css';


import '../styles/custom.css';

class App extends Component 
 constructor(props) 
 super(props);
 this.state = 

 widgets: 
 BarWidget: 
 type: BarChart,
 title: 'Bar Graph Widget',
 ,
 ApprovalWidget: 
 type: DataTable,
 title: 'Order Approval',
 ,
 LineWidget: 
 type: LineChart,
 title: 'Trend Graph Widget',
 ,


 ,

 layout: 
 rows: [
 columns: [
 className: 'col-md-12 col-sm-12 col-xs-12',
 widgets: [key: 'LineWidget'],
 ],
 , 
 columns: [
 className: 'col-md-8 col-sm-8 col-xs-8',
 widgets: [key: 'BarWidget'],
 , 
 className: 'col-md-4 col-sm-4 col-xs-4',
 widgets: [key: 'ApprovalWidget'],
 ],
 ],
 ,
 editMode: false,
 isModalOpen: false,
 addWidgetOptions: null,
 ;
 


 onRemove = (layout) => 
 this.setState(
 layout: layout,
 );
 


 onAdd = (layout, rowIndex, columnIndex) => 

 this.setState(
 isModalOpen: true,
 addWidgetOptions: 
 layout,
 rowIndex,
 columnIndex,
 ,
 );
 

 onMove = (layout) => 
 this.setState(
 layout: layout,
 );
 


 onRequestClose = () => 
 this.setState(
 isModalOpen: false,
 );
 

 render() 
 return (
 <Container>
 <AddWidgetDialog widgets=this.state.widgets isModalOpen=this.state.isModalOpen onRequestClose=this.onRequestClose onWidgetSelect=this.handleWidgetSelection/>
 <Header />
 <EditBar onEdit=this.toggleEdit />
 <Dashboard
 frameComponent=CustomFrame
 onRemove=this.onRemove
 layout=this.state.layout
 widgets=this.state.widgets
 editable=this.state.editMode
 onAdd=this.onAdd
 onMove=this.onMove
 addWidgetComponentText="Add New Widget"
 />

 </Container>
 );
 

 toggleEdit = () => 
 this.setState(
 editMode: !this.state.editMode,
 );
 ;

 handleWidgetSelection = (widgetName) => 
 const layout, rowIndex, columnIndex = this.state.addWidgetOptions;


 this.setState(
 layout: addWidget(layout, rowIndex, columnIndex, widgetName),
 );

 this.onRequestClose();
 


export default App;