Egy egyszerű, húzza és tedd le a jquery-t, egy rendszeres szabadúszó blogot
Egyszerű, húzza és tegye be a jQuery elemet
Vannak esetek, amikor szükség lehet egy húzott elem létrehozására a webes alkalmazásban. Ez nagyszerű funkció, de talán azt szeretné, hogy az elem új helyre maradjon, húzás után. A mai cikket, megtudhatja, hogyan lehet egyszerűen fogd és csatolja egy új helyen egy elem után is újra betölteni az oldalt, a leválasztás és -tárolás X és Y koordinátákat.
Tehát van egy elem az oldalon. Húzza előre és hátra. De amikor az oldal újratöltésre kerül, az elem visszaáll eredeti helyére. És bár szükségünk van arra, hogy húzzuk az elemet, szükséges, hogy elemünket egyszer el kell húzni. Nézzünk egy egyszerű megoldást, amely végrehajtja ezt a funkciót.
HTML és CSS
Kezdjük a HTML-jelöléssel és stílusokkal a példánkhoz. Először is, CSS:
A CSS nagyon egyszerű. A html és a test null tulajdonságait hozzárendeljük a külső és a belső behúzások tisztításához, majd állítsuk be az elemek magasságát, szélességét és egyéb tulajdonságait. - moz-border-radius és -webkit-border-radius - két tulajdonságok, amelyek lehetővé teszik számunkra, hogy hozzon létre, lekerekített sarkú (eddig csak akkor működik, Mozilla Firefox és Safari 3) a tagok számára. Most vessünk egy pillantást a HTML-re:
Most a legérdekesebb! Először nézzük meg az alapfunkciókat, amelyekkel elemeket alkalmazhatunk bizonyos hatásokra. Mindent alaposan elemezzünk.
Ezen belül a fragmentum, hívjuk, az eseménykezelő MouseMove és azt mondják neki: „Amikor az egér mozog, meg a változó koordinátája megegyezik az értéke a jelenlegi helyzetben a blokk #element» Akkor megkapjuk az utolsó rész a blokk # ( »p: utolsó«) és a nyomtatott szöveg, az elem bal (x) és top (y) tulajdonságainak értékeit a szülőobjektumhoz (amely a #glassbox) érinti.
Nos, igen, ez már bonyolultabb. Ebben a töredékben sok dolgot fogunk megtenni. Először üres tömböt állítunk be, majd töltsünk be néhány értéket. Az .mouseup () eseménykezelő hívásával elmondjuk a böngészőnek, hogy nyomon kövesse az eseményt az egérgomb elengedésekor. Megadjuk, hogy a coords változó egy üres tömb, és visszaállítja az értékét a #elementblokk pozíciójára.
Ezután létre kell hoznunk egy listát a két sorból, amelyek együtt lesznek: és coordLeft. a bal és a felső pozíciónak megfelelően. a blokkunk. Használja a string coords.push (item) karakterláncot. kitöltjük a listát egy sor koordinátával. Ezután a változó sorrendet új listaként állítjuk be, amelyben a coords kulcs megfelel a töredékeknek. Most egy kis ajax.
$ .post egy AJAX kéréskezelő, amely egy távoli oldalt tölt be a HTTP POST módszerrel. Ez a funkció a következő paramétereket veszi fel: url, dátum, válasz és adattípus a visszatéréshez. Ebben a példában az updatecoords.php fájl az URL-címünk lesz, mivel pontosan azok a fájlok tartoznak, amelyeken adatokat szeretnénk küldeni. Ezután írjuk le az adat típusát a $ .toJSON függvény használatával. a JSON plug-inben definiált és rendelési változót rendel. mint az adatok, amelyeket vissza kell küldeni.
Tedd ezt a kódot a HTML alatt, közvetlenül a záró testcímke után.
Nos, tegyünk valamit a JQuery-től származó adatokkal. Először létre kell hoznunk egy egyszerű adatbázist a koordináták tárolásához, amelyeket később felhasználunk az elemünk pozíciójának meghatározásához. Ezután szükségünk van a config.php fájlra, amelyben a kapcsolati paramétereket az adatbázisba írjuk, majd a updatecords.php fájlba megyünk.
Itt minden nagyon egyszerű. Az első dolog, hogy ellenőrizzük, hogy az adatokat átmásoltuk-e egy fájlba. Ha ez megtörténik, megadjuk a config.php fájlt, és hozzárendeljük a $ data változót az json_decode értékhez (utólag változó változó); A json_decode a PHP 5.2.0-ban bevezetett PHP függvény, amely lehetővé teszi a JSON karakterlánc dekódolását.
Végezetül
Most, hogy már minden készen áll, hogy a koordinátákat az elem, és adja át a PHP a rekord, meg kell változtatnunk a HTML-jelölést kijelző elem pozíciókat. Ehhez töröljük az egyszerű HTML jelölést, és létrehozzuk a PHP használatával:
Itt egy egyszerű lekérdezést hajtunk végre az adatbázisba, hogy kiválasszuk a sorokat a coords táblázatból. Ezután hívjuk a hurok ciklusát, amely meghatározza a $ row sorokat. Mostantól rendelhetünk változókat az adatbázis minden egyes sorához, és a megfelelő helyen adhatjuk ki azokat.