You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I am using dragula container inside child component, but the drop event not occurs. I have tried every possible way but the drop event not occurs. I want to reorder my list on drag and drop.
This is my code.
import React, { Fragment } from 'react';
import { Tabs, Tab, Card } from 'react-bootstrap';
import Dragula from 'react-dragula';
import { AppCard } from '../../../../../Components/AppCard'
class App extends React.Component {
drake = null;
dragullaContainers = [];
componentDidMount() {
this.drake = Dragula(this.dragullaContainers, {
isContainer: function (el) {
if (el.id === 'social-container') {
return true;
}
return false;
},
moves: function (el, source, handle, sibling) {
if (handle.id === "socialSortBtn") {
return true;
}
return false;
},
accepts: function (el, target, source, sibling) {
return true; // elements can be dropped in any of the `containers` by default
},
});
this.drake.on('drop', (el, target) => {
// this event not occurs
console.log('drop', el, target)
});
this.drake.on('drag', (el, source) => {
console.log('drag', el)
})
}
// main function
render() {
const { data } = this.props;
const dragulaDecoratorRef = (componentBackingInstance) => {
if (componentBackingInstance) {
this.dragullaContainers.push(componentBackingInstance)
}
};
return (
<Fragment>
{data ?
<Tabs variant="pills" className="btn-group border rounded" defaultActiveKey="content" id="tools-header">
<Tab eventKey="content" title="Content" tabClassName="btn shadow-none">
<AppCard>
<Card.Body>
<div>
<ul id='social-container' ref={dragulaDecoratorRef}>
{data.active_social_icons && data.active_social_icons.length > 0 && data.active_social_icons.map((activeIcon, index) => (
<li key={index} data-index={index} className="d-flex mb-30">
<div className="">
<div className="mr-2">
<button data-toggle="tooltip" title="Drag to reorder" className="btn btn-primary btn-sm btn-icon" id="dragBtn"><span id="socialSortBtn" className="material-icons m-0">drag_indicator</span>
</button>
</div>
<div className="d-flex mb-30">List item</div>
</div>
</li>
))}
</ul>
</div>
</Card.Body>
</AppCard>
</Tab>
<Tab eventKey="style" title="Style">
tab2 content
</Tab>
</Tabs>
:
null
}
</Fragment>
)
}
}
export default App;
Please suggest why drop event is not occuring? I want to update list item position via drag and drop.
The text was updated successfully, but these errors were encountered:
I am using dragula container inside child component, but the drop event not occurs. I have tried every possible way but the drop event not occurs. I want to reorder my list on drag and drop.
This is my code.
Please suggest why drop event is not occuring? I want to update list item position via drag and drop.
The text was updated successfully, but these errors were encountered: