A drag and drop módszer a lehetőségekről szól. Egyszerű HTML5 „drag & drop” felület létrehozása. Szöveg áthúzása egyik alkalmazásból a másikba

Technológia használata drag and drop (drag and drop drop ) lehetővé teszi a felhasználó számára, hogy különböző objektumokat helyezzen át egyikről a másikra, például az egyik lista elemeit a másikra. Ehhez két vezérlőt kell használnia: a mosogatót és a forrást. A vevő az az objektum, amely megkapja a forrásobjektumot (az áthelyezett objektumot).

Az alábbiakban felsoroljuk az objektumok mozgása során bekövetkező eseményeket, azok bekövetkezésének sorrendjében.

OnStartDrag(típusa TStartDragEvent) - a művelet elején, a forrásobjektum által generált. Az eseménykezelőnek átadott paraméterek: DragObject fogadó objektum (TDragObject típus), Forrás objektum (TObject típus).

OnDragOver(TDragOverEvent típus) - vevő objektumot hoz létre, amikor egy húzott objektum van felette. Az eseménykezelőnek átadott paraméterek: fogadó objektum Sender (TObject típus), forrásobjektum Forrás (TObject típus), mozgási állapot Állapot (TDragState típus), X és Y (integer típus) - az egérmutató aktuális koordinátái, Accept ( típusú boolean ) jele az áthelyezési művelet megerősítésének. A mozgási állapot egyértelművé teszi, hogy a mozgatott tárgy a vételi területen van, abban mozog, vagy elhagyta azt. Az átadott paraméterek lehetővé teszik a célobjektum számára, hogy elfogadja vagy elutasítsa a forrásobjektumot. Az Accept paraméter Trye értékre van állítva, ha az áthelyezési műveletet elfogadják, ellenkező esetben pedig False.

onDragDrop (TDragDropEvent típus) - a fogadó objektum generálja, amikor a húzott objektumot ráejtik. Az eseménykezelő átadja az egérmutató aktuális koordinátáit, egy küldő fogadó objektumot (TObject típus), forrás objektum mozgatja a forrást (TObject típus).

onEndDrag (EndDragEvent típusú) – Akkor jelenik meg, amikor a húzási művelet befejeződik. Annak a pontnak az X és Y koordinátái, ahol a forrás küldő objektum és a fogadó célobjektum átadásra kerül az eseménykezelőnek.

A drag and drop létrehozásához elegendő két eseményt megvalósítani: OnDragDrop és OnDragOver, a DragMode tulajdonsággal dmAutomatic. Ellenkező esetben a húzási művelet kezdetét, a BeginDrag metódust kódolnia kell a programozónak.

Az anyag összevonásához a következő alkalmazást hozzuk létre. Helyezze a Panel összetevőt az űrlapra. Állítsa az Object Inspector DragMode tulajdonságát dmAutomatic értékre. Jelöljük ki az űrlapobjektumot, és az Object Inspector segítségével hozzuk létre a következő eseményeket:

Eljárás TForm1.FormDragOver(Küldő, Forrás: TObject; X, Y: Integer; Állapot: TDragState; var Accept: Boolean); kezdődik ha Forrás = Panel1 then Accept:= Igaz else Accept:= False; vége; eljárás TForm1.FormDragDrop(Sender, Source: TObject; X, Y: Integer); kezdődik Panel1.Bal:= X; Panel1.Top:= Y; vége;

Most az alkalmazás elindításával és a panel feletti egérgombra kattintva mozgathatjuk a panelobjektumot az egész űrlapon.

Eredmény: megismerkedtünk a technológiával drag and drop(húzd és vidd) és alkalmazta a gyakorlatban.

Könnyebb valamit elvenni és letenni, mint leírni, hogy mit kell vinni és hova kell tenni. Természetesen egér vagy hasonló eszköz nélkül nem lehet semmit kiválasztani vagy megadni, de a dolgok jelenlegi állása szerint is nagyon természetes és kényelmes a „húzd és vidd” ötlet használata.

Az ötlet hatóköre nem csak az online áruházak, digitális könyvtárak, keresés ill Információs rendszerek, és az alkalmazott szféra is. Az ötlet nagyon jól alkalmazható az interaktívan, programozó közreműködése nélkül létrehozott és karbantartott weboldalak és elemeik fejlesztésében.

Válassza ki, mozgassa és helyezze el - az ötlet természetes és kényelmes. Egyszerűen meglepő, hogy nem akkor született, amikor az egér nélkülözhetetlen számítógép-tartozék lett.

A legkézenfekvőbb példa a termék kiválasztása az online áruházban. Egyszerű, természetes és kényelmes, ha az egérrel átveszi a kívánt terméket és behúzza a kosárba. Fájlok feltöltése: Szintén praktikus ötlet egy dokumentumot a böngészőablakon kívülre vinni és egy oldalelemre helyezni, ezzel elindítva a dokumentum átvitelét a szerverre.

Egy fejlesztő számára a „húzás és vidd” gondolata az oldalelemek manipulálása a címkék koordinátáinak és méretének manuális újraszámítása nélkül, több elem kiválasztásának és igazításának lehetősége, valamint a blokkcímkék oldalainak mozgatása.

HTML és CSS - kiváló nyelvek a címkék és tervezési stílusaik leírása, de ha a fejlesztőnek lehetősége van interaktívan manipulálni az oldalelemeket anélkül, hogy manuálisan újraszámolná a koordinátákat és a méretet, ez kényelmesebbé és hatékonyabbá teszi a munkát.

„Drag and drop”: a fordítás angolról oroszra szó szerint úgy hangzik, mint „húzd és vidd”. A gyakorlatban jobban hangzik és működik: kiválasztott, áthelyezett és elengedett - egyszerű és természetes.

Nagyon egyszerű fájlátvitelt megvalósítani egy oldalon egy oldalra, egy szerverre vagy más célra.

BAN BEN ebben a példában az egér több fájlt kiválasztott az asztalon (bal oldali kép). A kiválasztásnál a bal egérgomb megnyomása megtörtént, és a kiválasztott termék „került” a kosárba. A böngésző maga mutatta meg, hogyan történik ez, írt egy „másolási” tippet, és körvonalakat készített az áthelyezett fájlokról.

Amikor az egér a kosár fölött volt, a látogató elengedte bal gomb egérrel, a „drag and drop” esemény megtörtént, és a webhely oldalán (alsó kép) a JavaScript kód képes volt fogadni és feldolgozni az összes fájlt, amelyet a látogató az oldalnak (oldalnak) adott.

Az eljárást végrehajtó kód nagyon egyszerű. Még egy kezdő fejlesztő is megismételheti bármilyen használati esetben.

Itt a felhasználói felületet két címke képviseli: scPlaceFile (ez maga a kosár, ahová fájlokat kell tenni) és scPlaceFiles (ez a fájlok feldolgozásának eredménye, ebben az esetben listájuk).

Az oldal logikája a következő. Amikor egy oldal betöltődik a böngészőbe, az „ondrop” eseménykezelő hozzá van rendelve a kosárhoz - tedd, a többi esemény blokkolva van, és nem kerül felhasználásra.

Az oldal a megszokott módon működik, de amint a látogató kiválaszt egy fájlt (fájlokat), és a kosár képére, azaz az scPlaceFile címkére húzza, elindul a „fájlok megérkeztek” esemény feldolgozása.

Ez a kezelő egyszerűen megjeleníti a fájlok listáját. Számuk az event.dataTransfer.files.length, az egyes fájlok információi pedig az event.dataTransfer.files[i].name fájlban találhatók. A fogadott adatokkal való teendőket a fejlesztő határozza meg, ebben az esetben a kapott fájlok listája egyszerűen létrejön.

A feldolgozás után az esemény blokkolva van, és nem terjed tovább. Erre azért van szükség, hogy a böngésző ne vegyen részt amatőr tevékenységben, és ne zavarja a kapott információk feldolgozását.

A képek húzással történő feltöltése a szerverre általános gyakorlat ennek a technológiának a használatakor. A fejlesztő általában létrehoz egy fájlfeltöltési űrlapot (1), amely a szokásos módon működik (2). A látogató a megszokott módon kiválaszthat fájlokat és letöltheti azokat.

Ha azonban a látogató az űrlap egy bizonyos helyén „húzást” végez, a fájlnév (fájlok) mező automatikusan kitöltésre kerül.

Ez jó döntés. Természetesen nagyon nehéz beismerni, hogy nincs egér a számítógépen. De jobb a felhasználói felületet a szokásos verzióban és a DnD megvalósításban fejleszteni.

A látogató érdekeinek figyelembe vétele mindig fontos, de a fejlesztő szempontjai is számítanak. A „húzással” nem csak szabvány azt jelenti, hanem az oldalelemeken lévő egéresemények feldolgozásával is.

Folyamatosan felmerül a címkekoordináta-értékek és méretük kiszámításának feladata. Kézi számítás - jó gyakorlatok, de az interaktív lehetőség kényelmesebb. Minden címke mindig téglalap alakú, és az elemek oldalain lévő „egér” események nyomon követésével létrehozhatja azt a lehetőséget, hogy az elemeket automatikusan áthelyezze a kívánt helyre az oldalon, vagy módosítsa azokat.

Az egérkattintási esemény kezelése - a kattintás helyének koordinátáinak emlékezése, például az elem egyik oldala. Az egér mozgatása - az oldal a kívánt irányba mozog. Az egérgomb elengedése - az oldal megáll és a koordinátái megváltoznak. Így megváltoztathatja az elem helyzetét vagy méretét.

Formálisan ez nem „húzd és vidd”, de a hatás hasonló és praktikus. Bármely oldalelemhez univerzális kezelők készítésével jó interaktív eredményt érhet el, felgyorsíthatja a fejlesztést és egyszerűsítheti a kódot.

Az egér a számítógépen és az ujjak az okostelefonon teljesen más megközelítések a felhasználói felület megvalósításához (látogató, fejlesztő). A böngészők közötti kompatibilitás követelménye meglehetősen természetes és modern.

Mindez együttesen megnehezíti az oldalak létrehozását, de a „húzd és vidd” gondolatának standard formájában történő alkalmazásával, eseményeinek felhasználásával, kombinálva ezt az ötletet hétköznapi eseményekkel az elemeken, lehetséges egy olyan mechanizmus megvalósítása hogy melyik oldal létrehozása fog megtörténni vizuálisan.

Most nézzük meg egy elem vagy elemek kiválasztását. A kijelölés ténye egy helyi menü megjelenése, például a cél a kijelöltek igazítása (balra, jobbra, középre), vagy az elemek függőleges vagy vízszintes elosztása ugyanazzal a lépéssel, vagy méretük megváltoztatása (minimális, maximum) .

A koordináták és méretek automatikus újraszámítása előnyösebb, mint a kézi újraszámítás. A kevesebb hiba azt jelenti, hogy a cél gyorsabban megvalósul. Ezenkívül egy böngészőben is létrehozhat egy oldalt, elmentve az elemek helyzetét és méretét. Az oldal megnyitásával okostelefonján javíthatja a koordinátákat és méreteket, és megjegyezheti őket konkrét modell okostelefon vagy böngésző verzió.

Tehát ugyanazon az oldalon, anélkül, hogy manuálisan teljesítené a több böngészőre vonatkozó követelményt, különböző adatok jelennek meg különféle eszközökés különféle böngészőkben.

Azáltal, hogy lehetővé teszi a látogató számára ezen eljárások önálló elvégzését, valamint a szükséges oldalelemek kiválasztását a fejlesztő által biztosítottak közül, a felhasználó véleményének figyelembevételével biztosítható a böngészők közötti kompatibilitás és az oldal szükséges funkcionalitása.

A drag and drop technikák sok éven át fejlődtek. Nem meglepő, hogy a nyílt forráskódú bővítményeket (például a jQueryt) fejlesztő programozók növekvő számával a régi módszerek újjáélednek. A JavaScript-könyvtár nagyon érzékeny, és számos fejlesztést kínál a webtechnológia ezen korszakában.

Ebben az oktatóanyagban elkészítünk egy szkriptet, amellyel dinamikus fogd és vidd téglalapokat hozhat létre webhelyén. A folyamatot a jQuery kezeli. Az ilyen szkriptek időt takarítanak meg azáltal, hogy kész funkciókat biztosítanak! A drag-and-drop könyvtár pedig más projektekben is használható.

Először is készítsünk egy kis weboldalt a projekthez. A projekt mappában létre kell hoznia két „js” és „css” nevű könyvtárat, valamint egy üres fájlt. index.html. A kód nagyon egyszerű lesz, így világos elképzelése van a munkáról, és van értelme a további fejlesztésnek.

Alább található a mi kódunk HTML fájl. fejezetben fej 3 forgatókönyvet adunk. A fő jQuery szkript betöltődik a Google Code szerverről. tartalmazza a style.css stílusfájlunk is, amely a formázás fő tulajdonságait tartalmazza kinézet dokumentumunk.

Drag me Igen, igen. Pontosan én. Engem is húzhatsz ( zIndex: 200, átlátszatlanság: .9 )

P.S.: engem bárhol hagyhatsz!

Belső rész test csak két blokkot helyeznek el div, amelyek mindkét téglalapot tartalmazzák. A kód meglehetősen egyszerű és érthető. Minden téglalapon belül vannak fejlécek az osztálykezelővel és a handler2-vel. Ez azért fontos, mert húzás közben minden téglalap eltérően viselkedik.

A HTML kód nagyon egyszerű. Ha megérted az alapvető jelöléseket, akkor a CSS stílusok sem lesznek nehézek. Főleg meghatározott margók, párnák és színek.

Body,html ( font-family:Calibri, sans-serif; background:#eaf3fb; font-size:12px; height:1000px; line-height:18px; ) p (magasság:30px; )

Kiválasztók body,html csak a bemutató oldalhoz használhatók. És az összes tartalom két húzható téglalapban van elhelyezve.

Dv1 (szélesség: 200 képpont; háttérszín: #eff7ff; keret: 1 képpont tömör #96c2f1; pozíció: abszolút család:Georgia, "Times New Roman", font-size: 1.0em, margó: 5px; margin-bottom: 10px; .dv2 ( background-color:#f6ebfb; ; méret: 1,8 em; vastagság: 15 képpont szín: # 241f24 .dv2 .

Mindkét .dv1 és .dv2 osztály esetében abszolút pozicionálást használunk. Ez nem szükséges, és valószínűleg nem is a leginkább A legjobb mód húzható téglalapok elhelyezéséhez. Példánkban azonban ennek a pozicionálásnak van értelme, hiszen minden alkalommal, amikor az oldalt frissítjük, a téglalapok bizonyos helyekre kerülnek.

A téglalapok betűtípusai és színei is eltérőek, hogy könnyebben látható legyen a különbség.

Egyébként a blokkok címsorai és tartalma szinte azonos. Ha stílusokat szeretne másolni a projektbe, módosítsa a neveket, mielőtt elkezdené. Egyes esetekben ésszerűbb az azonosítók használata az osztályok helyett, például ha egy adott blokkhoz a drag and drop technikát alkalmazzuk.

Két JavaScript fájl tartalmazza a működéséhez szükséges összes kódot. A jQueryvel való munka részleteit mellőzzük, mivel ez meghaladja a lecke kereteit. Figyeljünk a jquery.dragndrop.js fájlra.

A 22. sor határozza meg a Drags függvényt.

$.fn.Drags = function(opts) ( var ps = $.extend(( zIndex: 20, átlátszatlanság: .7, kezelő: null, onMove: function() ( ), onDrop: function() ( ) ), opts );

Ez beállítja a visszatérési változót és az inicializálási adatokat Húzások. Ezt a módszert nagyon gyakran használják, amikor a jQuery-vel dolgozik, hogy átadja a beállításokat más funkcióknak. Belsőleg változókat állítunk be az összes rendelkezésre álló opcióhoz a húzandó téglalapokhoz.

A következő kódrészlet eseménykezelőket tartalmaz a dragndrop változóhoz. Mindkét esemény húzzaÉs csepp függvények hívása eseményparamétereket ad át nekik. Ezek az események akkor következnek be, amikor megnyomja az egérgombot egy objektum húzásához, majd elengedi azt.

Var dragndrop = ( drag: function(e) ( var dragData = e.data.dragData; dragData.target.css(( balra: dragData.left + e.pageX - dragData.offLeft, felül: dragData.top + e.pageY - dragData.offTop )); dragData.handler.css(( kurzor: "mozgatás") (( kurzor: "mozgatás" ) ( var dragData = e.data). .dragData; dragData.oldCss(("átlátszatlanság": "" )); e); $().unbind("mousemove", dragndrop.drag).unbind("egér", dragndrop.drop) )

A funkcióink manipuláltak CSS pozicionálás minden tárgyat. Az objektumok abszolút pozíciójának megváltoztatása nem befolyásolja a kód működését, mivel minden JavaScript-függvény megváltoztatja az objektumhoz meghatározott stílust.

A kód többi része ellenőrzi a kezelőt, és kozmetikai változtatásokat hajt végre más stílusokon. Itt módosíthatja az átlátszóságot, a betűtípust és a betűszínt, vagy új bekezdéseket adhat hozzá.

A második fn.js fájl nagyon egyszerű kódot tartalmaz. Megvárjuk, amíg a dokumentum teljesen betöltődik, majd meghívjuk a függvényeinket. A függvény két példánya van definiálva Húzások, amiről korábban volt szó.

Két mozgatható blokkunk van .dv1 és .dv2 osztályokkal. Ha meg kell hagynia egy mozgatható blokkot, akkor csak el kell távolítania a kód második részét. Egy másik mozgatható blokk hozzáadása szintén egyszerű. Csak hozzá kell adni új funkció ebben a fájlban.

Az első lépés az opciók beállítása a függvény meghívásakor. Be kell állítani a kezelő nevét. Ezzel megadjuk a jQuery-nek, hogy melyik kezelőt használja, amikor az egérgombot megnyomják a dokumentum egy bizonyos területén. A kezelő neve lehet osztály vagy azonosító attribútum.

Az első funkciónk két eseménykezelővel rendelkezik, onMove és onDrop. Mindkettő új függvényeket hív meg, amelyeket változóként ad át az aktuális eseménynek. Ez az a hely, ahol a téglalapban lévő HTML-kódot manipulálják, hogy minden mozgással frissüljön. Ez nagyszerű hatás annak bemutatására, hogyan irányítható egy folyamat egyszerű jQuery események segítségével.

A második függvényben a z-Index és az opacitás paramétereket használjuk. Másokat is hozzáadhat CSS tulajdonságok? de ehhez át kell dolgozni a JavaScript kódot a beállítások ellenőrzéséhez. Például átadhat egy másik betűstílust vagy értékeket egy mozgó téglalap magasságához és szélességéhez - ez egy nagyon érdekes trükk!

Egy kis munkával most egy remek drag and drop felület áll a rendelkezésünkre. A jQuery óriási előnyöket biztosít azoknak a fejlesztőknek, akik szívesen használják a régi módszereket projektjeikben.

Ennek köszönhetően nem csak eseménykezelő funkcióink vannak, hanem új változókat is át tudunk adni a húzható blokkoknak. Ez új lehetőségeket nyit meg a kreativitás előtt. A lecke bemutatója csak egy vázlatot tartalmaz arról, hogy mit lehet tenni ilyen kóddal.

Tehát nézze meg a jQuery dokumentációját a könyvtári funkciók használatához.

A HTML fogd és vidd interfészek lehetővé teszik az alkalmazások számára, hogy a böngészőkben a fogd és vidd funkciókat használják. A felhasználó választhat vonszolható elemeket egérrel, húzza az elemeket a leejthető elemet, és dobja el őket az egérgomb felengedésével. Átlátszó ábrázolása a vonszolható elemek követik a mutatót a húzási művelet során.

Webhelyek, bővítmények és XUL-alkalmazások esetén személyre szabhatja, hogy mely elemek válhatnak belőle vonszolható, a visszajelzés típusa vonszolható elemek termelnek, és a leejthető elemeket.

Ez a HTML Drag and Drop áttekintése tartalmazza az interfészek leírását, az alkalmazáshoz a drag and drop támogatás hozzáadásának alapvető lépéseit, valamint az interfészek interoperabilitási összefoglalóját.

Megjegyzés: Sem dragstart, sem dragend események nem indulnak el, amikor egy fájlt áthúznak a böngészőbe az operációs rendszerből.

Ez a szakasz összefoglalja azokat az alapvető lépéseket, amelyekkel a fogd és vidd funkciót hozzáadhatja egy alkalmazáshoz.

Elem készítése vonszolható megköveteli a draggable attribútum és az ondragstart globális eseménykezelő hozzáadását, amint az a következő kódmintában látható:

függvény dragstart_handler(ev) ( // A célelem"azonosítójának hozzáadása az adatátviteli objektumhoz ev.dataTransfer.setData("text/plain", ev.target.id); ) window.addEventListener("DOMContentLoaded", () => ( // Az elem lekérése id szerint const element = document.getElementById("p1"); // Az ondragstart eseményfigyelő hozzáadása elem.addEventListener("dragstart", dragstart_handler); ));

Ez az elem húzható.

További információért lásd:

A drop esemény kezelője szabadon feldolgozhatja a húzási adatokat alkalmazás-specifikus módon.

Az alkalmazások általában a getData() metódust használják a húzóelemek lekérésére, majd azok megfelelő feldolgozására. Ezenkívül az alkalmazás szemantikája a függvény értékétől függően eltérő lehet