Как клонировать реагирующий элемент для перетаскивания

Question

Итак, у меня есть список, и теперь я могу перетаскивать элементы (div) из этого списка, используя реагирующее перетаскивание. React-draggable делает исходный элемент перетаскиваемым (имеет смысл), но мне нужно перетащить копию (клон) исходного элемента и сохранить исходный элемент на месте. Итак, у меня есть список сущностей, который содержит элементы, у каждого элемента есть событие, которое вызывает список родительских элементов в надежде клонировать исходный сдвиг и обернуть исходный элемент перетаскиваемым элементом, чтобы сделать его перетаскиваемым. После того, как он будет перетащен / создан, я хочу прикрепить его к другому элементу на экране и поместить начальное положение в центр, где находится курсор мыши. Последнее, что я хочу сделать, - это то, что если элемент упал в "неправильном" месте, он должен оживить (думаю, движение-движение) возврат в исходное положение. Первоначально он был написан на Jquery, и я, очевидно, знаю, как использовать jquery-ui, чтобы все это произошло, но я немного застрял в этом.

   var Scheduler = require('scheduler/components/Scheduler');

    var ShiftTypeDiv = require('scheduler/components/ShiftType');

    var Draggable = ReactDraggable;

    var ShiftTypes = React.createClass({
      getInitialState: function() {
         return ({
          shiftTypes: SchedulerStore.getShiftTypes(),
          clonedItem: null
         })
      },
      handleStart: function (event, ui) {
        console.log('handleStart: ', event);
        console.log('Position: ', ui.position);
      },

      cloneShiftBeforeDrag: function (item) {
        console.log('cloning', item);
        React.cloneElement(item);
        ReactDOM.findDOMNode
        this.setState({
          clonedItem: item
        });
      },

      handleDrag: function (event, ui) {
        console.log('handledrag: ',ui);
        console.log('dragging');
      },

      handleStop: function (event, ui) {
        console.log('handleStop: ', event);
        console.log('Position: ', ui.position);
      },

      render: function() {

        var self = this;

        shiftTypesJSX = this.state.shiftTypes.map(function(shiftType,index) {
        return (
                <ShiftTypeDiv shiftType={shiftType} key={index} cloneShiftBeforeDrag={self.cloneShiftBeforeDrag.bind(null, shiftType)} />
                )
        });

        return (
          <div >
             <div className="box-header">
              <ul>
                <li className="title title-name">Shift Templates</li>
                <li className="title edit-link"></li>
              </ul>
            </div>
              <div className="box-content" data-onboarding-item="2">
                <Draggable
                  handle=".ui-draggable"
                  zIndex={100}
                  onStart={this.handleStart}
                  onDrag={this.handleDrag}
                  onStop={this.handleStop}
                  >
                  <div className="draggable-custom-shift ui-draggable ui-draggable-handle"><strong>New Shift</strong></div>
                </Draggable>
              </div>
            <div className="box-content" id="shift-templates">
              <div className="row-fluid">
                <div id="shift-types-list" className="span12">
                  <div className="input-group shift-type-filter-form">
                    <input type="text" className="span12" id="shift-type-filter" placeholder="Filter shift templates" />
                    <i className="icon-remove-sign" id="remove-shift-type-filter"></i>
                  </div>
                  <div id="shift_types" >
                    {shiftTypesJSX}
                  </div>
                </div>
              </div>
            </div>
          </div>
          )
      }
    })

    module.exports = ShiftTypes;


var Scheduler = require('scheduler/components/Scheduler').default;

var Draggable = ReactDraggable;

var ShiftTypeDiv = React.createClass({
  handleStart: function (event, ui) {
    console.log('cloning');
    this.props.cloneShiftBeforeDrag(this);
  },

  handleDrag: function (event, ui) {
    console.log('handledrag: ',ui);
    console.log('dragging');
  },

  handleStop: function (event, ui) {
    console.log('handleStop: ', event);
    console.log('Position: ', ui);
    this.setState({

    })

  },
  render: function() {
    shiftType = this.props.shiftType;
    return (
      <Draggable
              bounds="body"
              zIndex={100}
              onStart={this.handleStart}
              onDrag={this.handleDrag}
              onStop={this.handleStop}
              position={null}
              >
        <div className="draggable-shift-type ui-draggable ui-draggable-handle" data-shift-type-id={shiftType.id}>
          {shiftType.name} <span dangerouslySetInnerHTML={{__html:shiftType.start_time + '-' + shiftType.end_time}}></span>
        </div>
      </Draggable>
      )
  }
})

module.exports = ShiftTypeDiv;

Answer 1

Поскольку никто не ответил на это, это было мое решение. Когда компонент определяет, что его перетаскивают (например, prop dragged = true), он просто добавляет еще один аналогичный сдвиг. Я до сих пор не пытался реализовать все его "анимационные" части, но могу использовать css, или, возможно, response-motion.

Answer 2

Чтобы клонировать реагирующий элемент, вы можете обратиться к следующему вопросу: как добавить реквизиты в экземпляр компонента в React.js?

Это API:

React.cloneElement(
  element,
  [props],
  [...children]
)