React TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery___default(...)(...).draggable 不是函数

Posted 2023-05-08

【中文标题】React TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery___default(...)(...).draggable 不是函数

【英文标题】：React TypeError: __WEBPACK_IMPORTED_MODULE_1_jquery___default(...)(...).draggable is not a function

【发布时间】：2018-05-01 00:26:13

【问题描述】：

我在我的项目中使用 React-Redux。当我想使用 draggable 时，我在浏览器上遇到了这个错误。我添加了 Jquery 和 Jquery-ui。但我仍然得到这个错误。我搜索了这个主题，但他们没有使用反应。我尝试了很多东西，最后我解决了这个问题。也许你也需要它，所以我想分享它。

首先你应该像这样添加这个模块：

import $ from 'jquery';
import  draggable from '../../../node_modules/jquery-ui/ui/widgets/draggable';

然后;

 $(document).ready(function() 
            $('#external-events div.external-event').each(function(index,element) 

                // store data so the calendar knows to render an event upon drop
                $(element).data('event', 
                    title: $.trim($(element).text()), // use the element's text as the event title
                    stick: true // maintain when user navigates (see docs on the renderEvent method)
                );

                // make the event draggable using jQuery UI
                $(element).draggable(
                    zIndex: 1111999,
                    revert: true,      // will cause the event to go back to its
                    revertDuration: 0  //  original position after the drag
                );

            );

        );

但请注意，我们不使用 $(this) 作为元素。 我找到了如下示例，但由于 $(this) 而无法正常工作。

$('#external-events div.external-event').each(function() 

            // store data so the calendar knows to render an event upon drop
            $(this).data('event', 
                title: $.trim($(this).text()), // use the element's text as the event title
                stick: true // maintain when user navigates (see docs on the renderEvent method)
            );

            // make the event draggable using jQuery UI
            $(this).draggable(
                zIndex: 1111999,
                revert: true,      // will cause the event to go back to its
                revertDuration: 0  //  original position after the drag
            );

        );

希望对你有帮助:)

这是我的完整代码。

import React, Component from 'react';
import $ from 'jquery';
import  draggable from '../../../node_modules/jquery-ui/ui/widgets/draggable';
import fullCalendar from 'fullcalendar';

class Activity extends Component 

    componentDidMount() 

        $(document).ready(function() 
            $('#external-events div.external-event').each(function(index,element) 

                // store data so the calendar knows to render an event upon drop
                $(element).data('event', 
                    title: $.trim($(element).text()), // use the element's text as the event title
                    stick: true // maintain when user navigates (see docs on the renderEvent method)
                );

                // make the event draggable using jQuery UI
                $(element).draggable(
                    zIndex: 1111999,
                    revert: true,      // will cause the event to go back to its
                    revertDuration: 0  //  original position after the drag
                );

            );

        );

        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();

        $('#calendar').fullCalendar(
            header: 
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            ,
            editable: true,
            droppable: true, // this allows things to be dropped onto the calendar
            drop: function() 
                // is the "remove after drop" checkbox checked?
                if ($('#drop-remove').is(':checked')) 
                    // if so, remove the element from the "Draggable Events" list
                    $(this).remove();
                
            ,
            events: [
                
                    title: 'All Day Event',
                    start: new Date(y, m, 1)
                ,
                
                    title: 'Long Event',
                    start: new Date(y, m, d-5),
                    end: new Date(y, m, d-2)
                ,
                
                    id: 999,
                    title: 'Repeating Event',
                    start: new Date(y, m, d-3, 16, 0),
                    allDay: false
                ,
                
                    id: 999,
                    title: 'Repeating Event',
                    start: new Date(y, m, d+4, 16, 0),
                    allDay: false
                ,
                
                    title: 'Meeting',
                    start: new Date(y, m, d, 10, 30),
                    allDay: false
                ,
                
                    title: 'Lunch',
                    start: new Date(y, m, d, 12, 0),
                    end: new Date(y, m, d, 14, 0),
                    allDay: false
                ,
                
                    title: 'Birthday Party',
                    start: new Date(y, m, d+1, 19, 0),
                    end: new Date(y, m, d+1, 22, 30),
                    allDay: false
                ,
                
                    title: 'Click for Google',
                    start: new Date(y, m, 28),
                    end: new Date(y, m, 29),
                    url: 'http://google.com/'
                
            ]
        );
    

    render() 
        return (
            <div className="wrapper wrapper-content">
                <div className="row animated fadeInDown">
                    <div className="col-lg-3">
                        <div className="ibox float-e-margins">
                            <div className="ibox-title">
                                <h5>Draggable Events</h5>
                                <div className="ibox-tools">
                                    <a className="collapse-link">
                                        <i className="fa fa-chevron-up"></i>
                                    </a>
                                    <a className="dropdown-toggle" data-toggle="dropdown" href="#">
                                        <i className="fa fa-wrench"></i>
                                    </a>
                                    <ul className="dropdown-menu dropdown-user">
                                        <li><a href="#">Config option 1</a>
                                        </li>
                                        <li><a href="#">Config option 2</a>
                                        </li>
                                    </ul>
                                    <a className="close-link">
                                        <i className="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div className="ibox-content">
                                <div id='external-events'>
                                    <p>Drag a event and drop into callendar.</p>
                                    <div className="external-event navy-bg">Go to shop and buy some products.</div>
                                    <div className="external-event navy-bg">Check the new CI from Corporation.</div>
                                    <div className="external-event navy-bg">Send documents to John.</div>
                                    <div className="external-event navy-bg">Phone to Sandra.</div>
                                    <div className="external-event navy-bg">Chat with Michael.</div>
                                    <p className="m-t">
                                        <input type='checkbox' id='drop-remove' className="i-checks" checked/> <label>remove after drop</label>
                                    </p>
                                </div>
                            </div>
                        </div>
                        <div className="ibox float-e-margins">
                            <div className="ibox-content">
                                <h2>FullCalendar</h2> is a jQuery plugin that provides a full-sized, drag & drop
                                calendar like the one below. It uses AJAX to fetch events on-the-fly for each month and
                                is
                                easily configured to use your own feed format (an extension is provided for Google
                                Calendar).
                                <p>
                                    <a href="http://arshaw.com/fullcalendar/" target="_blank">FullCalendar
                                        documentation</a>
                                </p>
                            </div>
                        </div>
                    </div>
                    <div className="col-lg-9">
                        <div className="ibox float-e-margins">
                            <div className="ibox-title">
                                <h5>Striped Table </h5>
                                <div className="ibox-tools">
                                    <a className="collapse-link">
                                        <i className="fa fa-chevron-up"></i>
                                    </a>
                                    <a className="dropdown-toggle" data-toggle="dropdown" href="#">
                                        <i className="fa fa-wrench"></i>
                                    </a>
                                    <ul className="dropdown-menu dropdown-user">
                                        <li><a href="#">Config option 1</a>
                                        </li>
                                        <li><a href="#">Config option 2</a>
                                        </li>
                                    </ul>
                                    <a className="close-link">
                                        <i className="fa fa-times"></i>
                                    </a>
                                </div>
                            </div>
                            <div className="ibox-content">
                                <div id="calendar"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    


export default Activity;

【参考方案1】：

你在这里的错误很清楚：

import  draggable from
     '../../../node_modules/jquery-ui/ui/widgets/draggable';

阅读更多关于 es 6 import

你能告诉我你的应用吗，结合 redux 和 jQuery 太奇怪了....

【讨论】：

我想在我的 react 项目中使用“fullcalendar”。所以我需要可拖动的模块进行拖放。当我写“import from 'jquery-ui';”时，我遇到了一个错误。但我把它改成了这样：“ import draggable from '../../../node_modules/jquery-ui/ui/widgets/draggable'; ”。当然“../../../”部分是可以改变的。现在我没有任何问题。