Итак, у меня есть список, и теперь я могу перетащить элементы (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;