Քաշել և թողնել տեխնոլոգիայի անվանումը թարգմանվում է որպես. Drag-n-Drop տեխնիկան՝ օգտագործելով jQuery: Droppable փոխազդեցության կարգավորում
Քաշել և թողնել հավելվածների միջև տվյալների փոխանակման եղանակներից մեկն է: Փոխանակման այս մեթոդը օգտագործվում է բազմաթիվ ծրագրային հավելվածների կողմից: Օրինակ, շատ հաճախ ֆայլերը և թղթապանակները տեղափոխվում են այս ճանապարհով:
Վիզուալ բաղադրիչի գրադարանը - VCL-ն իրականացնում է Drag&Drop-ի իր սեփական տարբերակը, տեխնոլոգիա, որն ապահովում է ցանկացած հսկիչ տարրերի ընդունում և փոխանցում նույն ձևով: Այս ներքին օգտագործման դեպքում VCL-ը չի մուտք գործում օպերացիոն համակարգ, թեև կապի համար տարբեր հավելվածներպետք է օգտագործել Windows API-ի համապատասխան գործառույթները:
Օգտագործողը սեղմում է ձախ կոճակըմկնիկը, կարող է հսկիչ տարրը (աղբյուրի օբյեկտ) քաշել մեկ այլ տարրի (նպատակակետի օբյեկտ) վրա։ Քաշելու և թողնելու պահերին ստեղծվում են իրադարձություններ, որոնք ծրագիրը պետք է մշակի (իրադարձության ընդունիչը այն տարրն է, որի վրա գտնվում է մկնիկի կուրսորը): Բաղադրիչների DragMode հատկությունը պատասխանատու է տվյալների փոխանակման գործընթացում նրանց մասնակցության համար:
DragMode=dmAutomatic- իրադարձությունները գործարկվում են ավտոմատ կերպով, ծրագրավորողը գրում է միայն համապատասխան իրադարձությունների մշակողների կոդերը:
DragMode=dmManual-ծրագրավորողն ինքը պետք է կազմակերպի բոլոր զանգերը։
Իրադարձությունների քաշում
OnDragOver իրադարձությունտեղի է ունենում, երբ մկնիկի կուրսորը շարժվում է նպատակակետ օբյեկտի վրայով, ինչպես նաև երբ այս օբյեկտի կոճակը բաց է թողնվում:
Իրադարձության պարամետրեր.
Ուղարկող - ստացող օբյեկտ (կուրսորը դրա վերևում է);
Աղբյուր - աղբյուր օբյեկտ;
X,Y - մկնիկի կոորդինատները Sender օբյեկտի հաճախորդի տարածքի համակարգում;
Պետական վիճակ (ունի dsDragEnter երեք արժեքներից մեկը. մկնիկի կուրսորը հայտնվել է տարրի վրայով; dsDragMove կուրսորը շարժվում է տարրի վրայով; dsDragLeave - կուրսորը թողել է տարրը կամ կոճակը բաց է թողնվել տարրի վրայով):
Ընդունելը բուլյան փոփոխական է: Այս փոփոխականում մշակողը պետք է վերադարձնի Source օբյեկտն ընդունելու կամ չընդունելու իր որոշումը:
Օրինակ, Label(Name=Label1) դասի բաղադրիչը պետք է ընդունի միայն Shape (երկրաչափական ձևեր) դասի բաղադրիչներ, այնուհետև դրա մշակիչը կպարունակի շարժական աղբյուրի օբյեկտի ստուգում (Աղբյուր).
void __fastcall TForm1::Label1DragOver(TObject *Sender, TObject *Source,
int X, int Y, TDragState վիճակ, bool & Ընդունել)
Accept=Source->ClassNameIs("TShape");
OnDragDrop իրադարձությունտեղի է ունենում, երբ մկնիկի ձախ կոճակը բացվում է այն տարրի վրա, որը պատրաստ է ստանալու: Դրա ուղարկող, աղբյուր, X և Y պարամետրերն ունեն նույն նշանակությունը, ինչ նախորդ իրադարձությունը: Այս մշակողի բովանդակությունը կախված է նրանից, թե ինչ գործառույթներ է ծրագրավորողը թույլ տալիս օգտվողին կատարել քաշել և թողնել: Սա կարող է լինել օբյեկտների գտնվելու վայրի փոփոխություն, տեղեկատվության փոխանակում և այլն:
Հետևյալ օրինակում առարկաների ֆիզիկական շարժում չկա. Label1 բաղադրիչը ցուցիչ է ստանում դեպի տեղափոխված օբյեկտը (երկրաչափական պատկեր) և կարդում է հատկությունների արժեքները (Բարձրություն, Լայնություն)՝ նկարի պարագիծը հաշվարկելու համար: Հաշվարկի արդյունքը տեղադրվում է Label1-> Caption-ում:
void __fastcall TForm1::Label1DragDrop(TObject *Sender,
TObject *Աղբյուր, միջերես X, միջերես Y)
float p, pi=3.14; int w, h, r, D;
if (String(Source->ClassName())=="TShape")
h=((Tshape *)Աղբյուր)->Բարձրություն;
w= ((Tshape *)Աղբյուր)->Լայնություն ;
D=w; եթե (D > h) D = h;
անջատիչ ((TShape *) Աղբյուր) -> Ձև)
(պատյան strRrecangle:
Label2->Caption = "Rectangle";
Label2->Caption = «Քառակուսի»;
Label2->Caption = «Շրջանակ»;
Label2->Caption = "Ellipse";
p=pi*(3*(w+h)/4-sqrt(w*h)/2);
պատյան strRoundRect:
Label2->Caption = «Կլորացված
ուղղանկյուն»;
r=(D-((TShape*)Աղբյուր)->Գրիչ->
p=2*(w+h)-8*r+2*pi*r;
գործը strRoundSquare:
Label2->Caption="Կլորացված
քառակուսի»;
r=(D-((TShape*)Աղբյուր)->Գրիչ->
p=4*D-8*r+2*pi*r;
p=p/(Form1->PixelsPerInch/2.54);
Label1->Caption = FloatToStr(p);
Երբ քաշելու գործընթացը ավարտվում է, անկախ դրա արդյունքից, սկզբնական օբյեկտը ստանում է OnEndDrag իրադարձություն. Դրա պարամետրերն են.
Ուղարկող - աղբյուրի օբյեկտի ցուցիչ;
Թիրախ - թիրախային օբյեկտի ցուցիչ;
X, Y - կուրսորի կոորդինատները:
Հետևյալ օրինակում փաթաթող բաղադրիչը Shape1 սովորում է թիրախային օբյեկտի անունը (եթե օբյեկտը չի ընդունվում, NULL է փոխանցվում).
void __fastcall TForm1::Shape1EndDrag(TObject *Sender, TObject *Target,
եթե (Թիրախ != NULL)
Label2->Caption =(AnsiString) ((TComponent *) Target)->Անուն;
Երկար ժամանակ JavaScript ֆունկցիաները օգտագործվում էին Drag&Drop ֆունկցիան ստեղծելու համար, սակայն բրաուզերները միշտ չէ, որ կարողացել են ճիշտ ցուցադրել արդյունքը։ HTML 5-ն ունի մի քիչ JavaScript-ի օգնությամբ Drag&Drop-ը խելացիորեն աջակցելու միջոց: Այս հոդվածը մանրամասնում է HTML 5-ում Drag&Drop-ի օգտագործման տեսողական օրինակ:
Քաշել և թողնել իրադարձությունները
Հետևյալը «Քաշել և թողնել» իրադարձություններն են, որոնք կարող եք օգտագործել՝ վերահսկելու քաշել և թողնել գործընթացը.- dragStart. օգտատերը սկսում է տարրը քաշել:
- dragEnter. Քաշվող տարրը հասնում է վերջնական տարրին:
- dragOver. քաշելիս մկնիկի կուրսորը գտնվում է տարրի վրայով:
- dragLeave. մկնիկի կուրսորը թողնում է քաշված տարրը:
- քաշել. կուրսորը շարժվում է քաշելիս:
- անկում. տեղի է ունենում տարրի անկում:
- dragEnd. օգտատերը արձակում է մկնիկի կուրսորը քաշելիս:
Տվյալների փոխանցման օբյեկտ
Այստեղ տեղի է ունենում քաշել և թողնել գործընթացը: Ամենակարևոր պարամետրերը.- dataTransfer.effectAllowed=value. Վերադարձնում է հասանելի գործողության տեսակը՝ ոչ մեկը, պատճենել, պատճենելՀղում, copyMove, հղում, հղումՏեղափոխել, տեղափոխել, բոլորը կամ չնախաստորագրված:
- dataTransfer.setData (ձևաչափ, տվյալներ). ավելացնում է տվյալներ ցանկալի ձևաչափով:
- dataTransfer.clearData (ֆորմատ). մաքրում է տվյալները:
- dataTransfer.setDragImage(տարր, x, y): սահմանում է պատկերը, որը պետք է քաշվի կուրսորի կոորդինատներում (0, 0 - վերին ձախ անկյուն):
- data = dataTransfer.getData (ֆորմատ). վերադարձնում է տվյալները:
Քաշել և թողնել օրինակ
Հիմա եկեք նայենք Drag&Drop-ի օգտագործման տեսողական պարզ օրինակին, որտեղ երկու փոքրիկ կապույտ դիվիզները կարող են տեղափոխվել մեծ կարմիրի վրա, ինչպես նաև վերադարձնել իրենց սկզբնական տեղը:Սկսեք քաշել օբյեկտը
Առաջին հերթին, դուք պետք է ստեղծեք HTML նշում բլոկների համար՝ ավելացնելով draggable հատկանիշը.
Այնուհետև սահմանեք JavaScript-ի մեկնարկի գործընթացի գործառույթը.
dragStart(ev) ֆունկցիան ( ev.dataTransfer.effectAllowed="move"; ev.dataTransfer.setData("Text", ev.target.getAttribute("id")); ev.dataTransfer.setDragImage(ev.target,100,100) վերադարձ ճշմարիտ;)
Առաջին տողում նշվում է քաշել և թողնելու հնարավոր տեսակը՝ տեղափոխել, երկրորդում՝ սահմանում է գործընթացի տվյալները՝ տեսակը (Text) և ID: Երրորդ տողում setDragImage-ը որոշում է կուրսորի դիրքը, այս դեպքում՝ 200x200 պիքսել քառակուսու մեջտեղում։
Ավարտեք օբյեկտը քաշելը
Ձեզ հարկավոր է երեք իրադարձություն սահմանել՝ dragEnter, dragOver և drop.
Բացի այդ, մենք պետք է ավելացնենք JavaScript գործառույթները՝ ձգելու գործընթացը ավարտելու համար՝ որոշելու, թե ինչ պետք է տեղի ունենա տարրերի հետ, երբ կուրսորը թողարկվի.
ֆունկցիա dragEnter(ev) ( event.preventDefault(); return true; ) ֆունկցիա dragOver(ev) ( event.preventDefault();)
Սրանում պարզ օրինակդրված են միայն հիմնական գործողությունները, բայց կարող են ավելացվել մյուսները՝ փոխելով ֆոնի գույնը, ավելացնելով տեքստ և այլն: Հաջորդը եզրափակիչ փուլն է։ Ահա, որտեղ դուք սահմանում եք վերջի քաշման գործողությունը.
Ֆունկցիան dragDrop(ev) ( var data = ev.dataTransfer.getData («Տեքստ»); ev.target.appendChild(document.getElementById(տվյալներ)); ev.stopPropagation(); վերադարձ կեղծ; )
Ինչպես տեսնում եք օրինակից, կապույտ բլոկները քաշելուց հետո կարող են վերադարձվել իրենց սկզբնական տեղը: Բարեբախտաբար, դա շատ հեշտ է անել: Բոլոր գործառույթները հայտարարված են, մնում է ավելացնել հետևյալ կոդը.
Եզրակացություն
Շատ Drag&Drop լուծումներ ստեղծվել են JavaScript գրադարանների միջոցով, և դրանք հաճախ ավելի հեշտ են օգտագործել, քան նկարագրված օրինակը: Այնուամենայնիվ, ամենայն հավանականությամբ, ապագայում HTML5 & JavaScript-ի մի խումբ ավելի ու ավելի կօգտագործվի:Տեխնոլոգիաների օգտագործումը քաշել և թողնել (քաշել և թողնել) թույլ է տալիս օգտվողին տեղափոխել տարբեր օբյեկտներ մեկից մյուսը, օրինակ՝ մի ցուցակի տարրերը մյուսը: Դա անելու համար հարկավոր է օգտագործել երկու հսկիչ՝ լվացարան և աղբյուր: Ստացողն այն օբյեկտն է, որը կստանա սկզբնական օբյեկտը (շարժական օբյեկտ):
Իրադարձությունները, որոնք տեղի են ունենում օբյեկտների շարժման ժամանակ, թվարկված են ստորև՝ ըստ դրանց տեղի ունենալու հերթականության:
OnStartDrag(տեսակ TStartDragEvent) - ստեղծվել է աղբյուրի օբյեկտի կողմից գործողության սկզբում: Իրադարձությունների մշակողին փոխանցված պարամետրեր՝ DragObject ստացողի օբյեկտ (TDragObject տեսակ), Աղբյուրի օբյեկտ (TObject տեսակ):
OnDragOver(տեսակ TDragOverEvent) - ստեղծում է թիրախային օբյեկտ, երբ դրա վերևում տեղադրվում է լողացող օբյեկտ: Միջոցառումների մշակողին փոխանցված պարամետրեր. Ուղարկողի ստացողի օբյեկտ (TObject տեսակ), Աղբյուրի աղբյուրի օբյեկտ (TObject տեսակ), վիճակի շարժման վիճակ (TDragState տեսակ), X և Y (ամբողջ թվի տեսակ) - մկնիկի ցուցիչի ընթացիկ կոորդինատները, Ընդունել (բուլյան տիպը): ) տեղափոխման գործողության հաստատման նշան. Շարժման վիճակը պարզ է դարձնում, թե արդյոք տեղափոխվող առարկան գտնվում է ընդունիչի տարածքում, շարժվում է, թե ոչ: Անցած պարամետրերը թույլ են տալիս ընդունող օբյեկտին ընդունել կամ մերժել աղբյուրի օբյեկտը: Ընդունել պարամետրը դրված է «Փորձել», եթե տեղափոխման գործողությունն ընդունված է, «Սխալ»՝ հակառակ դեպքում:
onDragDrop (տեսակ TDragDropEvent) - Բարձրացվում է նպատակակետ օբյեկտի կողմից, երբ քաշված օբյեկտը գցվում է դրա վրա: Իրադարձությունների մշակողին փոխանցվում են մկնիկի ցուցիչի, Ուղարկողի ստացողի օբյեկտի (TObject տեսակ) և սկզբնական Source շարժման օբյեկտի (TObject տեսակ) ընթացիկ կոորդինատները:
onEndDrag (տեսակ EndDragEvent) - Բարձրացվում է, երբ քաշում գործողությունն ավարտվում է: Այն կետի X և Y կոորդինատները, որտեղ ուղարկող աղբյուրի օբյեկտը և թիրախ ստացողի օբյեկտը փոխանցվում են իրադարձությունների մշակողին:
«Drag and drop» ստեղծելու համար բավական է իրականացնել երկու իրադարձություն՝ OnDragDrop և OnDragOver՝ DragMode հատկությամբ dmAutomatic: Հակառակ դեպքում, շարժման գործողության սկիզբը՝ BeginDrag մեթոդը, պետք է կոդավորվի ծրագրավորողի կողմից:
Նյութը համախմբելու համար մենք կստեղծենք հետևյալ հավելվածը. Տեղադրեք վահանակի բաղադրիչը ձևաթղթի վրա: Սահմանեք Object Inspector-ի DragMode հատկությունը dmAutomatic: Ընտրեք ձևի օբյեկտը և օգտագործեք Object Inspector՝ հետևյալ իրադարձությունները ստեղծելու համար.
Ընթացակարգ TForm1.FormDragOver(Ուղարկող, Աղբյուր՝ TObject; X, Y: Ամբողջ թիվ; Վիճակ՝ TDragState; var Ընդունել՝ Բուլյան); սկսել, եթե Աղբյուր = Panel1, ապա Ընդունել: = Ճիշտ է, այլ Ընդունել: = Սխալ; վերջ; ընթացակարգ TForm1.FormDragDrop(Ուղարկող, Աղբյուր՝ TObject; X, Y: Ամբողջ թիվ); startPanel1.Left:=X; Panel1.Top:=Y; վերջ;
Այժմ, գործարկելով հավելվածը և սեղմելով մկնիկի կոճակը վահանակի վրա, մենք կարող ենք վահանակի օբյեկտը տեղափոխել ամբողջ ձևով:
Եզրակացություն՝ մենք ծանոթացանք տեխնոլոգիային քաշել և թողնել(քաշել և թողնել) և օգտագործել այն գործնականում:
182Այս օրինակում մենք ընտրում ենք div տարր և այն դարձնում շարժական՝ զանգահարելով դրա վրա draggable() մեթոդը. Ինչպես ցույց է տրված ստորև նկարում, բացված փաստաթղթում տարրը վերցնում է իր սովորական դիրքը, բայց դրանից հետո այն կարելի է տեղափոխել մկնիկի ցուցիչով դիտարկիչի պատուհանի ցանկացած վայր.
Քաշել և թողնել ֆունկցիան ինքնին օգտակար է, բայց այն նույնիսկ ավելի օգտակար է, երբ օգտագործվում է Droppable փոխազդեցության հետ միասին, որը նկարագրված է հաջորդիվ:
Քաշվող փոխազդեցությունն իրականացվում է բացառապես հատուկ HTML նշագրման և CSS ոճերի օգտագործման միջոցով: Սա նշանակում է, որ այս ֆունկցիոնալությունը կաշխատի գրեթե ցանկացած բրաուզերում, սակայն դրանով օժտված տարրերը չեն կարողանա աշխատել նմանատիպ բնիկ քաշել և թողնել սարքերի հետ: օպերացիոն համակարգեր.
HTML5 հատկորոշմամբ սահմանված «քաշել և թողնել» գործողությունները սովորաբար իրականացվում են օպերացիոն համակարգի բնիկ մեխանիզմների միջոցով: Եթե դուք օգտագործում եք jQuery UI-ի քաշել և թողնել մեխանիզմը, ապա ավելի լավ է անջատել HTML5 համարժեքները՝ կոնֆլիկտներից խուսափելու համար: Դա անելու համար դրեք փաստաթղթի հիմնական տարրի draggable հատկանիշը false-ի:
Քաշվող փոխազդեցության հարմարեցում
Կան բազմաթիվ հարմարեցման տարբերակներ Քաշվող փոխազդեցության համար: Մեծ մասը կարևոր հատկություններ, որոնք ընդգրկված են հետևյալ բաժիններում, ներկայացված են ստորև բերված աղյուսակում.
| Սեփականություն | Նկարագրություն |
|---|---|
| առանցք | Սահմանափակում է շարժումը որոշակի ուղղություններով: Նախնական արժեքը false է, ինչը նշանակում է, որ սահմանափակումներ չկան, բայց կարող եք նաև նշել «x» արժեքը (տեղափոխվել միայն x առանցքի երկայնքով) կամ «y» (տեղափոխվել միայն y առանցքի երկայնքով) |
| զսպում | Սահմանափակում է լողացող տարրի գտնվելու վայրը էկրանի որոշակի տարածքով: Աջակցվող արժեքների տեսակները նկարագրված են ստորև բերված աղյուսակում՝ համապատասխան օրինակով: Նախնական արժեքը կեղծ է, դա նշանակում է, որ սահմանափակումներ չկան |
| ուշացում | Հատկանշում է, թե որքան ժամանակ է տարրը պետք քաշվի, նախքան այն շարժվի: Լռելյայն արժեքը 0 է, ինչը նշանակում է, որ ուշացում չկա |
| հեռավորությունը | Նշում է այն հեռավորությունը, որը օգտվողը պետք է քաշի տարրն իր սկզբնական դիրքից, նախքան այն իրականում շարժվելը: Նախնական արժեքը 1 պիքսել է |
| ցանց | Ստիպում է տեղափոխված տարրի միացումը ցանցի բջիջներին: Նախնական արժեքը false է, ինչը նշանակում է, որ պարտադիր չէ |
Շարժման ուղղությունների սահմանափակում
Կան մի քանի եղանակներ, որոնցով դուք կարող եք սահմանափակել տարրի շարժումը որոշակի ուղղություններով: Դրանցից առաջինը առանցքի տարբերակի օգտագործումն է, որը թույլ է տալիս սահմանափակել շարժման ուղղությունը X կամ Y առանցքի վրա: Օրինակը ներկայացված է ստորև.
...