React-dnd: рдШрдЯрдХ startDrag рдореЗрдВ рд╢реВрдиреНрдп рд╣реИ?

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

рджрд╕реНрддрд╛рд╡реЗрдЬрд╝реАрдХрд░рдг рдХрд╣рддрд╛ рд╣реИ рдХрд┐ _component_ startDrag (рддреАрд╕рд░рд╛ рдкреИрд░рд╛рдореАрдЯрд░) рдХреЛ рдкрд╛рд╕ рдХрд░ рджрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИ, рд╣рд╛рд▓рд╛рдВрдХрд┐ рдЗрд╕реЗ рдХреЙрд▓ рдХрд┐рдП рдЬрд╛рдиреЗ рдкрд░ рдпрд╣ рд╢реВрдиреНрдп рд▓рдЧрддрд╛ рд╣реИ? рдореБрдЭреЗ рдпрдХреАрди рдирд╣реАрдВ рд╣реИ рдХрд┐ рдпрд╣ рдХреБрдЫ рдРрд╕рд╛ рд╣реИ рдЬреЛ рдореИрдВ рдЧрд▓рдд рдХрд░ рд░рд╣рд╛ рд╣реВрдВред рдЕрдЧрд░ рдпрд╣ рдореЗрд░реЗ рдШрдЯрдХ рдХреЛ рдбреНрд░реИрдЧ рд╕реЛрд░реНрд╕ рдФрд░ рдбреНрд░реИрдЧ рдЯрд╛рд░рдЧреЗрдЯ рджреЛрдиреЛрдВ рдореЗрдВ рдорджрдж рдХрд░рддрд╛ рд╣реИред

рдореИрдВ рдЬреЛ рдХрд░рдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рд╡рд╣ рдореЗрд░реЗ рдШрдЯрдХ рдХреА рдКрдВрдЪрд╛рдИ startDrag рдХреЗ рдЕрдВрджрд░ рд╣реИ, рдпрд╣ рдРрд╕рд╛ рдХреБрдЫ рдирд╣реАрдВ рд╣реИ рдЬрд┐рд╕реЗ рдореИрдВ рдкрд╛рд░рд┐рдд рдХрд┐рдП рдЧрдП рдкреНрд░реЛрдк рд╕реЗ рдкреНрд░рд╛рдкреНрдд рдХрд░ рд╕рдХрддрд╛ рд╣реВрдВ рдЗрд╕рд▓рд┐рдП рдореБрдЭреЗ рдШрдЯрдХ рддрдХ рдкрд╣реБрдВрдЪ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред

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

рд╕рдорд╕реНрдпрд╛ рдпрд╣ рд╣реИ рдХрд┐ рдбреАрдПрдирдбреА рдХреЛ рд╕реНрдЯреЗрдЯрд▓реЗрд╕ рдШрдЯрдХреЛрдВ рдХреЛ рдкрд╕рдВрдж рдирд╣реАрдВ рд╣реИ :(

рдореИрдВ рдмрджрд▓ рдЧрдпрд╛

const SortableListItem = (props) => {

рдкреНрд░рддрд┐

class SortableListItem extends Component {

рдФрд░ _component_ рдЕрдм рд╕рд╣реА рдврдВрдЧ рд╕реЗ startDrag рдХреЛ рдкрд╛рд╕ рдХрд░ рджрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИред рдпрд╣ рд╕реНрдЯреЗрдЯрд▓реЗрд╕ рдШрдЯрдХ рдХрд╛ рдЙрд▓реНрд▓реЗрдЦ рдХрд░рдиреЗ рдпреЛрдЧреНрдп рд╣реИ рдЕрдиреНрдпрдерд╛ рдЕрдкреЗрдХреНрд╖рд┐рдд рд░реВрдк рд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ рдЗрд╕рд▓рд┐рдП рдХрд╛рдлреА рдЙрд▓рдЭрди рдореЗрдВ рдерд╛ рдХрд┐ рдХреНрдпреЛрдВ _component_ startDrag рдореЗрдВ рд╢реВрдиреНрдп рд╣реИред

рдбреАрдПрдирдбреА рд╕реНрдЯреЗрдЯрд▓реЗрд╕ рдШрдЯрдХреЛрдВ рдХреЗ рд╕рд╛рде рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИ (рдпрд╣ рдорд╛рдирддреЗ рд╣реБрдП рдХрд┐ рдЗрд╕реЗ рдареАрдХ рдирд╣реАрдВ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ) рд░рд╛рдЬреНрдп рдХреЗ рд▓рд┐рдП startDrag рджрд╕реНрддрд╛рд╡реЗрдЬрд╝ рдХреЛ рдЕрджреНрдпрддрди рдХрд░рдиреЗ рдХреЗ рд▓рд╛рдпрдХ рд╣реЛ рд╕рдХрддрд╛ рд╣реИред

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

рд╕рдорд╕реНрдпрд╛ рдпрд╣ рд╣реИ рдХрд┐ рдбреАрдПрдирдбреА рдХреЛ рд╕реНрдЯреЗрдЯрд▓реЗрд╕ рдШрдЯрдХреЛрдВ рдХреЛ рдкрд╕рдВрдж рдирд╣реАрдВ рд╣реИ :(

рдореИрдВ рдмрджрд▓ рдЧрдпрд╛

const SortableListItem = (props) => {

рдкреНрд░рддрд┐

class SortableListItem extends Component {

рдФрд░ _component_ рдЕрдм рд╕рд╣реА рдврдВрдЧ рд╕реЗ startDrag рдХреЛ рдкрд╛рд╕ рдХрд░ рджрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИред рдпрд╣ рд╕реНрдЯреЗрдЯрд▓реЗрд╕ рдШрдЯрдХ рдХрд╛ рдЙрд▓реНрд▓реЗрдЦ рдХрд░рдиреЗ рдпреЛрдЧреНрдп рд╣реИ рдЕрдиреНрдпрдерд╛ рдЕрдкреЗрдХреНрд╖рд┐рдд рд░реВрдк рд╕реЗ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ рдЗрд╕рд▓рд┐рдП рдХрд╛рдлреА рдЙрд▓рдЭрди рдореЗрдВ рдерд╛ рдХрд┐ рдХреНрдпреЛрдВ _component_ startDrag рдореЗрдВ рд╢реВрдиреНрдп рд╣реИред

рдбреАрдПрдирдбреА рд╕реНрдЯреЗрдЯрд▓реЗрд╕ рдШрдЯрдХреЛрдВ рдХреЗ рд╕рд╛рде рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИ (рдпрд╣ рдорд╛рдирддреЗ рд╣реБрдП рдХрд┐ рдЗрд╕реЗ рдареАрдХ рдирд╣реАрдВ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ) рд░рд╛рдЬреНрдп рдХреЗ рд▓рд┐рдП startDrag рджрд╕реНрддрд╛рд╡реЗрдЬрд╝ рдХреЛ рдЕрджреНрдпрддрди рдХрд░рдиреЗ рдХреЗ рд▓рд╛рдпрдХ рд╣реЛ рд╕рдХрддрд╛ рд╣реИред

рдУрд╣, рдмрд╕ рдЗрд╕ рдкрд░ рдХреБрдЫ рдЪрдХреНрд░реЛрдВ рдХреЛ рднреА рдХрдо рдХрд┐рдпрд╛ (рдЗрд╕рдХреЗ рдмрдЬрд╛рдп hover() рдХреЙрд▓рдмреИрдХ рдХреЛ рдЫреЛрдбрд╝рдХрд░)ред рдЗрд╕реЗ рдкреЛрд╕реНрдЯ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдмрд╣реБрдд-рдмрд╣реБрдд рдзрдиреНрдпрд╡рд╛рдж... рдореБрдЭреЗ рдирд╣реАрдВ рдкрддрд╛ рдерд╛ рдХрд┐ рдЖрдЧреЗ рдХрд╣рд╛рдВ рджреЗрдЦрдирд╛ рд╣реИред

рдЗрд╕рдореЗрдВ рдЕрднреА рднреА рднрд╛рдЧ рдЧрдпрд╛ - рд╕рдВрджреЗрд╣ рд╣реИ рдХрд┐ рдпрд╣ рдореБрджреНрджрд╛ рд╕реНрдЯреЗрдЯрд▓реЗрд╕ рдШрдЯрдХреЛрдВ рдХрд╛ рдХреЛрдИ рд╕рд╛рд░реНрд╡рдЬрдирд┐рдХ рдЙрджрд╛рд╣рд░рдг рдирд╣реАрдВ рд╣реИ ред рд░рд┐рдПрдХреНрдЯ-рдбреАрдПрдирдбреА рдХреЛ рд░реЗрдлрд░реА рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рддрд░реАрдХреЗ рдХреЛ рдмрджрд▓рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛ рд╕рдХрддреА рд╣реИ, рдХреНрдпреЛрдВрдХрд┐ receiveComponent рдХреЛ рдирд▓ рдХреЗ рд╕рд╛рде рдХрд╣рд╛ рдЬрд╛рддрд╛ рд╣реИ

рдпрд╣ рдореЗрд░реЗ рд╕рд╛рде рддрдм рд╣реБрдЖ рдЬрдм react-redux , рдФрд░ DragSource рдЕрдкрдЧреНрд░реЗрдб рдХрд░рддреЗ рд╕рдордп рд╕реАрдзреЗ connect рдПрдб рдШрдЯрдХ рдХреЛ рд░реИрдк рдХрд┐рдпрд╛ рдЧрдпрд╛ред

рд╕рдорд╛рдзрд╛рди: рдбреНрд░реИрдЧрд╕реЙрд░рд╕ рдФрд░ рдХрдиреЗрдХреНрдЯ рдХреЗ рдХреНрд░рдо рдХреЛ рдмрджрд▓ рджрд┐рдпрд╛ред :-/

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

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

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

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

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

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

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

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