рдЬрдм рд╕рдВрджрд░реНрдн, рд╕реНрд░реЛрдд рдФрд░ рд▓рдХреНрд╖реНрдп рдПрдХ iframe рдХреЗ рдЕрдВрджрд░ рд╣реЛрддреЗ рд╣реИрдВ, рддреЛ DnD рдЕрдирдлрд┐рдЯ рд╣реЛ рдЬрд╛рддрд╛ рд╣реИред рдореИрдВрдиреЗ рдЗрд╕реЗ HTML5.js рдмреИрдХрдПрдВрдб рдкрд░ рдЯреНрд░реИрдХ рдХрд┐рдпрд╛ рд╣реИ рдЬреЛ DnD рдХреЗ рд╕рд╛рде рдЖрддрд╛ рд╣реИред
рд╣рд╛рд▓рд╛рдВрдХрд┐ рдореБрдЭреЗ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдпрд╣ iframe рдореЗрдВ рдПрдХ рд░реЗрдВрдбрд░рд░ рдХреЗ рд╕рд╛рде рдХреБрдЫ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╣реЛ рд╕рдХрддрд╛ рд╣реИред рдпрд╣рд╛рдБ рдПрдХ рдЙрджрд╛рд╣рд░рдг рд╣реИ рдХреЛрдбрдкреАрди http://codepen.io/mattconde/pen/zGLXML?editors=101 рдкрд░
рдлреНрд░реЗрдо рд╕реЗ рдмрд╛рд╣рд░ рдЦреАрдВрдЪрдирд╛ / рдЫреЛрдбрд╝рдирд╛ рдореЗрд░реЗ рд▓рд┐рдП рдХрд┐рд╕реА рдХрд╛рдо рдХрд╛ рдирд╣реАрдВ рдерд╛ред рдРрд╕рд╛ рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдбреНрд░реИрдЧ / рдбреНрд░реЙрдк рдИрд╡реЗрдВрдЯ рдХреЛ рдмрд╕ рдкреНрд░рддреНрдпреЗрдХ рдЕрддрд┐рд░рд┐рдХреНрдд рдлреНрд░реЗрдо рдХреА рд╡рд┐рдВрдбреЛ рдСрдмреНрдЬреЗрдХреНрдЯ рдкрд░ рд▓рд╛рдЧреВ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред рд╡рд░реНрддрдорд╛рди рдореЗрдВ рдХреЗрд╡рд▓ рд╡рд┐рдВрдбреЛ рдСрдмреНрдЬреЗрдХреНрдЯ рдЬрд┐рд╕рдореЗрдВ рдЖрдк рдЕрдкрдирд╛ рд░рд┐рдПрдХреНрд╢рди рдРрдк рдЪрд▓рд╛ рд░рд╣реЗ рд╣реИрдВ, рдЙрдиреНрд╣реЗрдВ:
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
рдореЗрдВ рдкреНрд░рд╛рд╕рдВрдЧрд┐рдХ рд░реВрдк рд╕реЗ
@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 рдмреИрдХрдПрдВрдб рдХреЗ рд╕рд╛рде рдирд╣реАрдВред
рд╕рдмрд╕реЗ рдЙрдкрдпреЛрдЧреА рдЯрд┐рдкреНрдкрдгреА
рдмрд╣реБрдд рдХреЛрд╢рд┐рд╢ рдХреЗ рдмрд╛рдж рдореИрдВ рдЗрд╕ рддрд░рд╣ рд╕реЗ рдПрдХ iframe рдХреЗ рдЕрдВрджрд░ рддрддреНрд╡реЛрдВ рдХреЛ рдЫреЛрдбрд╝рдиреЗ рдореЗрдВ рдХрд╛рдордпрд╛рдм рд░рд╣рд╛:
рдХреНрдпрд╛ рдпрд╣ рдХрд░рдиреЗ рдХрд╛ рд╕рд╣реА рддрд░реАрдХрд╛ рдкреНрд░рддреАрдд рд╣реЛрддрд╛ рд╣реИ?