React-dnd: рдЕрдВрджрд░ рдФрд░ / рдпрд╛ рдПрдХ iframe рдХреЗ рд╕рд╛рде рдкреНрд░рдпреЛрдЧ рдХрд░реЗрдВред

рдХреЛ рдирд┐рд░реНрдорд┐рдд 20 рдЬреБрд▓ре░ 2015  ┬╖  22рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: react-dnd/react-dnd

рдЬрдм рд╕рдВрджрд░реНрдн, рд╕реНрд░реЛрдд рдФрд░ рд▓рдХреНрд╖реНрдп рдПрдХ iframe рдХреЗ рдЕрдВрджрд░ рд╣реЛрддреЗ рд╣реИрдВ, рддреЛ DnD рдЕрдирдлрд┐рдЯ рд╣реЛ рдЬрд╛рддрд╛ рд╣реИред рдореИрдВрдиреЗ рдЗрд╕реЗ HTML5.js рдмреИрдХрдПрдВрдб рдкрд░ рдЯреНрд░реИрдХ рдХрд┐рдпрд╛ рд╣реИ рдЬреЛ DnD рдХреЗ рд╕рд╛рде рдЖрддрд╛ рд╣реИред
рд╣рд╛рд▓рд╛рдВрдХрд┐ рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдпрд╣ iframe рдореЗрдВ рдПрдХ рд░реЗрдВрдбрд░рд░ рдХреЗ рд╕рд╛рде рдХреБрдЫ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╣реЛ рд╕рдХрддрд╛ рд╣реИред рдпрд╣рд╛рдБ рдПрдХ рдЙрджрд╛рд╣рд░рдг рд╣реИ рдХреЛрдбрдкреАрди http://codepen.io/mattconde/pen/zGLXML?editors=101 рдкрд░

enhancement wontfix

рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА

рдмрд╣реБрдд рдХреЛрд╢рд┐рд╢ рдХреЗ рдмрд╛рдж рдореИрдВ рдЗрд╕ рддрд░рд╣ рд╕реЗ рдПрдХ iframe рдХреЗ рдЕрдВрджрд░ рддрддреНрд╡реЛрдВ рдХреЛ рдЫреЛрдбрд╝рдиреЗ рдореЗрдВ рдХрд╛рдордпрд╛рдм рд░рд╣рд╛:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import FrameComponent from 'react-frame-component';

class DragDropAwareIFrame extends Component {
  static propTypes = {
    innerRef: PropTypes.func,
  };

  static contextTypes = {
    dragDropManager: PropTypes.object.isRequired,
  }

  constructor(props, context) {
    super(props, context);

    this.manager = this.context.dragDropManager;
  }

  componentDidMount() {
    const iframe = ReactDOM.findDOMNode(this.iframe);
    this.manager.getBackend().addEventListeners(iframe.contentWindow);
  }

  componentWillUnmount() {
    const iframe = ReactDOM.findDOMNode(this.iframe);
    this.manager.getBackend().removeEventListeners(iframe.contentWindow);
  }

  handleRef = (el) => {
    this.iframe = el;
    if (this.props.innerRef) this.props.innerRef(el);
  }

  render() {
    const { innerRef, ...props } = this.props;
    return <FrameComponent {...props} ref={this.handleRef} />;
  }
}

<DragDropContextProvider backend={HTML5Backend}>
    <div>
        <Item />
        <DragDropAwareIFrame>
            <div>
                <Dustbin />
            </div>
        </DragDropAwareIFrame>
    </div>
</DragDropContextProvider>

рдХреНрдпрд╛ рдпрд╣ рдХрд░рдиреЗ рдХрд╛ рд╕рд╣реА рддрд░реАрдХрд╛ рдкреНрд░рддреАрдд рд╣реЛрддрд╛ рд╣реИ?

рд╕рднреА 22 рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

рдлреНрд░реЗрдо рд╕реЗ рдмрд╛рд╣рд░ рдЦреАрдВрдЪрдирд╛ / рдЫреЛрдбрд╝рдирд╛ рдореЗрд░реЗ рд▓рд┐рдП рдХрд┐рд╕реА рдХрд╛рдо рдХрд╛ рдирд╣реАрдВ рдерд╛ред рдРрд╕рд╛ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдбреНрд░реИрдЧ / рдбреНрд░реЙрдк рдИрд╡реЗрдВрдЯ рдХреЛ рдмрд╕ рдкреНрд░рддреНрдпреЗрдХ рдЕрддрд┐рд░рд┐рдХреНрдд рдлреНрд░реЗрдо рдХреА рд╡рд┐рдВрдбреЛ рдСрдмреНрдЬреЗрдХреНрдЯ рдкрд░ рд▓рд╛рдЧреВ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред рд╡рд░реНрддрдорд╛рди рдореЗрдВ рдХреЗрд╡рд▓ рд╡рд┐рдВрдбреЛ рдСрдмреНрдЬреЗрдХреНрдЯ рдЬрд┐рд╕рдореЗрдВ рдЖрдк рдЕрдкрдирд╛ рд░рд┐рдПрдХреНрд╢рди рдРрдк рдЪрд▓рд╛ рд░рд╣реЗ рд╣реИрдВ, рдЙрдиреНрд╣реЗрдВ:

https://github.com/gaearon/react-dnd/blob/master/src/backends/HTML5.js#L130 -L139

рдореИрдВрдиреЗ рдЕрдкрдиреЗ рд╣рд╛рд▓рд┐рдпрд╛ рдкреНрд░реЛрдЬреЗрдХреНрдЯ рдореЗрдВ HTML5- рдмреИрдХреЗрдВрдб рдХреЛ рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рддреИрдпрд╛рд░ рдХрд┐рдпрд╛ ( setup рдФрд░ teardown рдПрдХ рд╡реИрдХрд▓реНрдкрд┐рдХ win рд╡рд┐рдВрдбреЛ рдСрдмреНрдЬреЗрдХреНрдЯ рдХреЛ рд╕реНрд╡реАрдХрд╛рд░ рдХрд░рддреЗ рд╣реБрдП):

https://gist.github.com/rasmusfl0e/39db428399bd196ef706

рдпрд╣ рднреА рдХрд┐рд╕реА рднреА рддрд░рд╣ рд╕реЗ рдЙрдЬрд╛рдЧрд░ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдмреИрдХрдПрдВрдб рдЙрджрд╛рд╣рд░рдг рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрддреА рд╣реИ ( DragDropContext.js ... рдореЗрдВ рдЕрдзрд┐рдХ рдмрдВрджрд░-рдкреИрдЪрд┐рдВрдЧ) setup рдФрд░ teardown рдирд┐рд╖реНрдкрд╛рджрд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЬрдм рдЖрд╡рд╢реНрдпрдХ рд╣реЛ (рдЕрдкрдиреЗ рдлреНрд░реЗрдо рд╕реНрдерд╛рдкрд┐рдд рдХрд░рдиреЗ рдореЗрдВ) ред

рд▓реЗрдХрд┐рди рдПрдХ рдмрд╛рд░ рдЬрдм рдпрд╣ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ - рдпрд╣ рдПрдХ рдЖрдХрд░реНрд╖рдг рдХреА рддрд░рд╣ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ: рдбреА

рдЕрд░реЗ рд╡рд╛рд╣ рдЕрдЪреНрдЫрд╛ рд▓рдЧрддрд╛ рд╣реИ, рдмрд╣реБрдд рд╕рдордЭ рдореЗрдВ рдЖрддрд╛ рд╣реИред рдЖрдЬ рдЗрд╕реЗ рдмрд╛рдж рдореЗрдВ рджреЗрдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХрд░рдиреЗ рд╕реЗ, рдХреНрдпрд╛ рдбреНрд░реИрдЧрдбреНрд░реЙрдкрдХреЛрдЯреЗрдХреНрд╕реНрдЯ.рдЬреЗрдПрд╕ рдореЗрдВ рдмрджрд▓рд╛рд╡ рд╕реЗ рдмрдЪрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ? рдЗрд╕ рддрд░рд╣ рд╣рдо рд╕рд┐рд░реНрдл рдбреЙрдХреНрд╕ рдЙрд▓реНрд▓реЗрдЦ рдХреА рддрд░рд╣ рдПрдХ рдирдпрд╛ рдмреИрдХреЗрдВрдб рдмрдирд╛ рд╕рдХрддреЗ рд╣реИрдВред

рдореИрдВ рдПрдХ рд╡рд┐рд╢рд┐рд╖реНрдЯ рдПрдкреАрдЖрдИ рдФрд░ рдХрд╛рд░реНрдпрд╛рдиреНрд╡рдпрди рдкреНрд░рд╕реНрддрд╛рд╡ рдкрд░ рд╡рд┐рдЪрд╛рд░ рдХрд░ рдЦреБрд╢ рд╣реВрдВред
рджреБрд░реНрднрд╛рдЧреНрдп рд╕реЗ рдпрд╣ рдХрдард┐рди рд╣реИ рдХрд┐ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдХреНрдпреЛрдВ рдФрд░ рдХреНрдпреЛрдВ рдмрджрд▓рд╛ рдЧрдпрд╛ред

рдЕрднреА рдХреЗ рд▓рд┐рдП, рдорд╛рди рд▓реЗрдВ рдХрд┐ рд╣рдо iframes рдХрд╛ рд╕рдорд░реНрдерди рдирд╣реАрдВ рдХрд░рддреЗ рд╣реИрдВред

@gaearon рдореИрдВ рдПрдХ рдбреНрд░реИрдЧ рдПрди рдбреНрд░реЙрдк рдкреЗрдЬ рдмрд┐рд▓реНрдбрд░ рдмрдирд╛рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХрд░ рд░рд╣рд╛ рд╣реВрдВред рдмрд╛рдХреА рд╕рдм рдХреБрдЫ рдХрд░рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХреА рдФрд░ рд╡реЗ рдкреНрд░рд╡рд╛рд╣ рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рднрдпрд╛рдирдХ рд╣реИрдВред рдореБрдЭреЗ рдХреБрдЫ рд╕реБрд░рд╛рдЧ рджреЗ рд╕рдХрддреЗ рд╣реИрдВ рдЬрд╣рд╛рдВ рдЗрд╕реЗ рдХреНрд░реЙрд╕ рдлреНрд░реЗрдо рд╕реЗ рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЯреНрд╡реАрдХ рдХрд░рдирд╛ рд╣реИ?

@nadimtuhin рдореИрдВ рдПрдХ рдХреНрд░реЙрд╕ рдлреНрд░реЗрдо рдкреЗрдЬ рдмрд┐рд▓реНрдбрд░ рдкрд░ рдХрд╛рдо рдХрд░ рд░рд╣рд╛ рдерд╛ рдЬрдм рдореИрдВрдиреЗ рдЗрд╕ рдореБрджреНрджреЗ рдХреЛ рдЙрдард╛рдпрд╛ рдерд╛, рдФрд░ рдореИрдВ рдЗрд╕ рд╕рдкреНрддрд╛рд╣ рдПрдХ рдХрдИ рд╡рд┐рдВрдбреЛ рд╕рдорд╛рдзрд╛рди рдкреНрд░рд╛рдкреНрдд рдХрд░рдиреЗ рдкрд░ рдлрд┐рд░ рд╕реЗ рд╢реБрд░реВ рдХрд░реВрдВрдЧрд╛ред рдЖрдк рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдХреЗ рд╕рд╛рде iframe рдХрд╛ рдкреНрд░рдмрдВрдзрди рдХрд░ рд░рд╣реЗ рд╣реИрдВ?

рдореЗрд░реЗ рд▓рд┐рдП рдореБрдЭреЗ рдпрдХреАрди рдирд╣реАрдВ рд╣реИ рдХрд┐ рдХреНрдпрд╛ рдЖрдЗрдлреНрд░реЗрдо рдХреЗ рдЕрдВрджрд░ рдХрд╛рдо рдХрд░рдирд╛ рд╕рдмрд╕реЗ рдЕрдЪреНрдЫрд╛ рд╕рдорд╛рдзрд╛рди рд╣реЛрдЧрд╛, рдпрд╣ рдирд┐рд╢реНрдЪрд┐рдд рд░реВрдк рд╕реЗ рдЕрдЪреНрдЫрд╛ рд╣реЛрдЧрд╛ред рд▓реЗрдХрд┐рди рдХрдИ рдРрдк рдкрд░ рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд░рд┐рдПрдХреНрдЯ-рдбреИрдВрдб рд╣реЛрдиреЗ рдХрд╛ рдЙрджреНрджреЗрд╢реНрдп рдмреЗрд╣рддрд░ рд╡рд┐рдХрд▓реНрдк рд╣реИред

рдореИрдВрдиреЗ рдХрд▓ рдЗрд╕рдореЗрдВ рдПрдХ рд╕рдВрдХреНрд╖рд┐рдкреНрдд рд░реВрдк рджрд┐рдпрд╛ рд╣реИ рдФрд░ рдПрдЪрдЯреАрдПрдордПрд▓ 5 рдмреИрдХрдПрдВрдб рдореЗрдВ рдХреБрдЫ рд╣реИрдВрдбрд▓ рдХреЛ рд▓реЙрдЧ рдХрд░ рд░рд╣рд╛ рд╣реВрдВред рдФрд░ рджреВрд╕рд░реА рдУрд░ рд╕реЗ рд▓рдХреНрд╖реНрдп рдкрд░ рдкрд╣рд▓реА рд╡рд┐рдВрдбреЛ рдХреЗ рд╕реНрд░реЛрдд рдХрд╛ рдкрддрд╛ рд▓рдЧрд╛рдпрд╛ рдЬрд╛ рд░рд╣рд╛ рд╣реИред рд▓реЗрдХрд┐рди рдореБрдЭреЗ рдЬрд┐рддрдирд╛ рдорд┐рд▓рд╛ рд╣реИред

@gaearon рдХреБрдЫ рд╕рдВрдХреЗрдд / рд╕реБрд░рд╛рдЧ рдЬрд╣рд╛рдВ рджреЗрдЦрдиреЗ рдХреЗ рд▓рд┐рдП рдмрд╣реБрдд рдЕрдЪреНрдЫрд╛ рд╣реЛрдЧрд╛, рдореЗрд░реЗ рдкрд╣рд▓реЗ рд╡рд╛рд╕реНрддрд╡рд┐рдХ рдУрдкрди рд╕реЛрд░реНрд╕

@mattconde рдирд╣реАрдВ рдореИрдВ рдЕрдкрдиреА рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдРрдк рдХреЗ рдЕрдВрджрд░ iframe рдкреНрд░рдмрдВрдзрд┐рдд рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рд╣реВрдВред рдореИрдВ рджреЛ рдЕрд▓рдЧ-рдЕрд▓рдЧ рдлреНрд░реЗрдо рдкрд░ рджреЛ рдЕрд▓рдЧ-рдЕрд▓рдЧ рдРрдк рд░рдЦрдиреЗ рдХреА рдпреЛрдЬрдирд╛ рдмрдирд╛ рд░рд╣рд╛ рд╣реВрдВред рдореВрд▓ рд╡рд┐рдВрдбреЛ рдбреЗрдЯрд╛ рд╣реЗрд░рдлреЗрд░ рдХреЗ рд▓рд┐рдП рддрд░реНрдХ рдФрд░ рдкреНрд░рд╕реНрддреБрддрд┐ рдХреЗ рд▓рд┐рдП рдЪрд╛рдЗрд▓реНрдб рдлреНрд░реЗрдо рд░рдЦрддреА рд╣реИред рдорд╛рддрд╛-рдкрд┐рддрд╛ рдлреНрд▓рдХреНрд╕ рд╕реНрдЯреЛрд░ рд╕реЗ рдмрдЪреНрдЪреЗ рдХреЛ рдЕрдкрдирд╛ рд╕рд╣рд╛рд░рд╛ рджреЗрддрд╛ рд╣реИред

@mattconde

рдореЗрд░реЗ рд▓рд┐рдП "рдПрдЪрдЯреАрдПрдордПрд▓ 5 рдмреИрдХрдПрдВрдб рдореЗрдВ рд▓реЙрдЧ рдбрд╛рд▓рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХрд░рдирд╛ рдФрд░ рдлрд┐рд░ рдЗрд╕реЗ рдЯреНрд╡рд┐рдХ рдХрд░рдирд╛ рд╢реБрд░реВ рдХрд░рдирд╛" рдХреЗ рд╕рд╛рде рдХрд┐рд╕реА рднреА рд╕рдВрдХреЗрдд рджреЗрдирд╛ рдореБрд╢реНрдХрд┐рд▓ рд╣реИред рд╕рдмрд╕реЗ рд╕рд░рд▓ рд╕рдВрднрд╡ рдЙрджрд╛рд╣рд░рдг рд▓реЗрдВ рдФрд░ рджреЗрдЦреЗрдВ рдХрд┐ рдХреНрдпрд╛ рдЖрдк рдЗрд╕реЗ рдХрд╛рдо рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рдмреИрдХрдПрдВрдб рдХреЗрд╡рд▓ рдПрдХ рд╣реА рдХрд╛рд░реНрдп рдХрд░рддрд╛ рд╣реИ: рд╡рд┐рдВрдбреЛ рдИрд╡реЗрдВрдЯ рдФрд░ рдиреЛрдб рдИрд╡реЗрдВрдЯ рдХреА рд╕рджрд╕реНрдпрддрд╛ рд▓реЗрддрд╛ рд╣реИ, рдФрд░ рдЙрдиреНрд╣реЗрдВ рдХреНрд░рд┐рдпрд╛рдУрдВ рдореЗрдВ рдЕрдиреБрд╡рд╛рдж рдХрд░рддрд╛ рд╣реИред рдореБрдЭреЗ рдЗрд╕ рдмрд╛рд░реЗ рдореЗрдВ рдкрд░реНрдпрд╛рдкреНрдд рдЬрд╛рдирдХрд╛рд░реА рдирд╣реАрдВ рд╣реИ рдХрд┐ рдЖрдЗрдлреНрд░реЗрдо рдХреИрд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред рд╣реЛ рд╕рдХрддрд╛ рд╣реИ рдХрд┐ рдЖрдкрдХреЛ рд╡рд┐рдВрдбреЛ рдХреЛ рд╕рдмреНрд╕рдХреНрд░рд╛рдЗрдм рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХреЛрдб рдХреЛ рдмрджрд▓рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛ, рд▓реЗрдХрд┐рди рд╡рд┐рд╢рд┐рд╖реНрдЯ рдиреЛрдб рдХреЗ рд╢реАрд░реНрд╖ рд╕реНрддрд░ рд╡рд┐рдВрдбреЛ (рдпрд╛ iframe) рдкрд░ рдпрджрд┐ рдпрд╣ рд╕рдордЭ рдореЗрдВ рдЖрддрд╛ рд╣реИред рд▓реЗрдХрд┐рди рдореИрдВ рдЕрдкрдиреА рдЧрд╣рд░рд╛рдИ рд╕реЗ рдмрд╛рд╣рд░ рдирд┐рдХрд▓рд╛ рд╣реВрдБ рдЗрд╕рд▓рд┐рдП рдореИрдВ рдмрдХрд╡рд╛рд╕ рдХрд░ рд░рд╣рд╛ рд╣реВрдБред

@mattconde @gaearon

рдореЗрд░рд╛ рд╣рд╛рд▓ рд╣реА рдореЗрдВ рдпрд╣реА рдореБрджреНрджрд╛ рдерд╛ред рдпрд╣ рд╡рд┐рдлрд▓ рд╣реЛ рдЬрд╛рддрд╛ рд╣реИ рдЗрд╕рдХрд╛ рдХрд╛рд░рдг рдпрд╣ рд╣реИ рдХрд┐ HTML5Backend рд╡рд┐рдВрдбреЛ рдкрд░ рдЗрд╡реЗрдВрдЯ рд╢реНрд░реЛрддрд╛рдУрдВ рдХреЛ рд╕реЗрдЯ рдХрд░рддрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдпрджрд┐ рдЖрдк рдЗрд╕реЗ iframe рдХреЗ рдЕрдВрджрд░ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ, рддреЛ рдЖрдкрдХреЛ рдЙрдиреНрд╣реЗрдВ рд╡рд┐рдВрдбреЛ рдкрд░ рд╕реЗрдЯ рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП, рдХрд╣рдирд╛ рдЪрд╛рд╣рд┐рдПред [0]

@gaearon HTML5Backend.js рдореЗрдВ рд╕реЗрдЯрдЕрдк / рдлрд╛рдбрд╝ рд╕рдорд╛рд░реЛрд╣ рдХреЗ рд╕рдВрджрд░реНрдн рдХреЛ рдкрд╛рд╕ рдХрд░рдиреЗ рдХреЗ рд╡рд┐рдХрд▓реНрдк рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдЖрдк рдХреНрдпрд╛ рд╕реЛрдЪрддреЗ рд╣реИрдВ?

рдореИрдВ рдПрдХ рдЙрдиреНрдирдд рд╕рдВрдкрд╛рджрдХ (рдкрд╛рда, рдЪрд┐рддреНрд░, ..) рдХрд╛ рдирд┐рд░реНрдорд╛рдг рдХрд░рдХреЗ рдПрдХ рд╣реА рдореБрджреНрджреЗ рдХреЛ рдорд╛рд░ рд░рд╣рд╛ рд╣реВрдВ, рдЬреЛ рдПрдХ iframe рдХреЗ рднреАрддрд░ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ рдФрд░ рдореБрдЭреЗ рдЗрд╕рдХреЗ рднреАрддрд░ рддрддреНрд╡реЛрдВ (рдкрд╛рда, img) рдХреЛ рдЦреАрдВрдЪрдиреЗ рдФрд░ рдЫреЛрдбрд╝рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИ, рдореВрд▓ рд░реВрдк рд╕реЗ рддрддреНрд╡реЛрдВ рдХреЛ рдмрджрд▓рдиреЗ рдХреЗ рд▓рд┐рдП рдЦреАрдВрдЪреЗрдВ рдФрд░ рдЫреЛрдбрд╝реЗрдВ рдЧрдгред

рдореИрдВрдиреЗ рдПрдХ рдореБрджреНрджрд╛ рдЦреЛрд▓рд╛ рд╣реИ https://github.com/gaearon/react-dnd/issues/435 рдФрд░ рд╕рд┐рд░реНрдл рдпрд╣ рдкрддрд╛ рд▓рдЧрд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдХрд┐ рдпрд╣ iframe рдХреЗ рдХрд╛рд░рдг рдерд╛ред рдореИрдВ рдЗрд╕реЗ "рдЯреНрд╡реАрдХ" рдХрд░рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХрд░рдиреЗ рдЬрд╛ рд░рд╣рд╛ рд╣реВрдВ, рд▓реЗрдХрд┐рди рдЕрдЧрд░ рдХреЛрдИ рд╡рд░реНрдХрдЕрд░рд╛рдЙрдВрдб рд╣реИ рддреЛ рдореБрдЭреЗ рдпрд╣ рдЬрд╛рдирдХрд░ рдЦреБрд╢реА рд╣реЛрдЧреА! :)

рдореИрдВ рдПрдХ рдкреАрдЖрд░ рдмрдирд╛рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХрд░ рд░рд╣рд╛ рд╣реВрдБ, рдЕрдЧрд░ рд╡рд╣ рдЖрдЗрдлреНрд░реЗрдо рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░реЗред рд╡рд░реНрддрдорд╛рди рдореЗрдВ рдкреНрд░рдЧрддрд┐ рдкрд░ рд╣реИ, рдпрд╣ рдЕрднреА рддрдХ рдХрд╛рдо рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рд╣реИ, рдореБрдЭреЗ рдкрд░реЗрд╢рд╛рдиреА рд╣реЛ рд░рд╣реА рд╣реИ рдХрд┐ setup рдФрд░ teardown рдХрдорд╛рдКрдВ, рдореЗрд░реЗ componentDidMount рдФрд░ componentWillUnmount рдореЗрдВ рдкреНрд░рд╛рд╕рдВрдЧрд┐рдХ рд░реВрдк рд╕реЗ

https://github.com/gaearon/react-dnd-html5-backend/pull/27

@Vadorequest рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рд╣рдо рджреЛрдиреЛрдВ рд╕рдорд╛рди рдЕрдВрдд рдЙрддреНрдкрд╛рдж рдХреЗ рд▓рд┐рдП рд▓рдХреНрд╖реНрдп рдХрд░ рд░рд╣реЗ рд╣реИрдВред рдореИрдВ рдЕрдВрдд рдореЗрдВ рдЗрд╕реЗ react-dnd рдкреЗрд░реЗрдВрдЯ рд╕реЗ рдЪрд╛рдЗрд▓реНрдб рд╡рд┐рдВрдбреЛ рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдкреНрд░рд╛рдкреНрдд рдирд╣реАрдВ рдХрд░ рд░рд╣рд╛ рдерд╛ред рдореЗрд░реЗ рдЖрд╕-рдкрд╛рд╕ рдХреЗ рдХрд╛рдо рдореЗрдВ рдореЗрд░реЗ рд╕рдВрдкрд╛рджрдХ (рдорд╛рддрд╛-рдкрд┐рддрд╛) рдРрдк рдереЗ рдФрд░ рдкреВрд░реНрд╡рд╛рд╡рд▓реЛрдХрди (рдмрдЪреНрдЪрд╛) рдРрдк рдерд╛ред рдкреВрд░реНрд╡рд╛рд╡рд▓реЛрдХрди рдПрдкреНрд▓рд┐рдХреЗрд╢рди рдХреЛ рддрдм рддрдХ рдкреНрд░рд╕реНрддреБрдд рдирд╣реАрдВ рдХрд┐рдпрд╛ рдЧрдпрд╛ рдЬрдм рддрдХ рдХрд┐ рд╡рд╣ рд╕рдВрдкрд╛рджрдХреЛрдВ рдХреЗ рд░рд┐рдбреНрдпреВрд╕ рд╕реНрдЯреЛрд░ рд╕реЗ рдХрдиреЗрдХреНрдЯ рди рд╣реЛ рд╕рдХреЗред

рддрдм рдореЗрд░реЗ redux рд╕реНрдЯреЛрд░ рдореЗрдВ рдореЗрд░реЗ рдкрд╛рд╕ рдЯреЗрдореНрдкреНрд▓реЗрдЯ рдХреА рдПрдХ рд╕реВрдЪреА рдереА рдЬреЛ рдореИрдВ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдХрд┐ рдЙрдкрдпреЛрдЧрдХрд░реНрддрд╛ рд╕рдВрдкрд╛рджрдХ рд╕реЗ рдорд╣рд╛рди рд╕рд╛рдордЧреНрд░реА рдкреГрд╖реНрда рдкрд░ рдЦреАрдВрдЪреЗрдВред рдЗрд╕рд▓рд┐рдП рдореЗрд░реА рдЯреЗрдореНрдкреНрд▓реЗрдЯ рд╕реВрдЪреА рд╕рдВрдкрд╛рджрдХ рд╡рд┐рдВрдбреЛ рдореЗрдВ рдмреИрда рдЧрдИ, рд▓реЗрдХрд┐рди рдореИрдВ рдЙрдиреНрд╣реЗрдВ рдкреВрд░реНрд╡рд╛рд╡рд▓реЛрдХрди рдкрд░ рдЦреАрдВрдЪрдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВред

рджреЗрд╢реА рдкреНрд░рдХрд╛рд░реЛрдВ рдХрд╛ рд╕рдорд░реНрдерди рдХрд░рдиреЗ рд╡рд╛рд▓реЗ react-dnd рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж, рдореИрдВ рдкреНрд░рддреНрдпреЗрдХ рдЯреЗрдореНрдкрд▓реЗрдЯ рдХреЗ рд▓рд┐рдП рдЖрд╡рд╢реНрдпрдХ рдЬрд╛рдирдХрд╛рд░реА рдХреЛ рдкрд╛рд░рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╕рдВрдкрд╛рджрдХ рд╡рд┐рдВрдбреЛ рдореЗрдВ рдЯреЗрдХреНрд╕реНрдЯ рдбреНрд░рдЧ рд╕реЗрдЯ рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВред рдореЗрд░рд╛ рдХреЛрдб рд╕реНрдирд┐рдкреЗрдЯ ...

    componentDidMount() {
        this.refs.template.addEventListener('dragstart', this.handleDragStart, false);
    },
    componentWillUnmount() {
        this.refs.template.removeEventListener('dragstart', this.handleDragStart, false);
    },
    handleDragStart(e) {
        const { template } = this.props;
        e.dataTransfer.setData('text/plain', JSON.stringify({
            type: template.type,
            name: template.name,
        }));
        return e;
    },

рддрдм рдореИрдВ рдЙрд╕ JSON рд╕реНрдЯреНрд░рд┐рдВрдЧ рдХреЛ react-dnd рд╕рд╛рде рджреВрд╕рд░реЗ рдЫреЛрд░ рдкрд░ рдкрдХрдбрд╝ рд╕рдХрддрд╛ рдерд╛, рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдЕрдЪреНрдЫреА рддрд░рд╣ рд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИред

рдореБрдЭреЗ рдкрддрд╛ рд╣реИ рдХрд┐ рдЖрдк рдХреИрд╕реЗ рдкреНрд░рд╛рдкреНрдд рдХрд░рддреЗ рд╣реИрдВ, рдЗрд╕рдХреЗ рдЪрд╛рд░реЛрдВ рдУрд░ рд╡реИрдХрд▓реНрдкрд┐рдХ рддрд░реАрдХреЛрдВ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рд╕реБрдирдирд╛ рдкрд╕рдВрдж рдХрд░реЗрдВрдЧреЗред

@mattconde рдореИрдВ рджреЛ рдЕрд▓рдЧ-рдЕрд▓рдЧ рд╢рд╛рдЦрд╛рдУрдВ рдкрд░ рдХрд╛рдо рдХрд░ рд░рд╣рд╛ рд╣реВрдВ, рдПрдХ рдмрджрд╕реВрд░рдд рдлрд┐рдХреНрд╕ рдФрд░ рдЗрд╕рдХреЗ рд▓рд┐рдП рдПрдХ рд╡рд╛рд╕реНрддрд╡рд┐рдХ рдлрд┐рдХреНрд╕ред рдмрджрд╕реВрд░рдд рдлрд┐рдХреНрд╕ рдмрд╕ рдЙрди рдкрдВрдХреНрддрд┐рдпреЛрдВ рдХреЛ HTML5Backend.js рдлрд╝рд╛рдЗрд▓ рдореЗрдВ рдмрджрд▓ рджреЗрддрд╛ рд╣реИред рдкрд░рд┐рд╡рд░реНрддрди рдпрд╣рд╛рдБ рджреЗрдЦреЗ рдЬрд╛ рд╕рдХрддреЗ рд╣реИрдВ: https://github.com/Gutenberg-Technology/react-dnd-html5-backend/commit/8b3d6a44b2cdbfe8d5bac025f0373715968d8b6c

_ (рдпрд╣ рдореВрд▓ рд░реВрдк рд╕реЗ рдХреЗрд╡рд▓ target param рдХреЛ setup рдФрд░ teardown рдЬреЛрдбрд╝ рджреЗрддрд╛ рд╣реИ, рдЬрд┐рд╕рдХрд╛ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рдорд╛рди рдХреЗ рд░реВрдк рдореЗрдВ рдореЗрд░рд╛ iframe рд╣реИ рдФрд░ window рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рд╡рд╛рдкрд╕ рдЖрддрд╛ рд╣реИред рдЗрддрдирд╛ рдмрджрд╕реВрд░рдд рд╣реИ рдХрд┐ рдпрд╣ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рд╡рд┐рдлрд▓ рд╣реЛ рдЬрд╛рдПрдЧрд╛ рдЕрдЧрд░ рдХреЛрдИ iframe рдирд╣реАрдВ рдорд┐рд▓рд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдпрд╣ рдЕрднреА рдХреЗ рд▓рд┐рдП рдХрд░реЗрдВрдЧреЗред) _

рд▓реЗрдХрд┐рди рдпрд╣ рдХреБрдЫ рд╕реНрдерд┐рддрд┐ рдореЗрдВ рд╡рд┐рдлрд▓ рд╣реЛ рдЬрд╛рдПрдЧрд╛, рдЕрдЧрд░ рдПрдХ рд╕реЗ рдЕрдзрд┐рдХ iframe рд╣реИ, рддреЛ рдпрд╣ рдмрд╕ рдЕрдЯрдХрдиреЗ рд╕реЗ рдмрдЪрдиреЗ рдХреЗ рд▓рд┐рдП рд╣реИред рдПрдХ рдмреЗрд╣рддрд░ рд╕рдорд╛рдзрд╛рди рдпрд╣ рд╣реЛрдЧрд╛ рдХрд┐ рдореИрдВ рд╕реНрд╡рдпрдВ рдЕрдкрдиреЗ рдХреЛрдб рдХреЗ рднреАрддрд░ setup рдФрд░ teardown рдХреЙрд▓ рдХрд░реВрдВ рдФрд░ рд╢реНрд░реЛрддрд╛рдУрдВ рдХреЛ рдмрд╛рдВрдзрдиреЗ рдФрд░ рд╕реБрдирдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ target рдкреИрд░рд╛рдореАрдЯрд░ рдкрд╛рд╕ рдХрд░реВрдВред

рдпрджрд┐ рдЖрдкрдХреЗ рд╕рдорд╛рдзрд╛рди рдХреА рд╡реНрдпрд╛рдЦреНрдпрд╛ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рдж, рдореИрдВ рдирд┐рд╢реНрдЪрд┐рдд рд░реВрдк рд╕реЗ рдЕрдкрдиреЗ рдкреАрдЖрд░ рдореЗрдВ рд╕реБрдзрд╛рд░ рдХрд░реВрдВрдЧрд╛ рдЕрдЧрд░ рдореБрдЭреЗ рдПрдХ рдирд┐рдХрдЯ рднрд╡рд┐рд╖реНрдп рдореЗрдВ рдмреЗрд╣рддрд░ рд╕рдорд╛рдзрд╛рди рдорд┐рд▓ рдЧрдпрд╛ред :)

рд╣реЗ рджреЛрд╕реНрддреЛрдВ, рдмрд╕ рдЗрд╕ рд╕рдорд╕реНрдпрд╛ рдореЗрдВ рдЦреБрдж рдХреЛ рднрд╛рдЧ рдЧрдпрд╛, рдкрддрд╛ рдирд╣реАрдВ рдХреИрд╕реЗ iframe рдХреЗ рд╕рд╛рде рдЦрд┐рдбрд╝рдХреА рдХрдиреЗрдХреНрдЯ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рдореИрдВ рдЦрд┐рдбрд╝рдХреА рдкрд░ рдХреБрдЫ рдбреНрд░реИрдЧрд╕реЛрд░реНрд╕ рд░рдЦрдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдФрд░ рдореИрдВ iframe рдкрд░ рдХреБрдЫ DropTarget рдмрдирд╛рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ, рднрд▓реЗ рд╣реА рдореИрдВ HTML5Backend рдХреЛ рдЯреНрд╡реАрдХ рдХрд░реВрдВ рд▓реЗрдХрд┐рди рдореИрдВ рдЗрд╕реЗ рдЙрд╕ рддрд░рд╣ рд╕реЗ рдХрд╛рдо рдирд╣реАрдВ рдХрд░ рд╕рдХрддрд╛ ...

@mattconde рдЗрд╕реЗ рд╕рд╛рдЭрд╛ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдзрдиреНрдпрд╡рд╛рджред рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдореИрдВ рдПрдХ рд╕рдорд╛рди рдПрдВрдб рдкреНрд░реЛрдбрдХреНрдЯ рдмрдирд╛ рд░рд╣рд╛ рд╣реВрдВред рдЗрд╕рд╕реЗ рднреА рдмреБрд░реА рдмрд╛рдд рдпрд╣ рд╣реИ рдХрд┐ рд╣рдо Angular 2 рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣реЗ рд╣реИрдВред рдореИрдВрдиреЗ рдЖрдВрд╢рд┐рдХ рд░реВрдк рд╕реЗ рдЕрднрд┐рдХреНрд░рд┐рдпрд╛-dnd рдХреЛ рдЖрдВрд╢рд┐рдХ рд░реВрдк рд╕реЗ рдкреЛрд░реНрдЯ рдХрд┐рдпрд╛, рд▓реЗрдХрд┐рди рдЕрдВрдд рдореЗрдВ, рдореИрдВрдиреЗ iframe рдХреЗ рд╕рд╛рде рджреАрд╡рд╛рд░ рдХреЛ рдорд╛рд░рд╛ред рдЕрдкрдиреЗ рддрд░реАрдХреЗ рд╕реЗ рдХреЛрд╢рд┐рд╢ рдХрд░рдиреЗ рдЬрд╛ рд░рд╣реЗ рд╣реИрдВред

@gaearon PRs рдпрд╣рд╛рдБ

@kesne рдХреНрдпрд╛ рдЖрдк рдирдП

рд╣рд╛рдп @darthtrevino
рдХреНрдпрд╛ рдЖрдкрдХреЗ рдкрд░рд┐рд╡рд░реНрддрди рдкреГрд╖реНрда рд╕реЗ рдлрд╝реНрд░реЗрдо рддрдХ рдХрд┐рд╕реА рддрддреНрд╡ рдХреЛ рдЦреАрдВрдЪрдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрддреЗ рд╣реИрдВ?
рдореИрдВ рдлрд╝реНрд░реЗрдо рдХреЗ рдЕрдВрджрд░ рдФрд░ рдмрд╛рд╣рд░ рдбреНрд░реИрдЧ рдФрд░ рдбреНрд░реЙрдк рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВред

рд╣реЗ @ рдХреНрд░рд╛рдЗрд╕рд┐рд╕рд▓рд┐рдирдХреНрд╕ , рдореИрдВ рдЗрд╕ рд▓рд╛рдЗрдмреНрд░реЗрд░реА рдХреЛ рдЪрд╛рд╣ рд░рд╣рд╛ рд╣реВрдВ рдФрд░ рдпрд╣ рджреЗрдЦрдирд╛ рдкрд╕рдВрдж рдХрд░реВрдВрдЧрд╛ рдХрд┐ рдЖрдк рд▓реЛрдЧ рдХреНрдпрд╛ рд▓реЗрдХрд░ рдЖрдП рд╣реИрдВред рдХреНрдпрд╛ рдЖрдк рдЕрдкрдирд╛ рдХреЛрдб рд╕рд╛рдЭрд╛ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рддреИрдпрд╛рд░ рд╣реИрдВ? рдзрдиреНрдпрд╡рд╛рдж!

рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП iframe рдХреЗ рдЕрдВрджрд░ iframe рд╕реЗ рдмрд╛рд╣рд░ рдХреА рд╡рд╕реНрддреБрдУрдВ рдХреЛ рдЫреЛрдбрд╝рдиреЗ рдХрд╛ рдПрдХ рддрд░реАрдХрд╛ рд╣реИ:

<DragDropContextProvider backend={HTML5Backend}>
    <div>
        <Item />
        <Frame>
            <div>
                <Dustbin />
            </div>
        </Frame>
    </div>
</DragDropContextProvider>

рдмрд╣реБрдд рдХреЛрд╢рд┐рд╢ рдХреЗ рдмрд╛рдж рдореИрдВ рдЗрд╕ рддрд░рд╣ рд╕реЗ рдПрдХ iframe рдХреЗ рдЕрдВрджрд░ рддрддреНрд╡реЛрдВ рдХреЛ рдЫреЛрдбрд╝рдиреЗ рдореЗрдВ рдХрд╛рдордпрд╛рдм рд░рд╣рд╛:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import FrameComponent from 'react-frame-component';

class DragDropAwareIFrame extends Component {
  static propTypes = {
    innerRef: PropTypes.func,
  };

  static contextTypes = {
    dragDropManager: PropTypes.object.isRequired,
  }

  constructor(props, context) {
    super(props, context);

    this.manager = this.context.dragDropManager;
  }

  componentDidMount() {
    const iframe = ReactDOM.findDOMNode(this.iframe);
    this.manager.getBackend().addEventListeners(iframe.contentWindow);
  }

  componentWillUnmount() {
    const iframe = ReactDOM.findDOMNode(this.iframe);
    this.manager.getBackend().removeEventListeners(iframe.contentWindow);
  }

  handleRef = (el) => {
    this.iframe = el;
    if (this.props.innerRef) this.props.innerRef(el);
  }

  render() {
    const { innerRef, ...props } = this.props;
    return <FrameComponent {...props} ref={this.handleRef} />;
  }
}

<DragDropContextProvider backend={HTML5Backend}>
    <div>
        <Item />
        <DragDropAwareIFrame>
            <div>
                <Dustbin />
            </div>
        </DragDropAwareIFrame>
    </div>
</DragDropContextProvider>

рдХреНрдпрд╛ рдпрд╣ рдХрд░рдиреЗ рдХрд╛ рд╕рд╣реА рддрд░реАрдХрд╛ рдкреНрд░рддреАрдд рд╣реЛрддрд╛ рд╣реИ?

@ethanve рдмрд╕ рдЗрд╕ рдореБрджреНрджреЗ рдкрд░ рдПрдХ рдЬрдк рдХрд┐рдпрд╛ - рдореИрдВ рдмрдирд╛рдпрд╛ рдЖрдк рдХрд╛ рд╡рд░реНрдгрди рдХрд┐рдпрд╛ред https://cormacrelf.github.io/angular-skyhook/

рдореБрдЭреЗ iframe (рдХреЛрдИ рдЕрднрд┐рднрд╛рд╡рдХ рд╕рд╣рднрд╛рдЧрд┐рддрд╛ рдирд╣реАрдВ) рдХреЗ рднреАрддрд░ dnd рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдореЗрдВ рднреА рдкрд░реЗрд╢рд╛рдиреА рд╣реЛ рд░рд╣реА рд╣реИред рдЦреАрдВрдЪрдирд╛ рдареАрдХ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ, рд▓реЗрдХрд┐рди рдбреНрд░реЙрдк рдЬрд╝реЛрди рдЕрдм рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддреЗ рд╣реИрдВред рдбреНрд░реЙрдк рдЬрд╝реЛрди рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ iframe рдХреЗ рднреАрддрд░ рдХрд╛рдо рдХрд░рдиреЗ рдХрд╛ рдХреНрдпрд╛ рдЙрдкрд╛рдп рд╣реИ (рд╕рд┐рд░реНрдл рдЖрдЗрдЯрдо рдХреЛ рдкреВрд░реА рддрд░рд╣ рд╕реЗ iframe рдХреЗ рдЕрдВрджрд░ рд▓реЗ рдЬрд╛рдирд╛)ред

рдореИрдВ рдЗрдВрдЧрд┐рдд рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдХрд┐ рдпрд╣ рдЯрдЪ рдмреИрдХрдПрдВрдб рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ рд▓реЗрдХрд┐рди рдПрдЪрдЯреАрдПрдордПрд▓ 5 рдмреИрдХрдПрдВрдб рдХреЗ рд╕рд╛рде рдирд╣реАрдВред

рдХреНрдпрд╛ рдпрд╣ рдкреГрд╖реНрда рдЙрдкрдпреЛрдЧреА рдерд╛?
0 / 5 - 0 рд░реЗрдЯрд┐рдВрдЧреНрд╕

рд╕рдВрдмрдВрдзрд┐рдд рдореБрджреНрджреЛрдВ

bebbi picture bebbi  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

user1736 picture user1736  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

BrennanRoberts picture BrennanRoberts  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

croraf picture croraf  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

vickyvxr picture vickyvxr  ┬╖  3рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ