ΠΡΠΈΠ²Π΅Ρ, Ρ ΠΌΠ΅Π½Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°, ΠΊΠΎΠ³Π΄Π° ΠΌΠΎΠΉ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΈΠΉ ΡΠ»ΠΎΠΉ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π½ΠΈΡ ΠΎΡΠΎΠ±ΡΠ°ΠΆΠ°Π΅ΡΡΡ ΠΊΠ°ΠΊ Π² ΠΌΠΎΠ΅ΠΌ ΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°ΡΠ΅Π»ΡΡΠΊΠΎΠΌ ΡΡΠΈΠ»Π΅, ΡΠ°ΠΊ ΠΈ Π² ΡΡΠΈΠ»Π΅, ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ Π² HTML. Π ΡΠΎ ΠΆΠ΅ Π²ΡΠ΅ΠΌΡ ΠΌΠ΅Π½Ρ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π°ΡΡ, ΡΡΠΎ Β«setState Π½Π΅ ΠΌΠΎΠΆΠ΅Ρ Π±ΡΡΡ Π²ΡΠ·Π²Π°Π½ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° ΠΎΠ±Π½ΠΎΠ²Π»Π΅Π½ΠΈΡΒ».
ΠΠΎΡ ΠΌΠΎΠΉ ΠΊΠΎΠ΄:
import React from 'react';
import PropTypes from 'prop-types';
import { DragLayer } from 'react-dnd';
import ItemDragPreview from './ItemDragPreview';
const layerStyles = {
position: 'fixed',
pointerEvents: 'none',
zIndex: 200000
};
function getItemStyles(props){
const {initialOffset, currentOffset} = props;
if (!initialOffset || !currentOffset) {
return {
display: 'none'
};
}
let {x,y} = currentOffset;
const transform = `translate(${x}px,${y}px)`;
return{
transform
};
}
class CustomDragLayer extends React.Component{
static propTypes = {
item: PropTypes.object,
itemType: PropTypes.string,
initialOffset: PropTypes.shape({
x: PropTypes.number.isRequired,
y: PropTypes.number.isRequired
}),
currentOffset: PropTypes.shape({
x: PropTypes.number.isRequired,
y: PropTypes.number.isRequired
}),
isDragging: PropTypes.bool.isRequired,
}
renderItem(type,item){
return (<ItemDragPreview ruleitem={item}/>);
}
render(){
const {item,itemType,isDragging} = this.props;
if(!isDragging){
return null;
}
return (
<div style={layerStyles}>
<div style={getItemStyles(this.props)}>
{this.renderItem(itemType,item)}
</div>
</div>
);
}
}
let collect = monitor =>{
return {
item: monitor.getItem(),
itemType: monitor.getItemType(),
currentOffset: monitor.getSourceClientOffset(),
initialOffset: monitor.getInitialSourceClientOffset(),
isDragging: monitor.isDragging()
};
}
export default DragLayer(collect)(CustomDragLayer);
ΠΠΎΡ ΠΏΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅:
ΠΡΠ΅Π΄ΡΠΏΡΠ΅ΠΆΠ΄Π΅Π½ΠΈΠ΅: setState(...): ΠΠ΅Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ ΠΎΠ±Π½ΠΎΠ²ΠΈΡΡ Π²ΠΎ Π²ΡΠ΅ΠΌΡ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠ΅Π³ΠΎ ΠΏΠ΅ΡΠ΅Ρ ΠΎΠ΄Π° ΡΠΎΡΡΠΎΡΠ½ΠΈΡ (Π½Π°ΠΏΡΠΈΠΌΠ΅Ρ, Π²
render
ΠΈΠ»ΠΈ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΎΡΠ΅ Π΄ΡΡΠ³ΠΎΠ³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ°). ΠΠ΅ΡΠΎΠ΄Ρ ΡΠ΅Π½Π΄Π΅ΡΠΈΠ½Π³Π° Π΄ΠΎΠ»ΠΆΠ½Ρ Π±ΡΡΡ ΡΠΈΡΡΠΎΠΉ ΡΡΠ½ΠΊΡΠΈΠ΅ΠΉ ΡΠ²ΠΎΠΉΡΡΠ² ΠΈ ΡΠΎΡΡΠΎΡΠ½ΠΈΡ; ΠΏΠΎΠ±ΠΎΡΠ½ΡΠ΅ ΡΡΡΠ΅ΠΊΡΡ ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΎΡΠ° ΡΠ²Π»ΡΡΡΡΡ Π°Π½ΡΠΈ-ΡΠ°Π±Π»ΠΎΠ½ΠΎΠΌ, Π½ΠΎ ΠΈΡ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠ΅ΡΠ΅ΠΌΠ΅ΡΡΠΈΡΡ Π²componentWillMount
.
ΠΠ½Π΅ ΠΈΠ½ΡΠ΅ΡΠ΅ΡΠ½ΠΎ, ΡΡΠΎ ΠΎΡΠΈΠ±ΠΊΠ° Π½Π° ΠΌΠΎΠ΅ΠΌ ΠΊΠΎΠ½ΡΠ΅ ΠΈΠ»ΠΈ Π² ΠΊΠΎΠ½ΡΠ΅ Π±ΠΈΠ±Π»ΠΈΠΎΡΠ΅ΠΊΠΈ.
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ!
ΠΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΊΠΎΠ΄ ItemDragPreview? Π― ΡΡΠΎΠ»ΠΊΠ½ΡΠ»ΡΡ Ρ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ ΠΏΡΠΈ ΠΏΠΎΠΏΡΡΠΊΠ΅ ΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ DragSource.
Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ ItemDragPreview ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ DragSource. ΠΡΠ»ΠΈ Π²Ρ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ Π² ItemDragPreview, ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΠΎΡΠΊΠ»ΡΡΠΈΡΡ ΠΈ Π΅Π³ΠΎ. Π ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΡΠ±ΡΠΈΡΡ Π²ΡΠ΅, ΠΠ ΠΠΠ html/jsx Π² ΡΡΠΎΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ΅ (Π°Ρ ). ΠΠ°ΡΠ½ΠΈΡΠ΅ Ρ ΡΠΈΡΡΠΎΠ³ΠΎ Π»ΠΈΡΡΠ°, Π° Π·Π°ΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ ΠΊ Π½Π΅ΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΠ΄ΠΈΠ½ Π·Π° Π΄ΡΡΠ³ΠΈΠΌ.
ΠΠΊΠ°Π·ΡΠ²Π°Π΅ΡΡΡ, ΠΌΠ½Π΅ ΡΠ°ΠΊΠΆΠ΅ ΠΏΡΠΈΡΠ»ΠΎΡΡ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡΡ ΠΏΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΡΠΉ ΠΏΡΠΎΡΠΌΠΎΡΡ ΠΏΠ΅ΡΠ΅ΡΠ°ΡΠΊΠΈΠ²Π°Π½ΠΈΡ Π² ΠΊΠΎΠ½Π½Π΅ΠΊΡΠΎΡΠ΅. ΠΡΠ΅ Ρ ΠΎΡΠΎΡΠΎ ΡΠ΅ΠΉΡΠ°Ρ
Π£ ΠΌΠ΅Π½Ρ ΡΠΎΠΆΠ΅ ΡΠ°ΠΊΠ°Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ°, ΡΡΠΎ Π·Π½Π°ΡΠΈΡ "Π² ΡΠ°Π·ΡΠ΅ΠΌΠ΅"?
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
ΠΠ°ΠΊ Π²ΡΠ³Π»ΡΠ΄ΠΈΡ ΠΊΠΎΠ΄ ItemDragPreview? Π― ΡΡΠΎΠ»ΠΊΠ½ΡΠ»ΡΡ Ρ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠΎΠΉ ΠΏΡΠΈ ΠΏΠΎΠΏΡΡΠΊΠ΅ ΠΎΡΡΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ DragSource.
Π£Π±Π΅Π΄ΠΈΡΠ΅ΡΡ, ΡΡΠΎ ItemDragPreview ΡΠ°ΠΊΠΆΠ΅ Π½Π΅ ΡΠ²Π»ΡΠ΅ΡΡΡ DragSource. ΠΡΠ»ΠΈ Π²Ρ ΡΠΏΡΠ°Π²Π»ΡΠ΅ΡΠ΅ ΡΠΎΡΡΠΎΡΠ½ΠΈΠ΅ΠΌ Π² ItemDragPreview, ΠΏΠΎΠΏΡΠΎΠ±ΡΠΉΡΠ΅ ΠΎΡΠΊΠ»ΡΡΠΈΡΡ ΠΈ Π΅Π³ΠΎ. Π ΠΎΡΠ½ΠΎΠ²Π½ΠΎΠΌ ΡΠ±ΡΠΈΡΡ Π²ΡΠ΅, ΠΠ ΠΠΠ html/jsx Π² ΡΡΠΎΠΌ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ΅ (Π°Ρ ). ΠΠ°ΡΠ½ΠΈΡΠ΅ Ρ ΡΠΈΡΡΠΎΠ³ΠΎ Π»ΠΈΡΡΠ°, Π° Π·Π°ΡΠ΅ΠΌ Π΄ΠΎΠ±Π°Π²Π»ΡΠΉΡΠ΅ ΠΊ Π½Π΅ΠΌΡ ΡΠ»Π΅ΠΌΠ΅Π½ΡΡ ΠΎΠ΄ΠΈΠ½ Π·Π° Π΄ΡΡΠ³ΠΈΠΌ.