1

我正在开发 react js 应用程序并使用react-dragula包进行拖放。我在子组件内使用dragula 容器，但没有发生放置事件。我已经尝试了所有可能的方法，但没有发生 drop 事件。我想通过拖放重新排序我的列表。

这是我的代码。

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;

请建议为什么没有发生 drop 事件？我想通过拖放更新列表项位置。

4

0 回答 0