React-dnd: рдХреНрд░реЛрдо рдореЗрдВ рдЧреНрд░реАрди рдкреНрд▓рд╕ рд╕рд╛рдЗрди

рдХреЛ рдирд┐рд░реНрдорд┐рдд 18 рдорд╛рд░реНрдЪ 2016  ┬╖  22рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: react-dnd/react-dnd

рдХреНрдпрд╛ рдХрд┐рд╕реА рдХреЛ рдкрддрд╛ рдЪрд▓рд╛ рд╣реИ рдХрд┐ рдХреНрд░реЛрдо рдореЗрдВ рдбреНрд░реИрдЧ рдСрдкрд░реЗрд╢рди рдХреА рд╢реБрд░реБрдЖрдд рдореЗрдВ рдкрд▓-рдкрд▓ рдкрд░ рдЖрдиреЗ рд╡рд╛рд▓реЗ рдЧреНрд░реАрди рдкреНрд▓рд╕ рд╕рд╛рдЗрди рд╕реЗ рдЫреБрдЯрдХрд╛рд░рд╛ рдХреИрд╕реЗ рдорд┐рд▓рддрд╛ рд╣реИ?

dnd quicktime player today at 8 24 18 pm

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

event.dataTransfer.dropEffect = 'none'
event.dataTransfer.effectAllowed = 'none'

рдЗрд╕рдиреЗ рдореЗрд░реЗ рд▓рд┐рдП рдХреНрд░реЛрдо рдкрд░ рдХрд╛рдо рдХрд┐рдпрд╛ред рдмрд╕ рдЗрд╕реЗ "рдбреНрд░реИрдЧрд╕реНрдЯрд╛рд░реНрдЯ" рдФрд░ "рдбреНрд░реИрдЧреЗрдВрдб" рдИрд╡реЗрдВрдЯ рдореЗрдВ рдбрд╛рд▓ рджреЗрдВ рдХреНрдпреЛрдВрдХрд┐ рдпреЗ рдХреЗрд╡рд▓ рдбреЗрдЯрд╛рдЯреНрд░рд╛рдВрд╕рдлрд░ рдСрдмреНрдЬреЗрдХреНрдЯ рддрдХ рдкрд╣реБрдВрдЪ рд╡рд╛рд▓реЗ рд╣реИрдВред

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

+1

рдЗрд╕ рдкреЗрдЬ рдкрд░ Chrome 49 рдкрд░ рдореИрдХ, рдпрд╛ рдХреНрд░реЛрдо 49 рдкрд░ рд╡рд┐рдВрдбреЛрдЬ рдкрд░ рдЗрд╕ рдореБрджреНрджреЗ рдХреЛ рдкреБрди: рдкреЗрд╢ рдирд╣реАрдВ рдХрд░ рд╕рдХрддрд╛: http://gaearon.github.io/react-dnd/examples-drag-raction-naive.html

рдХреНрдпрд╛ рдпрд╣ рдЕрднреА рднреА рдЖрдкрдХреЗ рд▓рд┐рдП рд╣реЛ рд░рд╣рд╛ рд╣реИ? рдХреНрд░реЛрдо рдХрд╛ рдХреМрди рд╕рд╛ рд╕рдВрд╕реНрдХрд░рдг рдЖрдк рдЙрдкрдпреЛрдЧ рдХрд░ рд░рд╣реЗ рд╣реИрдВ рдФрд░ рдХреМрди рд╕рд╛ рдУрдПрд╕?

рдЗрд╕рдХреЗ рдЕрд▓рд╛рд╡рд╛, рдХреНрдпрд╛ рдЖрдк рдпрд╣рд╛рдБ рд╡рд░реНрдгрд┐рдд рдХрд░реНрд╕рд░ рд╡реНрдпрд╡рд╣рд╛рд░ рдХреЛ рдирд┐рдпрдВрддреНрд░рд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ: http://gaearon.github.io/react-dnd/examples-customize-drop-effects.html?

рдореИрдВ рд╕рднреА рдЙрджрд╛рд╣рд░рдгреЛрдВ рдореЗрдВ рдЗрд╕ рдореБрджреНрджреЗ рдХреЛ рджреЗрдЦ рд░рд╣рд╛ рд╣реВрдБ, рдХреНрд░реЛрдо 49 рдкрд░ рдореИрдХ (рдЕрднреА рднреА 10.10) рдкрд░ред рдбреНрд░реИрдЧ рд╕реНрдЯрд╛рд░реНрдЯ рдкрд░, рдХрд░реНрд╕рд░ рд╣рд░реЗ рд░рдВрдЧ рдХреЗ рдкреНрд▓рд╕ рдЪрд┐рдиреНрд╣ рдореЗрдВ рдмрджрд▓ рдЬрд╛рддрд╛ рд╣реИ (рдЖрдорддреМрд░ рдкрд░ cursor: copy рджреНрд╡рд╛рд░рд╛ рдкреНрд░рджрд░реНрд╢рд┐рдд рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ); рдФрд░ рдлрд┐рд░ "рдЪрд╛рд▓" рдХрд░реНрд╕рд░ рдмрди рдЬрд╛рддрд╛ рд╣реИред

рдореИрдВ рдЗрд╕ рдЫрд┐рдЯрдкреБрдЯ рд░реВрдк рд╕реЗ рдЖрдкрдХреЗ рджреНрд╡рд╛рд░рд╛ @globexdesigns (Chrome 49, OSX 10.11) рд╕реЗ рдЬреБрдбрд╝реЗ рдЙрджрд╛рд╣рд░рдг рдореЗрдВ рдкреБрди: рдкреЗрд╢ рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рд╣реВрдВ - рдпрд╣ рдЕрдкреЗрдХреНрд╖рд╛ рдХреЗ рдЕрдиреБрд░реВрдк рд╡реНрдпрд╡рд╣рд╛рд░ рдХрд░рдиреЗ рд╕реЗ рдкрд╣рд▓реЗ рдХреЗрд╡рд▓ рдПрдХ рджреВрд╕рд░реЗ рд╡рд┐рднрд╛рдЬрди рдХреЗ рд▓рд┐рдП рдкреНрд░рдХрдЯ рд╣реЛрддрд╛ рд╣реИред

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

рдореИрдВ Chrome 49 OSX 10.11.4 рдкрд░ рдПрдХ рд╣реА рдЪреАрдЬрд╝ рджреЗрдЦ рд░рд╣рд╛ рд╣реВрдВ - рдПрдХ рджреВрд╕рд░реЗ рд╡рд┐рднрд╛рдЬрди рдХреЗ рд▓рд┐рдП рдкреНрд░рдХрдЯ рд╣реЛрддрд╛ рд╣реИ рдФрд░ рдлрд┐рд░ рд╕рд╛рдорд╛рдиреНрдп рдкрд░ рд▓реМрдЯрддрд╛ рд╣реИред рд╡реНрдпрд╡рд╣рд╛рд░ рдореЗрд░реЗ рд▓рд┐рдП рд╕рдлрд╛рд░реА рдпрд╛ рдлрд╝рд╛рдпрд░рдлрд╝реЙрдХреНрд╕ рдореЗрдВ рдирд╣реАрдВ рд╣реЛрддрд╛ рд╣реИред

@EvNaverniouk рдореИрдВ Chrome 49 рдФрд░ OS X 10.11.4 рдкрд░ рд╣реВрдВ рдФрд░ рд╣рд╛рдВ, рдЕрднреА рднреА рдЗрд╕ рдореБрджреНрджреЗ рдХреЛ рджреЗрдЦ рд░рд╣рд╛ рд╣реВрдВ, рдФрд░ рд╣рд╛рдВ, рдЬрдм рдореИрдВ рдЗрд╕ рд▓рд┐рдВрдХ рдХреА рдЕрдкреЗрдХреНрд╖рд╛ рдХрд░рддрд╛ рд╣реВрдВ, рддреЛ рдореБрдЭреЗ рдХреЙрдкреА рдХреЙрдкреА рдЖрдЗрдХрди рджрд┐рдЦрд╛рдИ рджреЗрддрд╛ рд╣реИ рдЬрд┐рд╕реЗ рдЖрдкрдиреЗ http://gaearon.github.io.react -dnd / рдЙрджрд╛рд╣рд░рдг рдЕрдиреБрдХреВрд▓рд┐рдд-рдбреНрд░реЙрдк-effects.html

OS X 10.11.2 рдкрд░ рдХреНрд░реЛрдо 50 рдореЗрдВ рднреА рдЗрд╕ рдореБрджреНрджреЗ рдХреЛ рджреЗрдЦрдирд╛ред

OS X 10.10.1 рдкрд░ рдпрд╣ рдХреНрд░реЛрдо 51 рднреА рджреЗрдЦ рд░рд╣рд╛ рд╣реИ

рдореИрдВ рдЗрд╕реЗ OSX 10.11.4 рдкрд░ рдХреНрд░реЛрдо рд╕рдВрд╕реНрдХрд░рдг 51 рдкрд░ рднреА рджреЗрдЦ рд░рд╣рд╛ рд╣реВрдВред

рд╕рдВрдкрд╛рджрд┐рдд рдХрд░реЗрдВ: рдХреБрдЫ рдФрд░ рдХрд╛рд░реНрдпрдХреНрд╖рдорддрд╛ рдЬреЛрдбрд╝рдиреЗ рдХреЗ рдмрд╛рдж рдбреНрд░реИрдЧ рд▓реЗрдпрд░ рдХреЛ рд▓рд╛рдЧреВ рдХрд░рдирд╛ рдФрд░ рдареАрдХ рд╕реЗ рдХрдиреЗрдХреНрдЯрдбреНрд░реЗрдЧрдкреНрд░рд┐рд╡реНрдпреВ рдФрд░ getEmptyImage () рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рдХреЛрдб рд╕рд╣рд┐рдд рд╕рдорд╕реНрдпрд╛ рдЕрдм рдХреЗ рд▓рд┐рдП рджреВрд░ рдЪрд▓реА рдЧрдИ рд╣реИред

рдореИрдВрдиреЗ рдЗрд╕реЗ рд░рд┐рдПрдХреНрдЯ рдбреАрдЖрдИрдПрдирдбреА рдХреЗ рд╕рд╛рде-рд╕рд╛рде рдЕрдиреНрдп рдкреБрд╕реНрддрдХрд╛рд▓рдпреЛрдВ рдФрд░ рдпрд╣рд╛рдВ рддрдХ тАЛтАЛрдХрд┐ рд╕рд┐рд░реНрдл рдХрдЪреНрдЪреЗ рдПрдЪрдЯреАрдПрдордПрд▓ 5 рдбреНрд░реИрдЧреЗрдмрд▓ рдореЗрдВ рдмреЗрддрд░рддреАрдм рдврдВрдЧ рд╕реЗ рджреЗрдЦрд╛ рд╣реИред рдореЗрд░рд╛ рдЕрдиреБрдорд╛рди рд╣реИ рдХрд┐ рд╣рдореЗрдВ рдбреНрд░реИрдЧрд╕реНрдЯрд╛рд░реНрдЯ рдореЗрдВ effectAllowed рд╕реНрдерд╛рдкрдирд╛ рдирд╣реАрдВ рдХрд░рдиреА рд╣реИред

рдЗрд╕ рдкрд░ рдХреЛрдИ рдЕрдкрдбреЗрдЯ? Chrome 53 OSX 10.10.5 рдкрд░ рд╕рдорд╛рди рд╕рдорд╕реНрдпрд╛ рдХрд╛ рд╕рд╛рдордирд╛ рдХрд░рдирд╛

Chrome 54.0.2840.71 10.11.6 рдХреЛ рдПрдХ рд╣реА рдЪреАрдЬрд╝ рджреЗрдЦрдХрд░, рдХреЛрдИ рдЕрдкрдбреЗрдЯ?

+1

{dropEffect: 'copy'} рдорд╛рд╕реНрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рд╕рдорд╕реНрдпрд╛ (рд╣рд░реЗ рд░рдВрдЧ рдХреЛ рд╣рдореЗрд╢рд╛ рджрд┐рдЦрд╛рдИ рджреЗрдиреЗ рд╡рд╛рд▓рд╛ рдмрдирд╛рдХрд░); рд▓реЗрдХрд┐рди рдареАрдХ рд╕реЗ рдЗрд╕реЗ рдареАрдХ рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИред

рдЗрд╕рдХреЗ рдЕрд▓рд╛рд╡рд╛, рдпрд╣ {dropEffect: 'move'} рд▓рдЧрддрд╛ рд╣реИ рдХрд┐ рдХрд░реНрд╕рд░ рдХреЛ 4-рдкреЙрдЗрдВрдЯ рдХреНрд░реЙрд╕-рд╣реЗрдпрд░ рд╕рдлрд▓рддрд╛рдкреВрд░реНрд╡рдХ рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдкреНрд░рдХрдЯ рдирд╣реАрдВ рд╣реЛрддрд╛ рд╣реИред

рдХреНрд░реЛрдо рд╕рдВрд╕реНрдХрд░рдг: 55.0.2883.95 (рдЖрдзрд┐рдХрд╛рд░рд┐рдХ рдмрд┐рд▓реНрдб) (64-рдмрд┐рдЯ)

рдЗрд╕ рдореБрджреНрджреЗ рдХреЛ рдмрдВрдж рдХрд░рдирд╛ рдХреНрдпреЛрдВрдХрд┐ рдпрд╣ рдЗрд╕ рдкреБрд╕реНрддрдХрд╛рд▓рдп рдХрд╛ рдХрд╛рд░реНрдп рдирд╣реАрдВ рд▓рдЧрддрд╛ рд╣реИред

@fredguest рдХреНрдпрд╛ рдЖрдкрдиреЗ рдХрднреА рдЗрд╕рдХрд╛ рд╕рдорд╛рдзрд╛рди рдвреВрдВрдврд╛?

@ рдпрдорд┐рдХрд╛рдорд┐рд╕рдорд╛ рдЙрджрд╛рд╕ рд░реВрдк рд╕реЗ рдирд╣реАрдВред

рд╣рд░реЗ рд░рдВрдЧ рдХрд╛ рдкреНрд▓рд╕ рдмрдЯрди рдореЗрд░реЗ рд▓рд┐рдП рддрдм рддрдХ рджрд┐рдЦрд╛рдИ рдирд╣реАрдВ рджреЗрддрд╛ рдЬрдм рддрдХ рдХрд┐ рдореЗрд░рд╛ рдХреИрдирдбреНрд░реЙрдк рдлрд╝рдВрдХреНрд╢рди рдЧрд▓рдд рдирд╣реАрдВ рд╣реЛ рдЬрд╛рддрд╛, рддрдм рддрдХ рдпрд╣ рдкреНрд░рдХрдЯ рд╣реЛрддрд╛ рд╣реИред

event.dataTransfer.dropEffect = 'none'
event.dataTransfer.effectAllowed = 'none'

рдЗрд╕рдиреЗ рдореЗрд░реЗ рд▓рд┐рдП рдХреНрд░реЛрдо рдкрд░ рдХрд╛рдо рдХрд┐рдпрд╛ред рдмрд╕ рдЗрд╕реЗ "рдбреНрд░реИрдЧрд╕реНрдЯрд╛рд░реНрдЯ" рдФрд░ "рдбреНрд░реИрдЧреЗрдВрдб" рдИрд╡реЗрдВрдЯ рдореЗрдВ рдбрд╛рд▓ рджреЗрдВ рдХреНрдпреЛрдВрдХрд┐ рдпреЗ рдХреЗрд╡рд▓ рдбреЗрдЯрд╛рдЯреНрд░рд╛рдВрд╕рдлрд░ рдСрдмреНрдЬреЗрдХреНрдЯ рддрдХ рдкрд╣реБрдВрдЪ рд╡рд╛рд▓реЗ рд╣реИрдВред

рдЗрд╕рд╕реЗ рдореБрдЭреЗ рдорджрдж рдирд╣реАрдВ рдорд┐рд▓реА

event.dataTransfer.dropEffect = 'none'
event.dataTransfer.effectAllowed = 'none'

рдпрд╣ рдХреЗрд╡рд▓ cursor: 'grab' рдФрд░ cursor: 'grabbing' рдмреАрдЪ рдПрдХ рдХреНрд╖рдг рдХреЗ рд▓рд┐рдП рд╣реЛрддрд╛ рд╣реИ
рдпрд╣ рджреБрд░реНрднрд╛рдЧреНрдп рд╕реЗ gif рдкреНрд░рд╛рд░реВрдк рдореЗрдВ рдирд╣реАрдВ рджрд┐рдЦрддрд╛ рд╣реИ, рд▓реЗрдХрд┐рди gif рдХреЗ рдиреАрдЪреЗ рдХрд╛ рдЪрд┐рддреНрд░ рд╕рдорд╕реНрдпрд╛ рджрд┐рдЦрд╛рддрд╛ рд╣реИ

greenplus

screen shot 2018-08-01 at 12 57 15 pm

рдореИрдВ рднреА рдЗрд╕ рд╕рдорд╕реНрдпрд╛ рдХрд╛ рд╕рд╛рдордирд╛ рдХрд░ рд░рд╣рд╛ рд╣реВрдБред рдпрд╣ рдХреНрд░реЛрдо рдореЗрдВ рдмрдЧ рдЬреИрд╕рд╛ рджрд┐рдЦрддрд╛ рд╣реИред

+1

+1 рдХреНрд░реЛрдо рд╕рдВрд╕реНрдХрд░рдг 84.0.4147.89

рд╕рдВрдкрд╛рджрд┐рдд рдХрд░реЗрдВ: рдпрд╣ рдХреЗрд╡рд▓ рддрдм рд╣реЛрддрд╛ рд╣реИ рдЬрдм рдкреВрд░реНрд╡рд╛рд╡рд▓реЛрдХрди рдЫрд╡рд┐ рди рд░рдЦрдиреЗ рдХреЗ рд▓рд┐рдП рдирд┐рдореНрди рдХреЛрдб рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ:

useEffect(() => {
    preview(getEmptyImage(), { captureDraggingState: true });
  }, [preview]);

рдкреВрд░реНрд╡рд╛рд╡рд▓реЛрдХрди рд▓рд╛рдЧреВ рдХрд░рдиреЗ рд╕реЗ рдпрд╣ рд╕рдорд╕реНрдпрд╛ рд╣рд▓ рд╣реЛ рдЬрд╛рддреА рд╣реИ

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

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

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

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

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

dreamcog picture dreamcog  ┬╖  4рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ

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