Miten Vetää ja Pudottaa HTML-Elementtejä ja Tiedostoja käyttämällä Javascript

tammikuu 25, 2021 admin 0 Comments

määritä pudota vaikutus, seuraavat vaiheet on noudatettava:

5.1. Määrittää Sallita Avattavasta Vaikutus(t) Vedettäviä Elementti se on dragstart Event Handler

Käyttämällä effectAllowed kiinteistön dataTransfer tapahtuma omaisuutta, voit määrittää kaikki drop vaikutukset, jotka voivat olla hakenut, että vedettäviä elementti.

tämä tapahtuu, koska eri pudotuspaikat voidaan määritellä ja eri pudotusefektit voidaan käsitellä pudotuskohtaa kohti.,

seuraava taulukko määrittelee mahdollista effectAllowed kiinteistöjen arvot perustuvat MDN docs:

5.2. Kunkin Pudota Sijainti, Määritellä Pudota Vaikutus(s) se on dragover Event Handler

määriteltävä pudota vaikutus on yksi sallittu vaikutuksia määritetty dragstart event handler lähteen sijainti.,

Kun pudota vaikutus ei ole yksi saa pudota vaikutuksia, se asetetaan yksi saa pudota vaikutuksia.

dragover handler, jossa drop vaikutus olisi määritetty, suoritetaan, kun vetää elementti on kestänyt yli on mahdollista pudota sijainti.

seuraava on esimerkki pisaravaikutusten määrittelystä tietylle pudotuspaikalle.

6) Määritellä Drop Zone (Drop Sijainti)

oletuksena, ei elementti HTML-asiakirjan avulla pisara., Kuitenkin, että voi olla muuttunut ja jotta elementti, drop zone, se on:

ondragover tapahtuman käsittelijä, joka suoritetaan, kun vedettäviä elementti on vedetty yli tämä elementti. Tässä tapauksessa käsittelijä, pudotuspaikan pudotusvaikutus on määritelty kuten aiemmin mainittiin vaiheessa 5.2.
ondrop-tapahtumakäsittelijä, joka on toteutettu, kun vetokelpoinen Elementti pudotetaan vetopaikkaan / – vyöhykkeeseen.

seuraava on esimerkki alkuaineen määrittelemisestä pudotuspaikaksi.,

sekä dragover ja pudota tapahtuman käsittelijät, preventDefault() pitää kutsua, jotta pudota, koska se osoittaa, että pisara on sallittua kyseisessä paikassa.

jos pudotus sallitaan vain tietyissä tilanteissa, joissa käytetään ehtoja, lisätään preventDefault vain, jos pisaran sallimisen edellytykset täyttyvät. Tämä tehdään sen estämiseksi, että elementti olisi pudotusalue, jos edellytykset eivät täyty, jos pudotusta ei pitäisi sallia.,

drop-arvon hylkääminen dataTransfer-ominaisuuden vetotiedon tyypin perusteella on yleinen tapaus. Seuraava esimerkki osoittaa, että sallimalla vain linkkejä pudotetaan drop zone elementti, joka on dragover handler.

7) Käsitellä Elementti on Pisara

Aikana pudota tapahtuma, vedä tietoja tulisi käsitellä. Voit tehdä sen, getData () menetelmä dataTransfer tapahtuma omaisuutta käytetään.,

getData () – menetelmä hakee raahauskohteet, koska tiedon hakemiseen tarvitaan yksi argumentti ja se palauttaa siihen liittyvän merkkijonon arvon.

sallitut vaikutukset ja pudotusominaisuudet auttavat kontrolloimaan käyttäjälle esitettyä palautetta.

tällaisen palautteen käsittely on kehittäjän vastuulla, ja se tulisi toteuttaa drop-tapahtuman käsittelijässä. Esimerkiksi elementin noutaminen ja sen liittäminen toiseen vanhempaan siirtää sen, mutta solmun kopiointi johtaa kopiointiefektiin.,

Jos useita drop vaikutukset määritellään yhden drop zone, dropEffect omaisuutta tulisi käyttää sen määrittämiseksi, joka vetää operaatio oli haluttu tähän nimenomaiseen pudota tapahtuma.

seuraava on esimerkki pisaran käsittelystä.

Joskus saatat on tuettu erilaisia samat tiedot, mutta vain haluavat hakea tarkin tyyppi. MDN docs: n seuraava koodi osoittaa tämän.,

8) Käyttää dragend Tapahtuma Tarkistaa, jos Lasku oli Onnistunut

lopussa vetää toimintaa, dragend tapahtuma tulipaloja lähde elementti. Tapahtuma ampuu, onnistuiko drag vai peruuntuiko se.

jos Haluat tarkistaa, onko vetää operaatio oli onnistunut tai ei, arvo dropEffect voidaan tarkistaa seuraavasti:

Jos dropEffect omaisuuden arvo on ”none” vuonna dragend event handler, niin se tarkoittaa, vedä toiminta on peruutettu.,
muuten pudotusominaisuuden arvo on operaatio, joka tehtiin onnistuneesti.

Hmm, Joten miten tästä on hyötyä?

lähde osan voi käyttää tätä tietoa onnistuneen siirto-operaation poistaa vedetty kohde vanhasta sijainnista.

Demo HTML-Elementti on Vetää & Poista

– Koodi, demo HTML-Elementti on vedä ja pudota

Huomautus: voit myös kloonata hankkeen minun Github täällä.,

1) Detect the Drag & Drop Feature Support in Your Browser

Before using the HTML drag & drop API, add feature detection code to ensure browser support.

The following code is the feature detection code for the HTML drag & drop API from Modernizr.,

2) Määritellä Drop Zone (Drop Sijainti)

oletuksena, ei elementti HTML-asiakirjan avulla pisara. Kuitenkin, että voi olla muuttunut ja jotta elementti, drop zone, se on:

ondragover tapahtuman käsittelijä, joka suoritetaan, kun tiedosto(t) on/ovat raahataan yli pudota sijainti.
ondrop-tapahtumakäsittelijä, joka on toteutettu, kun tiedosto(t) on / pudotetaan pudotuspaikalle.,

Kuten MDN docs:

dragstart ja dragend tapahtumat eivät ole potkut, kun vedät tiedoston selaimen OS.

seuraavassa on esimerkki määritellä elementin pudota sijainti.

3) Käsitellä Tiedosto on Pisara

Kun käyttäjä pudottaa tiedoston(t) drop zone, pisara tapahtuma laukeaa. Pudotustapahtuman aikana tiedosto(t) on käsiteltävä halutulla tavalla.,

päästäksesi jokaiseen pudotettuun tiedostoon, käytä tapahtuman DataTransfer-ominaisuutta päästäksesi käsiksi tiedostoihin. Kun olet käyttänyt pudotettua tiedostoa, käytä TIEDOSTORAJAPINTAA sen käsittelyyn.

Jos selain tukee DataTransferItemList omaisuutta, voit käyttää sitä getAsFile () – metodi sen sijaan käyttää DataTransfer omaisuutta käyttää tiedostoa.

sekä dragover ja pudota tapahtuman käsittelijät, preventDefault() pitää kutsua, jotta pudota, koska se osoittaa, että pisara on sallittua kyseisessä paikassa., Se estää myös tiedoston avaamisen, mikä on oletuskäyttäytyminen, joka tapahtuu pudotettaessa tiedostoa www-sivulle.

seuraavassa esimerkki, MDN docs, osoittaa, jalostus laski tiedostot, joissa vedä kohde ei ole tiedosto ohitetaan., Both possible ways are demonstrated in this

Demo on HTML Element’s Drag & Drop

Note: you can also clone the project from my Github here.