Как заставить перетаскивать исходный элемент React dnd на цель? - PullRequest
Новая
       38

Как заставить перетаскивать исходный элемент React dnd на цель?

0 голосов
/ 08 июня 2018

Я создал простой пример Dnd , со следующими компонентами:

Externalevents.js (источник перетаскивания) 

import React, { Component } from 'react';
import { DragSource } from 'react-dnd';
import './customCal.css';


const ItemTypes = {
    EVENT: 'event'
};

const eventSource = {
    beginDrag(props) {
      return {  };
    },

    endDrag(props, monitor) {
      const item = monitor.getItem()
      const dropResult = monitor.getDropResult()

      if (dropResult) {
        alert(`You dropped ${item.name} into ${dropResult.name}!`)
      }
    },
}

function collect(connect, monitor) {
    return {
       connectDragSource : connect.dragSource(),
       connectDragPreview: connect.dragPreview(),
       isDragging : monitor.isDragging()
    } 
}

class externalEvents extends Component {
    render() {

        const { connectDragSource , isDragging } = this.props;
        const { name } = this.props;

        return connectDragSource(
            <span>{ name }</span>
        )
    }
}

export default DragSource(ItemTypes.EVENT, eventSource , collect)(externalEvents);

customCal.js (цель удаления) 

import React, { Component } from 'react';
import { DropTarget } from 'react-dnd';
import './customCal.css';


const calTarget = {
    canDrop(props) {
        return true;
    },

    drop(props) {

    }
};

function collect(connect, monitor) {
    return {
      connectDropTarget: connect.dropTarget(),
      isOver: monitor.isOver(),
      canDrop: monitor.canDrop()
    };
}

const ItemTypes = {
    EVENT: 'event'
};

class customCal extends Component {    

    render() {
        const { connectDropTarget, isOver, canDrop } = this.props;    

        return connectDropTarget(
            <div className="day" style={{
                    backgroundColor : canDrop ? '#eee' : ''
                }} >
                <span className="dayDetails">
                    <span>Monday</span>
                    <span>Jan 1 </span>                        
                </ span>
            </div> 
        );
    }   
}

export default DropTarget(ItemTypes.EVENT, calTarget, collect)(customCal);

и родительский компонент, который загружает эти 2 компонента.customCalLoader.js 

import React, { Component } from 'react';
import './customCal.css';
import CustomCal from './customCal';
import ExternalEvents from './externalEvents';

import { DragDropContext , DragDropContextProvider } from 'react-dnd';
import HTML5Backend from 'react-dnd-html5-backend';

  class customCalLoader extends Component {
    render() {
        return (           
                <div className="customCal__Loader">
                    <div className="event__box">
                        <ExternalEvents name="Nike" />                        
                        <ExternalEvents name="RT" />                        
                        <ExternalEvents name="Jaboog" />                        
                    </div>
                    <div className="customCal__main">
                        <CustomCal />                                 
                    </ div>
                </div>   
        )
    }
  }



export default DragDropContext(HTML5Backend)(customCalLoader);

В настоящее время перетаскивание работает, а также при успешном наведении на цель перетаскивания меняется цвет цели перетаскивания, поэтому перетаскивание работает, но теперь то, что я хотел бы иметькогда я перетаскиваю элемент и перетаскиваю его на dropTarget, я хочу, чтобы он привязывался к цели перетаскивания, как мне это сделать в React Dnd?

Я хочу добиться этого (это в jQuery), как мне добиться этого в React Dnd?

...