2

我正在使用 React 大日历 https://github.com/intljusticemission/react-big-calendar。它有一个使用 react-dnd https://github.com/react-dnd/react-dnd的拖放选项。我想要做的是在日历之外有可拖动的元素，我可以在日历中拖动。像这样：https ://codepen.io/kotazi/pen/KVoXob 。

class Application extends React.Component {
  render() {
    return <div><External />
      <Calendar /></div>;
  }
}

/*
 * A simple React component
 */
class Calendar extends React.Component {
  render() {
    return <div id="calendar"></div>;
  }
  componentDidMount() {
    $('#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();
                }
            }
    })
  }
}

class External extends React.Component {
  render() {
    return <div id='external-events'>
            <h4>Draggable Events</h4>
            <div className='fc-event'>My Event 1</div>
            <div className='fc-event'>My Event 2</div>
            <div className='fc-event'>My Event 3</div>
            <div className='fc-event'>My Event 4</div>
            <div className='fc-event'>My Event 5</div>
            <p>
                <input type='checkbox' id='drop-remove' />
                <label for='drop-remove'>remove after drop</label>
            </p>
        </div>;
  }
  componentDidMount() {
        $('#external-events .fc-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: 999,
                revert: true,      // will cause the event to go back to its
                revertDuration: 0  //  original position after the drag
            });
        });
  }
}


/*
 * Render the above component into the div#app
 */
React.render(<Application />, document.getElementById('app'));

我发现的唯一“解决方案”是这个https://github.com/intljusticemission/react-big-calendar/issues/318但我不知道他是怎么做到的。我有与拖动示例相同的代码http://intljusticemission.github.io/react-big-calendar/examples/index.html#prop-onNavigate。有人能帮助我吗？

4

0 回答 0