React-dnd: ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ слой пСрСтаскивания ΠžΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Π΅Ρ‚ ΠΊΠ°ΠΊ ΡΡ‚ΠΈΠ»ΡŒ HTML, Ρ‚Π°ΠΊ ΠΈ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ слой

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 16 мая 2017  Β·  3ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: react-dnd/react-dnd

ΠŸΡ€ΠΈΠ²Π΅Ρ‚, Ρƒ мСня ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, ΠΊΠΎΠ³Π΄Π° ΠΌΠΎΠΉ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΈΠΉ слой пСрСтаскивания отобраТаСтся ΠΊΠ°ΠΊ Π² ΠΌΠΎΠ΅ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΡΠΊΠΎΠΌ стилС, Ρ‚Π°ΠΊ ΠΈ Π² стилС, ΠΎΠΏΡ€Π΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠΌ Π² 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 Π² этом ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅ (Π°Ρ…). НачнитС с чистого листа, Π° Π·Π°Ρ‚Π΅ΠΌ добавляйтС ΠΊ Π½Π΅ΠΌΡƒ элСмСнты ΠΎΠ΄ΠΈΠ½ Π·Π° Π΄Ρ€ΡƒΠ³ΠΈΠΌ.

ВсС 3 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Как выглядит ΠΊΠΎΠ΄ ItemDragPreview? Π― столкнулся с этой ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠΎΠΉ ΠΏΡ€ΠΈ ΠΏΠΎΠΏΡ‹Ρ‚ΠΊΠ΅ ΠΎΡ‚Ρ€ΠΈΡΠΎΠ²Π°Ρ‚ΡŒ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ DragSource.

Π£Π±Π΅Π΄ΠΈΡ‚Π΅ΡΡŒ, Ρ‡Ρ‚ΠΎ ItemDragPreview Ρ‚Π°ΠΊΠΆΠ΅ Π½Π΅ являСтся DragSource. Если Π²Ρ‹ управляСтС состояниСм Π² ItemDragPreview, ΠΏΠΎΠΏΡ€ΠΎΠ±ΡƒΠΉΡ‚Π΅ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡ΠΈΡ‚ΡŒ ΠΈ Π΅Π³ΠΎ. Π’ основном ΡΠ±Ρ€ΠΈΡ‚ΡŒ всС, ΠšΠ ΠžΠœΠ• html/jsx Π² этом ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚Π΅ (Π°Ρ…). НачнитС с чистого листа, Π° Π·Π°Ρ‚Π΅ΠΌ добавляйтС ΠΊ Π½Π΅ΠΌΡƒ элСмСнты ΠΎΠ΄ΠΈΠ½ Π·Π° Π΄Ρ€ΡƒΠ³ΠΈΠΌ.

ΠžΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ΡΡ, ΠΌΠ½Π΅ Ρ‚Π°ΠΊΠΆΠ΅ ΠΏΡ€ΠΈΡˆΠ»ΠΎΡΡŒ ΠΈΠ·ΠΌΠ΅Π½ΠΈΡ‚ΡŒ ΠΏΡ€Π΅Π΄Π²Π°Ρ€ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ просмотр пСрСтаскивания Π² ΠΊΠΎΠ½Π½Π΅ΠΊΡ‚ΠΎΡ€Π΅. ВсС Ρ…ΠΎΡ€ΠΎΡˆΠΎ сСйчас

Π£ мСня Ρ‚ΠΎΠΆΠ΅ такая ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΠ°, Ρ‡Ρ‚ΠΎ Π·Π½Π°Ρ‡ΠΈΡ‚ "Π² Ρ€Π°Π·ΡŠΠ΅ΠΌΠ΅"?

Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ