React - nastavení priorit zobrazení elementu pomoci přetahování

[stromovka56]

Mam v Reactu nasledujici JSON, ktery definuje galerii obrazku:

Kód: [Vybrat]

gallery=[{imageName:"image1",imagePriority:1},
             {imageName:"image2",imagePriority:2},
             {imageName:"image3",imagePriority:3},
             {imageName:"image4",imagePriority:4},
             {imageName:"image5",imagePriority:5},
             {imageName:"image6",imagePriority:6}
]

Obrazky jsou na strance zobrazeny v podobe 2 radku o 3 obrazcich pomoci array.map. Tazenim kazdeho jednotliveho obrazku potrebuji byt schopen zmenit jeho zobrazovaci prioritu/poradi. Asi nejlogictejsi reseni je zjisteni pozicovych hodnot X/Y pro vsechny zobrazene elementy. Nasledovnym pretahovanim jednotlivych obrazku pak tyto hodnoty aktualizovat a nasledovne (onDragStop) radit pole pomoci hodnot X a Y. Pro toto reseni mam ovsem problem se zjistenim pocatecnich hodnot X a Y kazdeho elementu. Aktualne jej zjistuji pomoci "onMouseOver", ktery ovsem v situaci, kdy uzivatel kurzorem ukaze primo na 6 fotografii a zacne ji pretahovat na pozici ctvrte neni volan. Existuje nejaka moznost jak muzu zjistit pocatecni hodnoty X/Y elementu bez interakce uzivatele? Existuje pro tuto funkcionalitu nejake elegantnejsi reseni?

[Reklama]

[fortran1986]

naco potrebujes vediet pozicie X Y? ty len potrebujes vediet ponad ktorym komponentom sa nachadza dragnuty komponentom . a bud ho insertnes pred alebo za ten komponent. Ja som d'n'd v reacte robil uz viac krat a nic s pixelovymi poziciami som tam nemusel riesit.

Ono je to vpodstate velmi jednoduche. Kazdej komponente ktoru chces presuvat nastavis toto

Kód: [Vybrat]

onDragStart={this.handleDragStart}
onDragEnter={this.handleDragOver}
onDragOver={this.handleDragOver}
onDrop={this.handleDrop}
draggable={true}
v handleDragStart si do reduxu ulozis aktualny element a v onDrop ineho lementu si tu hodnotu precitas z reduxu. ak pracujes s polom takv onDrop len presuvas polozky v poli.

a este ta chcem upozornit jednu vec ak na prenasanie dat nepouzivas event.dataTransfer (ale v reacte typicky redux alebo lokalny state) tak ho ajtak treba nastavit (napr na prazdny string) lebo v FF to bez inicializacie nefungovalo:

Kód: [Vybrat]

private handleDragStart = (event: React.DragEvent<HTMLDivElement>) => {
    event.dataTransfer.setData('Text', ''); // nutne nastavit pre FF
    safeInvoke(this.props.onDragStart, this, event);
}

[stromovka56]

heh, netusim proc me to napadalo tak komplikovane... Dekuju za pomoc. Uz mi to funguje