React-dnd: рдмреИрдХрдПрдВрдб рдХреЛ рдЯрдЪ рдХрд░реЗрдВ

рдХреЛ рдирд┐рд░реНрдорд┐рдд 27 рдЕрдХреНрддреВре░ 2014  ┬╖  25рдЯрд┐рдкреНрдкрдгрд┐рдпрд╛рдБ  ┬╖  рд╕реНрд░реЛрдд: react-dnd/react-dnd

рдпрд╣ рд╣рддреНрдпрд╛рд░рд╛ рд╣реЛрдЧрд╛ рдЕрдЧрд░ рдПрдХ рдЯрдЪ рдмреИрдХрдПрдВрдб рдерд╛ рдЬрд┐рд╕реЗ рд╕реНрд╡рдЪрд╛рд▓рд┐рдд рд░реВрдк рд╕реЗ рд╕реНрдкрд░реНрд╢ рдЙрдкрдХрд░рдгреЛрдВ рдХреЗ рд▓рд┐рдП рд╕реНрд╡рд┐рдЪ рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛ред

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

рдореЗрд░реЗ рдмрд╛рдж рдЖрдиреЗ рд╡рд╛рд▓реЛрдВ рдХреЗ рд▓рд┐рдП, рдпрд╣рд╛рдБ рдЖрдЧреЗ рдХрд╛ рд░рд╛рд╕реНрддрд╛ рд▓рдЧрддрд╛ рд╣реИ https://github.com/LouisBrunner/react-dnd-multi-backend

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

рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ! рдореИрдВ рдЕрдЧрд▓реЗ рд╕рдкреНрддрд╛рд╣ рдЗрд╕ рдкрд░ рдЧреМрд░ рдХрд░реВрдВрдЧрд╛ред

рдореИрдВрдиреЗ рд╕реВрдЪрдХ-рдШрдЯрдирд╛рдУрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддреЗ рд╣реБрдП рдХреБрдЫ рдРрд╕рд╛ рдХрд┐рдпрд╛: рдХреЛрдИ рдирд╣реАрдВ; рдЗрд╕рд▓рд┐рдП рдЖрдЗрдЯрдо рдХреЗ рддрд╣рдд рдЖрдиреЗ рд╡рд╛рд▓реЗ рддрддреНрд╡ рдШрдЯрдирд╛рдУрдВ рдкрд░ рдорд╛рдЙрд╕ рдкрдХрдбрд╝ рд╕рдХрддреЗ рд╣реИрдВ; рдореБрдЭреЗ рдпрд╣ рджреЗрдЦрдиреЗ рдореЗрдВ рджрд┐рд▓рдЪрд╕реНрдкреА рд╣реИ рдХрд┐ рдЗрд╕рд╕реЗ рдирд┐рдкрдЯрдиреЗ рдХреЗ рдФрд░ рдХреНрдпрд╛ рддрд░реАрдХреЗ рд╣реИрдВ

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

рдореИрдВрдиреЗ рдЗрдирдореЗрдВ рд╕реЗ рдХрд┐рд╕реА рднреА рдкреНрд░реЛрдЬреЗрдХреНрдЯ рдкрд░ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд┐рдпрд╛ рд╣реИ, рд▓реЗрдХрд┐рди Googling рдиреЗ рдкрд╛рдпрд╛:

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

рджреВрд╕рд░реЗ рд╢рдмреНрджреЛрдВ рдореЗрдВ рдЕрдЧрд░ Card рдШрдЯрдХ рдХреЛ рдЯрдЪ рдмреИрдХрдПрдВрдб рдХреЗ рд╕рд╛рде рдЦреАрдВрдЪрд╛ рдЬрд╛рддрд╛ рд╣реИ, рддреЛ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛-dnd рдЗрд╕реЗ рдХрд┐рд╕реА рднреА рддрд░рд╣ рд╕реЗ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд░рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдирд╣реАрдВ рдХрд░реЗрдЧрд╛ред рдпрд╣ рдЖрдкрдХреЗ рдРрдк рдХреЗ рд╢реАрд░реНрд╖ рдкрд░ рдХреБрдЫ "рд▓реЗрдпрд░" рдШрдЯрдХ рдХреЛ рдкреНрд░рд╕реНрддреБрдд рдХрд░рдирд╛ рд╣реИред рдпрд╣ рдШрдЯрдХ рдореМрдЬреВрджрд╛ рддрддреНрд╡, рдЗрд╕рдХреА рд╕реНрдерд┐рддрд┐ рдЖрджрд┐ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдЬрд╛рдирдиреЗ рдХреЗ рд▓рд┐рдП рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛-рдбрдВрдб рджреНрд╡рд╛рд░рд╛ рдкреНрд░рджрд╛рди рдХрд┐рдП рдЧрдП DragLayerMixin рдЙрдкрдпреЛрдЧ рдХрд░реЗрдЧрд╛ред рдпрд╣ рддрдп рдХрд░рддрд╛ рд╣реИ рдХрд┐ рдЕрдкрдиреЗ рдкреНрд░рдХрд╛рд░ рдХреЗ рдЖрдзрд╛рд░ рдкрд░ рдЦреАрдВрдЪреЗ рдЧрдП рдЖрдЗрдЯрдо рдХреЛ рдХреИрд╕реЗ рдкреНрд░рд╕реНрддреБрдд рдХрд┐рдпрд╛ рдЬрд╛рдП рдФрд░ рдпрд╣ 100% рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдХреЗ рд░реВрдк рдореЗрдВ рдЕрдЪреНрдЫреА рддрд░рд╣ рд╕реЗ рд╣реИред

var App = React.createClass({
  render() {
    return (
      <div>
       {this.props.activeRouteHandler />
       <DragDropLayer />
      </div>
    );
  }
});

var { DragLayerMixin } = require('react-dnd');

var DragDropLayer = React.createClass({
  mixins: [DragLayerMixin],

  render() {

    // With non-native dragging backend, rendering items in the process of dragging is your responsibility. 
    // It's up to you to use translate3d or top/left, render thumbnails or real components, etc.

    var {
      draggedItem,
      draggedItemType,
      clientX,
      clientY
    } = this.getDragLayerState(); // provided by mixin

    if (!draggedItem) {
      return null;
    }

    return (
      <div style={{zIndex: 10000, pointerEvents: 'none', position: 'absolute'}}>
        {draggedItem &&
          <div style={{transform: `translate3d(${clientX}, ${clientY}, 0)`}}>
            {this.renderItem(draggedItemType, draggedItem)}
          </div>
        }
      </div>
    );
  },

  renderItem(type, item) {

    // It's completely up to the consumer to specify how to render different types

    switch (type) {
    case ItemTypes.Card:
      return <Card title={item.title} />;
    case ItemTypes.List:
      return <img src='thumbnail.jpg' />;
  }
});

BTW рдпрд╣ рджреГрд╖реНрдЯрд┐рдХреЛрдг рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рд╢рд╛рдВрдд рд╕рдВрднрд╛рд╡рдирд╛рдУрдВ рдХреЛ рдЦреЛрд▓рддрд╛ рд╣реИ рдХреНрдпреЛрдВрдХрд┐ _for рдХреБрдЫ рдРрдкреНрд╕_ рдбреНрд░реИрдЧ рд▓реЗрдпрд░ _is_ рдореЗрдВ рдбреНрд░реИрдЧ рдХрд░рдиреЗ рдпреЛрдЧреНрдп рдЖрдЗрдЯрдо рд╢рд╛рдорд┐рд▓ рд╣реИрдВред рдбреНрд░реИрдЧ рд▓реЗрдпрд░ _have рдХреЛ be_ рд╕реЗ рдЕрд▓рдЧ рдирд╣реАрдВ рдХрд░рддреА рд╣реИ, рд╣рд╛рд▓рд╛рдБрдХрд┐, рдпрджрд┐ рдпрд╣ neccessary рд╣реИред

рдЙрди рдРрдкреНрд╕ рдХреЗ рд▓рд┐рдП рдЬрд╣рд╛рдВ рдЖрдЗрдЯрдо рдХреБрдЫ рдХрдВрдЯреЗрдирд░ рдореЗрдВ рдЦреАрдВрдЪреЗ рдЬрд╛рддреЗ рд╣реИрдВ, рдпрд╣ рдХрдВрдЯреЗрдирд░ DragLayerMixin рдЙрдкрдпреЛрдЧ рдХрд░ рд╕рдХрддрд╛ рд╣реИ рдФрд░ рдЗрд╕ рдкреНрд░рдХрд╛рд░ рд╡рд░реНрддрдорд╛рди рдбреНрд░реИрдЧ рд╕реНрдерд┐рддрд┐ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рд╕реАрдЦрддрд╛ рд╣реИ рдФрд░ рд╡рд╛рд╕реНрддрд╡рд┐рдХ рддрддреНрд╡реЛрдВ рдХреЛ рдЦреАрдВрдЪрддрд╛ рд╣реИ:

screen shot 2014-10-28 at 20 30 15

Trello рдЬреИрд╕реЗ рдРрдкреНрд╕ рдХреЗ рд▓рд┐рдП, рдЬрд╣рд╛рдБ рдЖрдЗрдЯрдореЛрдВ рдХреЛ рдЕрд▓рдЧ-рдЕрд▓рдЧ рдХрдВрдЯреЗрдирд░реЛрдВ рдореЗрдВ рд╕реНрдХреНрд░реАрди рдкрд░ рдШрд╕реАрдЯрд╛ рдЬрд╛рддрд╛ рд╣реИ, рд╡рд╣рд╛рдБ DragLayerMixin рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдПрдХ рдЕрд▓рдЧ рдЯреЙрдк-рд▓реЗрд╡рд▓ рдХрдВрдкреЛрдиреЗрдВрдЯ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рдЙрдкрдпреЛрдЧреА рд╣реЛ рд╕рдХрддрд╛ рд╣реИ, рдЬреЛ рд╡рд░реНрддрдорд╛рди рдореЗрдВ рдбреНрд░реИрдЧ рдХреА рдЧрдИ рд╡рд╕реНрддреБ рдХреЗ рд▓рд┐рдП рдкреВрд░реА рддрд░рд╣ рд╕реЗ рд╕реНрдерд┐рдд рд╣реИред

рдЗрд╕рдХреЗ рдмрд╣реБрдд рд╕рд╛рд░реЗ рдЕрд░реНрде рдирд┐рдХрд▓рддреЗ рд╣реИрдВред рд▓рдЧрднрдЧ рдХрд┐рд╕реА рднреА рдмреНрд░рд╛рдЙрдЬрд╝рд░, рдЪрд╛рд╣реЗ рдбреЗрд╕реНрдХрдЯреЙрдк рд╣реЛ рдпрд╛ рдореЛрдмрд╛рдЗрд▓, рд╕реНрдХреНрд░реАрди рдХреЗ рдЖрд╕рдкрд╛рд╕ рдХрд┐рд╕реА рдЖрдЗрдЯрдо рдХреЛ рдЖрд╕рд╛рдиреА рд╕реЗ рдПрдирд┐рдореЗрдЯ рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдПред рдпрд╣ рдЖрд╕рд╛рди рддрдм рдПрдХ рдХрд╛рд░реНрдб рдЪрд▓рддреА рдЬрдм Trello рдХрд░рддрд╛ рд╣реИ рдЬреИрд╕реЗ рд╢рд╛рдВрдд 3 рдбреА рдкреНрд░рднрд╛рд╡ рдЬреЛрдбрд╝рдиреЗ рдХреЗ рд▓рд┐рдП рд╣реЛрдЧрд╛ред

рдпрд╣ рдорд╛рдЙрд╕ рдХрд░реНрд╕рд░ рд╕реЗрдЯ рдХрд░рддреЗ рд╕рдордп рдФрд░ рдЕрдзрд┐рдХ рд▓рдЪреАрд▓реЗ рдкреНрд▓реЗрд╕рд╣реЛрд▓реНрдбрд░ рд░реЗрдВрдбрд░рд┐рдВрдЧ рдХреА рдЕрдиреБрдорддрд┐ рднреА рджреЗрдЧрд╛ ... рдЪреАрдЬреЗрдВ рдЬреЛ рдЖрдк рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рджреЗрд╢реА DND рдПрдкреАрдЖрдИ рдХреЗ рд╕рд╛рде рдирд╣реАрдВ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ

рдореБрдЭреЗ рдмрд╕ рдПрд╣рд╕рд╛рд╕ рд╣реБрдЖ рдХрд┐ рд╣рдо рдмреНрд░рд╛рдЙрдЬрд╝рд░ рдбреА рдПрдВрдб рдбреА рдПрдкреАрдЖрдИ рдХреЗ рд▓рд┐рдП рдпрд╣ "рдбреНрд░реИрдЧ рд▓реЗрдпрд░" рдПрдкреАрдЖрдИ рдЙрдкрд▓рдмреНрдз рдХрд░рд╛ рд╕рдХрддреЗ рд╣реИрдВред рдмрд╕ dragImage рдЗрд╕ рдЙрджрд╛рд╣рд░рдг рдореЗрдВ рдПрдХ рдкрд╛рд░рджрд░реНрд╢реА рдкрд┐рдХреНрд╕реЗрд▓

@ рд▓рд╛рдЗрдирд┐рдХреНрд╕ @ рдХреЗрд▓реАрдорд╛рдереЗрд╡реНрд╕

рдореЗрд░реЗ рдкрд╛рд╕ рдпрд╣рд╛рдВ рдЕрд╡рдзрд╛рд░рдгрд╛ рдХрд╛ рдПрдХ рдкреНрд░рдорд╛рдг рд╣реИ: http://gaearon.github.io/react-dnd/#/drag -around-рдкреНрд░рдпреЛрдЧрд╛рддреНрдордХ

рдЗрд╕реЗ рдкрд▓рдХ рдЭрдкрдХрддреЗ рд╣реА рдЖрдк :-) (рдлрд╝рд╛рдпрд░рдлрд╝реЙрдХреНрд╕ рдореЗрдВ рдХрд╛рдо рдирд╣реАрдВ рдХрд░реЗрдЧрд╛)

рдкреНрд░рд╛рд╕рдВрдЧрд┐рдХ рд╕реНрд░реЛрдд рдХреЛрдб:

https://github.com/gaearon/react-dnd/blob/experiments/examples/_drag-around-experimental/index.js#L14

https://github.com/gaearon/react-dnd/blob/experiments/examples/_drag-around-experimental/DragLayer.js

https://github.com/gaearon/react-dnd/blob/experiments/examples/_drag-around-experimental/Box.js#L69

рдЬреИрд╕рд╛ рдХрд┐ рдЖрдк рджреЗрдЦ рд╕рдХрддреЗ рд╣реИрдВ, рдЙрдкрднреЛрдХреНрддрд╛ рдкрд░ рдирд┐рд░реНрднрд░ рд╣реИ рдХрд┐ рд╡рд╣ рдЗрд╕ рдкрд░ рдбреНрд░реИрдЧ рд▓реЗрдпрд░ рдФрд░ рдШрдЯрдХреЛрдВ рдХреЛ рдЦреАрдВрдЪреЗ, рдЗрд╕рд▓рд┐рдП рдпрд╣ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рд▓рдЪреАрд▓рд╛ рд╣реИред

рдореИрдВ рдЗрд╕ рд╕рдкреНрддрд╛рд╣ рдЗрд╕реЗ рд╕рдкреЛрд░реНрдЯ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рд╕реНрдЯреЗрдкрд┐рдВрдЧ рд╕реНрдЯреЛрди рдХреЗ рд░реВрдк рдореЗрдВ рд╕рдкреЛрд░реНрдЯ рдХрд░рдиреЗ рдХреА рдХреЛрд╢рд┐рд╢ рдХрд░реВрдВрдЧрд╛, рдФрд░ рдЗрд╕рдХреЗ рдмрд╛рдж рдЯрдЪ рдореЛрдб рдХреЗ рд▓рд┐рдП рдЗрд╕реЗ рдХрд░рдирд╛ рдореБрд╢реНрдХрд┐рд▓ рдирд╣реАрдВ рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдПред

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

рдореИрдВ рдбрд┐рдлрд╝реЙрд▓реНрдЯ рдмреИрдХрдПрдВрдб рдХреЗ рд░реВрдк рдореЗрдВ рдПрдЪрдЯреАрдПрдордПрд▓ 5 рдбреА рдПрдВрдб рдбреА рдПрдкреАрдЖрдИ рд░рдЦрдирд╛ рдЪрд╛рд╣рддрд╛ рд╣реВрдВ рдФрд░ рдлрд┐рд░ рдЯрдЪ-рдЖрдзрд╛рд░рд┐рдд / рдореВрд╕рдорд╡-рдЖрдзрд╛рд░рд┐рдд рдмреИрдХрдПрдВрдб рдСрдкреНрдЯ-рдЗрди рдмрдирд╛рддреЗ рд╣реИрдВред

HTML5 D & D рд╕рдмрд╕реЗ рд╕рд░рд▓ рд╣реЛрдЧрд╛ (рдбреНрд░реИрдЧ рд▓реЗрдпрд░ рдХреА рдХреЛрдИ рдЖрд╡рд╢реНрдпрдХрддрд╛ рдирд╣реАрдВ рд╣реИ, рдмреНрд░рд╛рдЙрдЬрд╝рд░ рджреНрд╡рд╛рд░рд╛ рдкреНрд░рдмрдВрдзрд┐рдд рд╕рдм рдХреБрдЫ)ред Mousemove / Touchmove рд╡рд╛рд▓реЗ рдХреЛ рдЪреБрдирдиреЗ рд╕реЗ рдЖрдкрдХреЛ рдбреНрд░реИрдЧ рд▓реЗрдпрд░ рдХреЛ рд▓рд╛рдЧреВ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрдЧреА, рдЬреЛ рдЖрдкрдХреЛ рдкрд╕рдВрдж рд╣реИред

рд╕рдордЭ рдореЗрдВ рдЖрддрд╛ рд╣реИ?

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

рдЗрд╕рд▓рд┐рдП рдореЗрд░рд╛ рдмрд╕ рдПрдХ рдЕрдиреБрд░реЛрдз рдерд╛ рдХрд┐ рдЗрд╕ рдбреНрд░реИрдЧ рдФрд░ рдбреНрд░реЙрдк рдЯрдЪ рдХреЛ рд╕рдХреНрд╖рдо рдмрдирд╛рдпрд╛ рдЬрд╛рдПред рдХрд┐рд╕реА рдХреЛ рднреА рдпрд╣ рдХрд┐рдпрд╛ рд╣реИ рдФрд░ рдпреБрдХреНрддрд┐рдпрд╛рдБ рд╕рд╛рдЭрд╛ рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ?

@Georgette

@nelix рдиреЗ mousemove рдмреИрдХреЗрдВрдб рдкрд░ рдХрд╛рдо рд╢реБрд░реВ рдХрд┐рдпрд╛, рд╣рдо рдЙрд╕рдХреЗ рдмрд╛рдж touchmove рдмреИрдХреЗрдВрдб рдХрд░реЗрдВрдЧреЗред

рдЖрдк рдпрд╣рд╛рдВ рдХрд╛рд░реНрдп рдкреНрд░рдЧрддрд┐ рдкрд░ рджреЗрдЦ рд╕рдХрддреЗ рд╣реИрдВ: https://github.com/nelix/react-dnd/commit/8de7f7fe24c7ae397a971c517dada9323e6c27f0 (рдпрд╣ рдЕрднреА рднреА рдХрд┐рдпрд╛ рдЬрд╛ рд░рд╣рд╛ рд╣реИ рдФрд░ рдЗрд╕ рдмрд┐рдВрджреБ рдкрд░ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдХрд╛рдо рдирд╣реАрдВ рдХрд░рддрд╛ рд╣реИ)ред рд╣рдореЗрдВ рдЕрднреА рднреА рдпрд╣ рдкрддрд╛ рд▓рдЧрд╛рдиреЗ рдХреА рдЬрд╝рд░реВрд░рдд рд╣реИ рдХрд┐ рдХреМрди рд╕реЗ рд╣рд┐рд╕реНрд╕реЗ DragDropMixin рд░рд╣реЗрдВрдЧреЗ рдФрд░ рдЬрд┐рдиреНрд╣реЗрдВ backends/HTML5 (рдФрд░ рдЕрдиреНрдп рдмреИрдХреЗрдВрдб) рдореЗрдВ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред

рдпрджрд┐ рдЖрдк рдЙрд╕ рдкрд░ рдХрд╛рдо рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ, рддреЛ рдЖрдк рдЙрд╕ рдХрдорд┐рдЯ рдХреЗ рд╕рд╛рде рд╢реБрд░реБрдЖрдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ рдФрд░ рдореВрд╕рдорд╡ рдмреИрдХрдПрдВрдб рдХреЛ рд▓рд╛рдЧреВ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рдЬрдм рдпрд╣ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ, рддреЛ рд╕рдорд╛рди рдЯрдЪрдореЙрд╡ рдмреИрдХрдПрдВрдб рдХреЛ рд▓рд╛рдЧреВ рдХрд░рдирд╛ рдХрдард┐рди рдирд╣реАрдВ рд╣реЛрдирд╛ рдЪрд╛рд╣рд┐рдПред

рдХреГрдкрдпрд╛, рдпрджрд┐ рдЖрдк рдЗрд╕ рдкрд░ рдХрд╛рдо рдХрд░рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ, рддреЛ рд╣рдореЗрдВ рдпрд╣рд╛рдВ рдпрд╛ рдЧрдЯрд░ рд░реВрдо рдореЗрдВ рдЕрдкрдбреЗрдЯ рд░рдЦреЗрдВ, рдЗрд╕рд▓рд┐рдП рд╣рдо рджреЛ рдХрд╛рд░реНрдпрд╛рдиреНрд╡рдпрди рдХреЗ рд╕рд╛рде рд╕рдорд╛рдкреНрдд рдирд╣реАрдВ рд╣реЛрддреЗ рд╣реИрдВред

рдпрд╣рд╛рдБ рд╕реНрдкрд░реНрд╢ рд╕рдорд░реНрдерди рдХреА рдЕрд╡рдзрд╛рд░рдгрд╛ рдХрд╛ рдкреНрд░рдорд╛рдг рд╣реИ: https://github.com/gaearon/react-dnd/pull/143

рдЖрдк рдЗрд╕рдХреЗ рд╕рд╛рде рдЦреЗрд▓ рд╕рдХрддреЗ рд╣реИрдВ: http://rawgit.com/gaearon/react-dnd/touch-poc/[email protected]

рдпрд╣ рдбреЗрд╕реНрдХрдЯреЙрдк рдкрд░ HTML5 рдмреИрдХрдПрдВрдб рдФрд░ рдореЛрдмрд╛рдЗрд▓ рдкрд░ рдмреИрдХрдПрдВрдб рдХреЛ рдЯрдЪ рдХрд░рддрд╛ рд╣реИред
рдХреЗрд╡рд▓ рдХрд╕реНрдЯрдо рд░реЗрдВрдбрд░рд┐рдВрдЧ рдЙрджрд╛рд╣рд░рдг рдореЛрдмрд╛рдЗрд▓ рдкрд░ рдбреНрд░реИрдЧ рдкреНрд░рд┐рд╡реНрдпреВ рджрд┐рдЦрд╛рдПрдЧрд╛ред

рдпрд╣ рдХрд╛рдлреА рдЖрд╢рд╛рдЬрдирдХ рд▓рдЧрддрд╛ рд╣реИ! рдпрд╣ рдХрдм рдЙрддрд░ рд╕рдХрддрд╛ рд╣реИ рдЗрд╕ рдкрд░ рдХреЛрдИ рд╡рд┐рдЪрд╛рд░? :)

рдореИрдВ рд╡рд░реНрддрдорд╛рди рдореЗрдВ рдХрд┐рд╕реА рдЕрдиреНрдп рдкреНрд░реЛрдЬреЗрдХреНрдЯ рдореЗрдВ рд╡реНрдпрд╕реНрдд рд╣реВрдВ рдФрд░ рдЬреБрд▓рд╛рдИ рддрдХ рд░рд╣реВрдВрдЧрд╛ред
рдореИрдВ рдЬреБрд▓рд╛рдИ рдпрд╛ рдЕрдЧрд╕реНрдд рдореЗрдВ рдЗрд╕ рдкрд░ рдХрд╛рдо рдХрд░рдиреЗ рдореЗрдВ рд╕рдХреНрд╖рдо рд╣реЛ рд╕рдХрддрд╛ рд╣реВрдВ, рд▓реЗрдХрд┐рди рдореБрдЭреЗ рдЦреБрд╢реА рд╣реЛрдЧреА рдЕрдЧрд░ рдХреЛрдИ рдореБрдЭреЗ рдЗрд╕рдХреЗ рд▓рд┐рдП рдорд╛рд░рддрд╛ рд╣реИ :-)

рдЪреВрдВрдХрд┐ рдЗрд╕ рдзрд╛рдЧреЗ рдореЗрдВ 1.1 рдХрд╛ рдЙрд▓реНрд▓реЗрдЦ рдХрд┐рдпрд╛ рдЧрдпрд╛ рдерд╛ рдФрд░ v1.1.4 рдмрд╛рд╣рд░ рд╣реИред рдореИрдВ рдЕрднреА рд╕реЛрдЪ рд░рд╣рд╛ рд╣реВрдВ рдХрд┐ рдХреНрдпрд╛ рдЙрдкрд░реЛрдХреНрдд рдЕрд╡рдзрд╛рд░рдгрд╛ рдХрд╛ рдкреНрд░рдорд╛рдг рдкрд╣рд▓реЗ рд╕реЗ рд╣реА 1.1.4 рдореЗрдВ рд╢рд╛рдорд┐рд▓ рд╣реИ?

рдирд╣реАрдВред

рдореБрдЭреЗ рдПрдХ рд╕рдЯреАрдХ рд╕рдВрд╕реНрдХрд░рдг рд╕рдВрдЦреНрдпрд╛ рдХрд╛ рдЙрдкрдпреЛрдЧ рдирд╣реАрдВ рдХрд░рдирд╛ рдЪрд╛рд╣рд┐рдП рдХреНрдпреЛрдВрдХрд┐ рдЖрдк рдХрднреА рдирд╣реАрдВ рдЬрд╛рдирддреЗ рдХрд┐ рдЖрдк рдХрдм рдЯрдХрд░рд╛рдПрдВрдЧреЗ :-)

рд╡рд░реНрддрдорд╛рди рдореЗрдВ рдореЗрд░реЗ рдкрд╛рд╕ рдЗрд╕ рдкрд░ рдХрд╛рдо рдХрд░рдиреЗ рдХрд╛ рд╕рдордп рдирд╣реАрдВ рд╣реИ рд▓реЗрдХрд┐рди рдЕрд╡рдзрд╛рд░рдгрд╛ рдХрд╛ рдкреНрд░рдорд╛рдг рдкреАрдЖрд░ рдореЗрдВ рд╣реИред рдореИрдВ рд╢рд╛рдпрдж рд╡рд░реНрддрдорд╛рди рдПрдкреАрдЖрдИ рдХреЛ рдкреНрд░рддрд┐рдмрд┐рдВрдмрд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдкреАрдЖрд░ рдХреЛ рдЕрдкрдбреЗрдЯ рдХрд░реВрдВрдЧрд╛ рдФрд░ рдХрд┐рд╕реА рдХреЛ рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдЗрд╕реЗ рд▓рд╛рдЧреВ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЗрдВрддрдЬрд╛рд░ рдХрд░реВрдВрдЧрд╛ред

рдЖрдЗрдП рдЪрд░реНрдЪрд╛ рдЬрд╛рд░реА рд░рдЦреЗрдВ https://github.com/gaearon/react-dnd/pull/240 рдкрд░ред

FYI рдХрд░реЗрдВ: https://github.com/yahoo/react-dnd-touch-backend

рдореЗрд░реЗ рдмрд╛рдж рдЖрдиреЗ рд╡рд╛рд▓реЛрдВ рдХреЗ рд▓рд┐рдП, рдпрд╣рд╛рдБ рдЖрдЧреЗ рдХрд╛ рд░рд╛рд╕реНрддрд╛ рд▓рдЧрддрд╛ рд╣реИ https://github.com/LouisBrunner/react-dnd-multi-backend

рдореИрдВрдиреЗ рдпрд╣ рд╕реНрдирд┐рдкреЗрдЯ рд▓рд┐рдЦрд╛ рд╣реИ:

function multiBackends(...backendFactories) {
  return function(manager) {
    const backends = backendFactories.map(b => b(manager));
    return {
      setup: (...args) =>
          backends.forEach(b => b.setup.apply(b, args)),
      teardown: (...args) =>
          backends.forEach(b => b.teardown.apply(b, args)),
      connectDropTarget: (...args) =>
          backends.forEach(b => b.connectDropTarget.apply(b, args)),
      connectDragPreview: (...args) =>
          backends.forEach(b => b.connectDragPreview.apply(b, args)),
      connectDragSource: (...args) =>
          backends.forEach(b => b.connectDragSource.apply(b, args)),
    };
  };
}

рдЬреЛ рдореИрдВ рдЗрд╕ рддрд░рд╣ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВ:

DragDropContext(multiBackends(
      ReactDnDHTML5Backend,
      ReactDnDTouchBackend,
  ))

react-dnd-html5-backend рдФрд░ react-dnd-touch-backend рдШрдЯрдирд╛рдУрдВ рдХреЗ рдПрдХ рдирд┐рд░рд╛рд╢рд╛рдЬрдирдХ рд╕реЗрдЯ рдХреЛ рд╕реБрдиреЗрдВред (рдбреНрд░реИрдЧрд╕реНрдЯрд╛рд░реНрдЯ, рдбреНрд░реИрдЧреЗрдВрдб, рдбреНрд░реИрдЧреЗрдВрдЯрд░, рдбреНрд░реИрдЧрд╡реЗрд▓рд╡ рдбреНрд░реИрдЧрдУрд╡рд░, рдФрд░ рдбреНрд░реЙрдк рдмрдирд╛рдо рдЯрдЪрд╕реНрдЯрд╛рд░реНрдЯ, рдЯрдЪреЗрдВрдб рдФрд░ рдЯрдЪрдореЛрд╡)ред

рдХреБрдЫ рдмреБрдирд┐рдпрд╛рджреА рдкрд░реАрдХреНрд╖рдг рдФрд░ рдпрд╣ рдареАрдХ рдХрд╛рдо рдХрд░рддрд╛ рд╣реИ, рдореЗрд░рд╛ рдбреНрд░реИрдЧ рдПрдВрдб рдбреНрд░реЙрдк рдЕрдм рдПрдХ рд╣реА рд╕рдордп рдореЗрдВ рд╕реНрдкрд░реНрд╢ рдФрд░ рдорд╛рдЙрд╕ рдШрдЯрдирд╛рдУрдВ рдХрд╛ рд╕рдорд░реНрдерди рдХрд░рддрд╛ рд╣реИред

рд╡рд╣рд╛рдБ рдХреЛрдИ рдХрд╛рд░рдг рдирд╣реАрдВ рд╣реИ рдХрд┐ рдпрд╣ рдХрд╛рдо рдирд╣реАрдВ рдХрд░реЗрдЧрд╛?

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