Ամենահեշտ ճանապարհը ինչ-որ բան վերցնելն ու դնելն է, քան գրելը, թե ինչ վերցնել և որտեղ դնել: Իհարկե, առանց մկնիկի կամ նմանատիպ սարքի, դուք չեք կարող որևէ բան ընտրել և ոչինչ նշել, բայց նույնիսկ ներկայիս իրավիճակում «քաշել և թողնել» գաղափարի օգտագործումը շատ բնական և հարմարավետ է:

Գաղափարի կիրառման դաշտը հեռու է միայն առցանց խանութներից, էլեկտրոնային գրադարաններից, որոնման համակարգերից կամ Տեղեկատվական համակարգեր, այլեւ կիրառական ոլորտը։ Գաղափարը շատ կիրառելի է կայքերի և դրանց տարրերի մշակման մեջ՝ ստեղծված և պահպանվող ինտերակտիվ կերպով, առանց ծրագրավորողի մասնակցության։

Գաղափարի նկարագրությունը

Ընտրեք, տեղափոխեք և տեղադրեք - գաղափարը բնական է և հարմար: Զարմանալի է, որ այն չծնվեց, երբ մկնիկը դարձավ համակարգչային անփոխարինելի աքսեսուար:

Ամենաակնառու օրինակը առցանց խանութում ապրանք ընտրելն է: Ցանկալի ապրանքը մկնիկով վերցնելը և գնումների զամբյուղը քարշ տալը պարզ է, բնական և հարմար։ Ֆայլերի վերբեռնում. բրաուզերի պատուհանից դուրս փաստաթուղթ վերցնելը և էջի տարրի վրա տեղադրելը, դրանով իսկ սկսելով փաստաթուղթը սերվեր տեղափոխելը, նույնպես գործնական գաղափար է:

Մշակողի համար «քաշել և թողնել» գաղափարը էջի տարրերի մանիպուլյացիա է առանց պիտակների կոորդինատների և չափերի ձեռքով վերահաշվարկի, մի քանի տարրեր ընտրելու և դրանք հավասարեցնելու, ինչպես նաև բլոկային պիտակների կողմերը տեղափոխելու հնարավորություն:

HTML և CSS - մեծ լեզուներպիտակների և դրանց դիզայնի ոճերի նկարագրությունները, բայց երբ մշակողը կարող է ինտերակտիվ կերպով կառավարել էջի տարրերը՝ առանց ձեռքով վերահաշվարկելու կոորդինատները և չափերը, դա աշխատանքն ավելի հարմարավետ և արդյունավետ է դարձնում:

Հեշտ ֆայլերի փոխանցում

«Քաշել և թողնել». անգլերենից ռուսերեն թարգմանությունը բառացիորեն հնչում է «քաշել և թողնել»: Գործնականում այն ​​ավելի լավ է հնչում և աշխատում՝ ընտրել, փոխանցել և թողարկել՝ պարզ և բնականաբար:

Այն շատ պարզ է կիրառել էջի վրա՝ ֆայլեր փոխանցելով էջ, սերվեր կամ այլ օգտագործման համար:

Այս օրինակում աշխատասեղանի մի քանի ֆայլ ընտրվել են մկնիկի օգնությամբ (ձախ նկար): Ընտրության վրա սեղմվեց մկնիկի ձախ կոճակը և ընտրվածը «գնաց» զամբյուղ: Բրաուզերն ինքն է ցույց տվել, թե ինչպես է դա տեղի ունենում, գրել է «պատճեն» հուշում և ստեղծել ֆայլերի ուրվագծերը, որոնք պետք է տեղափոխվեն:

Երբ մկնիկը դրված էր զամբյուղի վրայից, այցելուն բաց թողեց մկնիկի ձախ կոճակը, տեղի ունեցավ քաշել և թողնել իրադարձությունը, և կայքի էջում (ներքևի նկար) JavaScript կոդը կարողացավ ստանալ և մշակել բոլոր ֆայլերը, որոնք այցելուը: տրամադրվում է էջին (կայքին):

Իրականացման նկարագրություն

Այս ընթացակարգը կատարող կոդը շատ պարզ է. Նույնիսկ սկսնակ մշակողը կարող է կրկնել այն ցանկացած օգտագործման դեպքում:

Այստեղ օգտատիրոջ միջերեսը ներկայացված է երկու պիտակով՝ scPlaceFile (սա հենց զամբյուղն է, որտեղ պետք է տեղադրել ֆայլեր) և scPlaceFiles (սա ֆայլերի մշակման արդյունք է, այս դեպքում՝ դրանց ցանկը)։

Էջի տրամաբանությունը հետևյալն է. Երբ էջը բեռնվում է բրաուզերում, զամբյուղում նշանակվում է «ondrop» իրադարձությունների մշակիչը՝ դնելու համար մնացած իրադարձությունները արգելափակված են և չեն օգտագործվում:

Էջն աշխատում է նորմալ ռեժիմով, բայց հենց որ այցելուն ընտրի ֆայլը (ներ)ը և դրանք քաշի զամբյուղի նկարի վրա, այսինքն՝ scPlaceFile պիտակի վրա, կսկսվի «Ֆայլերը ժամանել» իրադարձության մշակումը։

Այս կարգավորիչը պարզապես ցուցադրում է ֆայլերի ցանկը: Նրանց համարը գտնվում է event.dataTransfer.files.length-ում, իսկ յուրաքանչյուր ֆայլի մասին տեղեկատվությունը event.dataTransfer.files [i] .name-ում: Ինչ անել ստացված տվյալների հետ, որոշում է մշակողը, այս դեպքում ստացված ֆայլերի ցանկը պարզապես ձևավորվում է։

Մշակվելուց հետո միջոցառումն արգելափակվում է և չի տարածվում: Դա անհրաժեշտ է, որպեսզի զննարկիչը ինքնազբաղված չլինի և չխանգարի ստացված տեղեկատվության մշակմանը:

DnD և արտաքին տվյալներ

Պատկերների վերբեռնումը սերվեր՝ օգտագործելով քաշել և թողնել, սովորական պրակտիկա է այս տեխնոլոգիայում: Սովորաբար, մշակողը ստեղծում է ֆայլի վերբեռնման ձև (1), որն աշխատում է սովորական ձևով (2): Այցելուն կարող է ներս մտնել նորմալ ռեժիմընտրեք ֆայլեր և վերբեռնեք դրանք:

Այնուամենայնիվ, եթե ձևաթղթի որոշակի վայրի այցելուն կատարում է «քաշել և թողնել», ապա ֆայլի անվանման դաշտը ավտոմատ կերպով կլրացվի:

Սա լավ որոշում... Իհարկե, շատ դժվար է խոստովանել, որ համակարգչի վրա մկնիկ չկա։ Բայց ավելի լավ է նախագծել օգտատիրոջ միջերեսը կանոնավոր ձևով և DnD-ի իրականացման մեջ:

DnD և ներքին տվյալներ

Այցելուների շահերը հոգալը միշտ կարևոր է, բայց կարևոր են նաև մշակողի մտահոգությունները: Քաշել և թողնել կարող է իրականացվել ոչ միայն ստանդարտ միջոցներով, այլ նաև էջի տարրերի վրա մկնիկի իրադարձությունների մշակմամբ:

Մշտապես առաջանում է պիտակների կոորդինատների արժեքների և դրանց չափերի հաշվարկման խնդիր: Ձեռքով հաշվարկը լավ պրակտիկա է, բայց ինտերակտիվ տարբերակը ավելի հարմար է: Բոլոր թեգերը միշտ ուղղանկյուն են, և տարրերի կողքերում հետևելով մկնիկի իրադարձություններին՝ կարող եք ստեղծել տարրերն ավտոմատ կերպով էջի ճիշտ տեղում տեղափոխելու կամ դրանք փոխելու հնարավորություն:

Մկնիկի կոճակի վրա սեղմելու իրադարձության կառավարում - սեղմման վայրի կոորդինատների պահպանում, օրինակ՝ տարրի կողմերից մեկը: Տեղափոխեք մկնիկը - կողմը շարժվում է ցանկալի ուղղությամբ: Ազատելով մկնիկի կոճակը - կողմը կանգ է առնում և դրա կոորդինատները փոխվում են: Այս կերպ Դուք կարող եք փոխել տարրի դիրքը կամ դրա չափը:

Սա պաշտոնապես «քաշել և թողնել» չէ, բայց էֆեկտը նման է և գործնական: Էջի ցանկացած տարրի համար ունիվերսալ մշակիչներ պատրաստելով, դուք կարող եք լավ ինտերակտիվ արդյունքներ ստանալ, արագացնել զարգացումը և պարզեցնել ձեր կոդը:

Տեսողական և ձեռքով ծրագրավորում

Մկնիկը համակարգչի վրա և մատները սմարթֆոնի վրա բոլորովին այլ մոտեցումներ են օգտատիրոջ միջերեսի (այցելու, մշակող) ներդրման համար: Սա բնական և ժամանակակից պահանջ է բրաուզերների համատեղելիության համար:

Այս ամենը միասին դժվարացնում է էջերի ստեղծումը, սակայն դրա մեջ կիրառելով «քաշել և թողնել» գաղափարը ստանդարտ ձևօգտագործելով իր իրադարձությունները, համատեղելով այս գաղափարը տարրերի սովորական իրադարձությունների հետ, դուք կարող եք իրականացնել մեխանիզմ, որով էջի ստեղծումը տեղի կունենա տեսողականորեն:

Հիմա եկեք նայենք առարկայի կամ իրերի ընտրությանը: Ընտրության փաստը համատեքստային մենյուի տեսքն է, օրինակ, նպատակն է հավասարեցնել ընտրվածը (ձախ, աջ, կենտրոն), կամ տարրերը ուղղահայաց կամ հորիզոնական բաշխել նույն քայլով, կամ փոխել դրանց չափերը (նվազագույնը, առավելագույնը) .

Կոորդինատների և չափերի ավտոմատ վերահաշվարկը նախընտրելի է ձեռքով վերահաշվարկից: Ավելի քիչ սխալներ - նպատակն ավելի արագ է հասնում: Բացի այդ, դուք կարող եք էջ պատրաստել մեկ բրաուզերում, պահպանել տարրերի դիրքն ու չափը։ Բացելով այս էջը սմարթֆոնի վրա՝ կարող եք ուղղել կոորդինատների և չափերի արժեքները և հիշել դրանք կոնկրետ մոդելսմարթֆոնի կամ բրաուզերի տարբերակ:

Այսպիսով, նույն էջը, առանց ձեռքով համապատասխանեցնելու բրաուզերի պահանջներին, տարբեր տվյալներ կունենա ցուցադրելու համար տարբեր սարքերև տարբեր բրաուզերներում:

Եթե ​​այցելուին թույլ տաք ինքնուրույն կատարել այս ընթացակարգերը, ինչպես նաև ընտրել էջի անհրաժեշտ տարրերը մշակողի կողմից տրամադրվածներից, կարող եք ապահովել բրաուզերի համատեղելիությունը և էջի պահանջվող ֆունկցիոնալությունը՝ հաշվի առնելով օգտատիրոջ կարծիքը: .

Քաշել և թողնել ֆունկցիան կարող է օգնել բարձրացնել ձեր iPad-ի աշխատանքը: Ահա թե ինչպես կարող եք օգտագործել այն:

Այսպիսով, դուք կարող եք ֆայլ տեղափոխել մեկ ամպային պահեստավորման ծառայությունից մյուսը, պատճենել տեքստը Safari-ից տեքստի խմբագրման հավելված՝ մեջբերում ավելացնելու կամ ստեղծելու համար: կրկնօրինակումորոշակի լուսանկարներ ֆայլերի պահպանման հավելվածում:

Ինչպես քաշել և թողնել լուսանկարներ, ֆայլեր և տեքստ

1. Հպեք և պահեք լուսանկարը, ֆայլը կամ ընդգծված տեքստը, որը ցանկանում եք քաշել մեկ այլ հավելված:

2. Քաշեք տարրը դեպի ցանկալի վայրը այս հավելվածըկամ մեկ այլ, որը բացել եք «Slide Over» կամ «Split View» ռեժիմում և թողարկել:

Ինչպես քաշել և թողնել մի քանի լուսանկարներ կամ ֆայլեր միաժամանակ

1. Հպեք և պահեք այն լուսանկարներից կամ ֆայլերից մեկը, որոնք ցանկանում եք քաշել:

2. Ընթացիկ տարրը քաշելիս հպեք մեկ այլ լուսանկար կամ ֆայլ, որը նույնպես ցանկանում եք քաշել: Կրկին արեք դա այնքան իրերով, որքան ցանկանում եք տեղափոխել:

3. Քաշեք բոլոր ընտրված օբյեկտները նշանակված վայր մեկ այլ հավելվածում, որը բացել եք Slide Over կամ Split View-ում և բաց թողեք դրանք:

Ինչպես քաշել տեքստը մի հավելվածից մյուսը

1. Հպեք և պահեք տեքստի այն հատվածը, որը ցանկանում եք քաշել՝ այն ընտրելու համար:

2. Օգտագործեք ընտրության կետերը՝ ընտրելու տեքստի մնացած մասը, որը ցանկանում եք քաշել:

3. Սեղմեք և պահեք ընդգծված տեքստը:

4. Քաշեք տեքստը հավելվածի մեջ, որտեղ ցանկանում եք տեղադրել այն և թողարկեք:

Ինչպես փոխել միանգամից մի քանի հավելվածների պատկերակների դասավորությունը՝ օգտագործելով «Քաշել և թողնել»

Թեև iOS-ում քաշել և թողնել գործառույթների մեծ մասն աշխատում է միայն iPad-ի վրա, այս հնարքն իրականում աշխատում է և՛ iPhone-ի, և՛ iPad-ի վրա: Սա թույլ է տալիս կազմակերպել հավելվածների դասավորությունը ձեր հիմնական էկրանին՝ օգտագործելով « Քաշեք և գցեք «դրանք մեկ առ մեկ տեղափոխելու փոխարեն:

1. Սեղմեք և պահեք այն հավելվածի պատկերակը, որը ցանկանում եք փոխել հիմնական էկրանին:

2. Հպեք լրացուցիչ հավելվածներին, որոնք նույնպես ցանկանում եք տեղափոխել:

3. Քաշեք այս հավելվածները դեպի այն էջը կամ թղթապանակը, որտեղ ցանկանում եք, որ դրանք լինեն և թողարկեք դրանք:

182

Այս օրինակում մենք ընտրում ենք div տարրը և այն դարձնում ենք լողացող՝ կանչելով քարշվող () մեթոդ... Ինչպես ցույց է տրված ստորև նկարում, բացված փաստաթղթում տարրը վերցնում է իր նորմալ դիրքը, բայց դրանից հետո այն կարող է մկնիկի ցուցիչով տեղափոխվել բրաուզերի պատուհանի ցանկացած տեղ.

Քաշել և թողնել ֆունկցիան ինքնին օգտակար է, բայց այն ավելի օգտակար է, երբ օգտագործվում է Droppable փոխազդեցության հետ միասին, որը նկարագրված է ստորև:

Interaction Draggable-ն իրականացվում է բացառապես հատուկ HTML նշագրման և CSS ոճերի օգտագործման միջոցով: Սա նշանակում է, որ այս ֆունկցիոնալությունը կաշխատի գրեթե ցանկացած բրաուզերում, սակայն դրանով օժտված տարրերը չեն կարողանա աշխատել նմանատիպ բնիկ քաշել և թողնել գործիքների հետ: օպերացիոն համակարգեր.

HTML5 հատկորոշմամբ սահմանված քաշել և թողնել գործողությունները սովորաբար իրականացվում են օպերացիոն համակարգերի բնիկ մեխանիզմների միջոցով: Եթե ​​դուք օգտագործում եք jQuery UI-ի «Քաշել և թողնել» մեխանիզմը, ապա ավելի լավ է անջատել HTML5 համարժեքները՝ կոնֆլիկտներից խուսափելու համար: Այդ նպատակով փաստաթղթի հիմնական տարրի draggable հատկանիշը սահմանեք false-ի:

Քաշվող փոխազդեցության կարգավորում

Կան բազմաթիվ հարմարեցման տարբերակներ Քաշվող փոխազդեցության համար: Ամենակարևոր հատկությունները, որոնք քննարկվում են հետևյալ բաժիններում, ամփոփված են ստորև բերված աղյուսակում.

Քաշվող փոխազդեցության հատկություններ

Սեփականություն	Նկարագրություն
առանցք	Սահմանափակում է շարժումը կոնկրետ ուղղություններով: Կանխադրվածը false է, ինչը նշանակում է, որ սահմանափակումներ չկան, բայց կարող եք նաև նշել «x» արժեքը (շարժվել միայն X առանցքի երկայնքով) կամ «y» (շարժվել միայն Y առանցքի երկայնքով)
զսպում	Սահմանափակում է լողացող տարրի դիրքը էկրանի որոշակի հատվածում: Աջակցվող արժեքների տեսակները նկարագրված են ստորև բերված աղյուսակում՝ օգտագործելով համապատասխան օրինակը: Լռելյայն կեղծ է, ինչը նշանակում է, որ սահմանափակումներ չկան
ուշացում	Որոշում է, թե տարրը որքան ժամանակ պետք է քաշվի, մինչև այն շարժվի: Լռելյայն 0 է, ինչը նշանակում է, որ ուշացում չկա
հեռավորությունը	Որոշում է այն հեռավորությունը, որը օգտվողը պետք է քաշի տարրն իր սկզբնական դիրքից, նախքան այն իրականում շարժվելը: Նախնականը 1 պիքսել է
ցանց	Ստիպում է տեղափոխված տարրի ճեղքումը ցանցի բջիջներին: Նախնականը կեղծ է, ինչը նշանակում է, որ պարտադիր չէ

Շարժման ուղղությունների սահմանափակում

Կան մի քանի եղանակներ, որոնցով դուք կարող եք սահմանափակել տարրի շարժումը որոշակի ուղղություններով: Առաջինն այն է, որ օգտագործենք առանցքի տարբերակը՝ սահմանափակելու շարժման ուղղությունը դեպի X կամ Y առանցքի: Օրինակը ներկայացված է ստորև.

...

Գործարկման օրինակ

Այս օրինակում մենք սահմանում ենք երկու div տարր, ընտրում դրանք օգտագործելով jQueryև կանչել քաշվող () մեթոդը: Օբյեկտը փոխանցվում է այս մեթոդին որպես արգումենտ, որն ի սկզբանե սահմանափակում է երկու div-ների շարժումը դեպի X առանցքի ուղղությամբ: Այնուհետև կիրառելով jQuery filter () մեթոդը, մենք կարող ենք ընտրել dragV տարրը առանց jQuery-ի ամբողջ ընթացքում նորից որոնելու: փաստաթուղթը և դրեք այն շարժման մեկ այլ թույլատրելի ուղղության վրա՝ Y առանցքի երկայնքով, որը մեզ տալիս է փաստաթուղթ, որում մի div կարող է քաշվել միայն ուղղահայաց, իսկ մյուսը միայն հորիզոնական: Արդյունքը ցույց է տրված նկարում.

Տարրի շարժման տիրույթի սահմանափակում

Կարող եք նաև սահմանափակել էկրանի այն տարածքը, որտեղ կարող է տարրը քաշվել: Դրա համար օգտագործվում է զսպման տարբերակը: Արժեքի ձևաչափերը, որոնք կարող են նշվել այս տարբերակում, նկարագրված են ստորև բերված աղյուսակում.

Ստորև ներկայացված է զսպման տարբերակի օգտագործման օրինակ.

...

Գործարկման օրինակ

Այս օրինակում երկու տարրերի շարժումը սահմանափակված է այնպես, որ դրանք կարող են միայն ներս քաշվել մայր տարր, որը ֆիքսված չափի դիվ. Լողացող div-ներից մեկի համար՝ օգտագործելով առանցքի տարբերակը լրացուցիչ սահմանափակում, որն այն է, որ այն կարող է միայն հորիզոնական շարժվել մայր տարրի ներսում: Արդյունքը պատկերված է նկարում.

Տարրերի ցանցի բջիջներ տեղափոխելու ունակության սահմանափակում

Ցանցային տարբերակը թույլ է տալիս տեղադրել լողացող տարրի խարիսխը ցանցի բջիջներին: Այս տարբերակը որպես արժեք ընդունում է երկու տարրերի զանգված, որոնք սահմանում են ցանցի բջիջների լայնությունն ու բարձրությունը պիքսելներով: Ցանցային տարբերակի օգտագործման օրինակը ներկայացված է ստորև.

...

Գործարկման օրինակ

Այս օրինակն ունի ցանց՝ 100 պիքսել լայնությամբ և 50 փիքսել բարձրությամբ բջիջներով: Երբ տարր եք քաշում, այն «ցատկում» է մի (անտեսանելի) բջիջից մյուսը: Կտրուկի էֆեկտը փոխազդեցության ֆունկցիոնալության օգտագործման շատ լավ օրինակ է, բայց դժվար է այն փոխանցել սքրինշոթերի միջոցով:

Դուք կարող եք ստեղծել ճեղքման էֆեկտ միայն մեկ ուղղությամբ՝ Ազատ շարժման առանցքը դնելով 1-ի: Օրինակ, եթե ցանցի ընտրանքը սահմանեք արժեք, տարրը կկտրվի մինչև 100 պիքսել լայնությամբ ցանցի բջիջներ, երբ այն հորիզոնական տեղափոխվի, բայց այն ազատ շարժվել ուղղահայաց:

Տեղափոխման ուշացում

Երկու տարբերակ կա, որոնք թույլ են տալիս հետաձգել տեղափոխվող տարրը քաշելիս: Հետաձգման տարբերակը կարող է օգտագործվել միլիվայրկյաններով սահմանելու համար, որ օգտագործողը պետք է քաշի մկնիկը նախքան տարրը իրականում տեղափոխվի: Մեկ այլ տեսակի ուշացում տրամադրվում է հեռավորության տարբերակով, որը որոշում է հեռավորությունը պիքսելներով, որ օգտագործողը պետք է քաշի մկնիկի ցուցիչը մինչև տարրը հաջորդի:

Երկու կարգավորումների օգտագործման օրինակը ներկայացված է ստորև.

...

Գործարկման օրինակ

Այս օրինակում կան երկու շարժական տարրեր, որոնցից մեկի ուշացումը նշված է ուշացման տարբերակի միջոցով, իսկ մյուսը՝ հեռավորության ընտրանքով:

Հետաձգման տարբերակով նշված ուշացման դեպքում օգտագործողը պետք է որոշակի ժամանակ քաշի նախքան տարրը իրականում տեղափոխելը: Այս օրինակում այս միջակայքի տեւողությունը 1000 ms է: Այս պահին ամենևին էլ անհրաժեշտ չէ մկնիկը տեղափոխել, բայց ամբողջ ուշացման ընթացքում մկնիկի կոճակը պետք է սեղմված մնա, որից հետո մկնիկը շարժելով կարելի է տարրը տեղափոխել։ Պահելու ժամանակը լրանալուց հետո տեղափոխվող տարրը կհայտնվի մկնիկի ցուցիչի դիրքում՝ հաշվի առնելով նախկինում քննարկված ցանցի, տարածաշրջանի և առանցքի տարբերակների կողմից սահմանված սահմանափակումները:

Հեռավորության տարբերակը նման ազդեցություն ունի, բայց այս դեպքում օգտագործողը պետք է մկնիկի ցուցիչը քաշի առնվազն նշված թվով պիքսելներ տարրի մեկնարկային վայրից ցանկացած ուղղությամբ: Այնուհետև տեղափոխվող տարրը ցատկելու է ցուցիչի ներկայիս վայրը:

Եթե ​​դուք կիրառեք երկու կարգավորումները նույն տարրի վրա, ապա տեղափոխված տարրը չի շարժվի այնքան ժամանակ, քանի դեռ չեն բավարարվել հետաձգման երկու չափանիշները, այսինքն. մինչև փորձ արվի քաշել տարրը նշված ժամանակով և մինչև մկնիկի ցուցիչը տեղափոխի նշված թվով պիքսելներ։

Քաշվող փոխազդեցության մեթոդների օգտագործումը

Բոլոր մեթոդները, որոնք սահմանված են Draggable-ի փոխազդեցությունների համար, այն մեթոդների հիմնական փաթեթի մի մասն են, որոնք դուք արդեն տեսել եք վիջեթները դիտելիս: Draggable փոխազդեցությանը հատուկ մեթոդներ չեն տրամադրվում, ուստի մենք դրանք մանրամասն չենք լուսաբանելու: Հասանելի մեթոդների ցանկը ներկայացված է ստորև բերված աղյուսակում.

Քաշվող փոխազդեցության իրադարձությունների օգտագործումը

Draggable Interaction-ն աջակցում է իրադարձությունների մի պարզ շարք՝ ծանուցելու համար, երբ տարրը քաշվում է: Այս իրադարձությունները նկարագրված են ստորև բերված աղյուսակում.

Ինչպես վիդջեթների իրադարձությունների դեպքում, դուք նույնպես կարող եք արձագանքել այս իրադարձություններին: Ստորև ներկայացված է մեկնարկի և դադարեցման իրադարձությունների կառավարման օրինակ.

...

Գործարկման օրինակ

Այս օրինակը օգտագործում է սկզբի և վերջի իրադարձությունները՝ տարրի տեքստային բովանդակությունը փոխելու համար, երբ այն քաշվում է: Այս հնարավորությունը պայմանավորված է նրանով, որ Draggable փոխազդեցությունն իրականացվում է բացառապես HTML-ի և CSS-ի միջոցով. դուք կարող եք օգտագործել jQuery՝ փոխելով լողացող տարրի վիճակը նույնիսկ այն ժամանակ, երբ այն շարժվում է էկրանով:

Droppable փոխազդեցության օգտագործումը

Որոշ իրավիճակներում տարրը միայնակ քաշելու և թողնելու հնարավորությունը կարող է բավարար լինել, բայց այն առավել օգտակար է, երբ օգտագործվում է Droppable փոխազդեցության հետ համատեղ:

Նյութերը, որոնց վրա կիրառվել է Droppable փոխազդեցություն (առարկաներ ստացող), ձեռք են բերում «Droppable» փոխազդեցության միջոցով ստեղծված լողացող տարրեր ընդունելու ունակություն:

Ստացող իրերը ստեղծվում են օգտագործելով droppable () մեթոդբայց օգտակար ֆունկցիոնալություն ստանալու համար դուք պետք է ստեղծեք իրադարձությունների մշակիչներ այս տեսակի փոխազդեցության համար սահմանվածներից: Հասանելի իրադարձությունները ներկայացված են ստորև բերված աղյուսակում.

Droppable փոխազդեցության իրադարձություններ

Իրադարձություն	Նկարագրություն
ստեղծել	Առաջանում է, երբ Droppable փոխազդեցությունը կիրառվում է տարրի վրա
ակտիվացնել	Դա տեղի է ունենում, երբ օգտվողը սկսում է քաշել լողացող տարրը
ապաակտիվացնել	Դա տեղի է ունենում, երբ օգտվողը դադարում է քաշել լողացող տարրը
ավարտվել է	Առաջանում է, երբ օգտատերը քաշում է լողացող տարրը ընդունող տարրի վրայով (սակայն ենթադրելով, որ մկնիկը դեռ ազատված չէ)
դուրս	Առաջանում է, երբ օգտատերը լողացող տարրը քաշում է ընդունող տարրից դուրս
անկում	Առաջանում է, երբ օգտագործողը լողում է ստացող տարրի վրա

Ստորև ներկայացված է պարզ ստացող տարրի ստեղծման օրինակ՝ մեկ կաթիլ իրադարձությունների մշակմամբ.

...

Գործարկման օրինակ

Այս օրինակը փաստաթղթին ավելացնում է div տարր՝ տեքստային բովանդակությամբ, որը ներկայացված է «Leave here» տողով։ Մենք ընտրում ենք այս տարրը jQuery-ի միջոցով և կանչում droppable () մեթոդը՝ փոխանցելով այն կարգավորումների օբյեկտ, որը սահմանում է կարգավորիչ անկման իրադարձության համար։ Այս իրադարձության պատասխանը լողացող տարրի տեքստը փոխելն է՝ օգտագործելով տեքստ () մեթոդը:

Այս օրինակում ստեղծված քաշել և թողնել փոխազդեցությունը շատ հիմնական է, բայց այն հնարավորությունները բացատրելու հարմար համատեքստ է տալիս: Միասին աշխատելփոխազդեցություններ Քաշվող և Ընկնող: Քաշել և թողնել գործընթացի տարբեր փուլերը պատկերված են նկարում.

Ամեն ինչ շատ պարզ է թվում: Մենք քաշում ենք լողացող տարրը, մինչև այն գտնվում է ընդունող տարրի վրայով և բաց թողնում այն: Գցվող տարրը մնում է այնտեղ, որտեղ թողվել է, և դրա տեքստի բովանդակությունը փոխվում է՝ ի պատասխան անկման իրադարձության: Հետևյալ բաժինները ցույց են տալիս, թե ինչպես օգտագործել այլ Droppable փոխազդեցության իրադարձություններ՝ օգտատիրոջ փորձը բարելավելու համար:

Ընդգծելով թիրախ ստացող օբյեկտը

Օգտագործելով իրադարձությունների ակտիվացումը և անջատումը, դուք կարող եք ընդգծել թիրախ ստացող օբյեկտը, երբ օգտվողը սկսում է քաշելու գործընթացը: Շատ իրավիճակներում այս գաղափարը շատ արդյունավետ է, քանի որ այն օգտվողին տալիս է հուսալի նշում, թե որ տարրերն են «քաշել և թողնել» մոդելի մաս: Համապատասխան օրինակը տրված է ստորև.

... $ (գործառույթ () ($ («# քաշել»). քաշել (); ")), ակտիվացնել՝ ֆունկցիան () ($ (" # droppable "). css ((սահմանը՝ «միջին կրկնակի կանաչ», ֆոնի գույնը՝ «թեթևԿանաչ»)), ապաակտիվացնել՝ ֆունկցիան () ($ (" # droppable"): ") .css (" սահման "," ") .css (" background-color "," ");)));)); ... Գործարկման օրինակ

Հենց որ օգտատերը սկսում է տարրը քաշել, ակտիվացնելու իրադարձությունը գործարկվում է, որը կապված է մեր ստացող տարրի հետ, և մշակող ֆունկցիան օգտագործում է css () մեթոդը փոխելու համար: CSS սահմանային հատկություններև այս տարրի ֆոնի գույնը: Արդյունքում թիրախ ստացող տարրը ընդգծվում է՝ օգտատիրոջը ցույց տալով, որ դրա և լողացող տարրի միջև կա հարաբերություն:

Անջատման իրադարձությունն օգտագործվում է ստացող տարրից CSS հատկության արժեքները հեռացնելու և այն իր սկզբնական վիճակին վերացնելու համար, հենց որ օգտատերը թողարկի մկնիկի կոճակը: (Այս իրադարձությունը տեղի է ունենում, երբ տարրի քաշումը դադարում է, անկախ նրանից՝ քաշվող տարրը պահվում է ընդունող տարրի վրա, թե ոչ): Այս գործընթացը պատկերված է նկարում.

Overlapping Element Handling

Քաշել-թողնելը կարող է բարելավվել՝ ավելացնելով իրադարձությունների կառավարումը: Over-ի իրադարձությունը տեղի է ունենում, երբ լողացող տարրի 50%-ը գտնվում է ընդունող տարրի ցանկացած մասի վրա: Դուրս գալու իրադարձությունը տեղի է ունենում, երբ նախկինում համընկնող տարրերն այլևս չեն համընկնում: Այս իրադարձությունների արձագանքի օրինակը ներկայացված է ստորև.

$ (ֆունկցիա () ($ («# քաշել»). քաշել (); , ակտիվացնել՝ ֆունկցիան () ($ («# droppable»). css ((սահմանը՝ «միջին կրկնակի կանաչ», ֆոնի գույնը՝ «թեթևԿանաչ»));), ապաակտիվացնել՝ ֆունկցիան () ($ («# droppable»): css («սահման», «») .css («background-color», «»);), over: ֆունկցիա () ($ («# droppable»)). «կարմիր»);), դուրս՝ ֆունկցիա () ($ («# droppable»). css («սահման», «») .css («ֆոնային գույն», «»);)));) ); Գործարկման օրինակ

Այստեղ օգտագործվում են նույն կարգավորիչի գործառույթները, ինչպես նախորդ օրինակում, բայց այս դեպքում դրանք կապված են ավարտված և ավարտված իրադարձությունների հետ: Երբ լողացող տարրի առնվազն 50%-ը համընկնում է ընդունող տարրի հետ, այն շրջանակվում է և դրա ֆոնի գույնը փոխվում է, ինչպես ցույց է տրված.

Նշված 50% սահմանաչափը կոչվում է հանդուրժողականության շեմ, որը կարող է սահմանվել ընդունող տարրի ստեղծման ժամանակ, ինչպես ցույց է տրված ստորև:

Droppable փոխազդեցության կարգավորում

Droppable-ն ունի փոխազդեցության մի շարք հատկություններ, որոնք դուք կարող եք փոխել՝ հարմարեցնելու իր վարքագիծը: Այս հատկությունները թվարկված են ստորև բերված աղյուսակում.

Ընկնող փոխազդեցության հատկություններ

Սեփականություն	Նկարագրություն
անաշխատունակ	Եթե ​​այս տարբերակը ճշմարիտ է, ապա Droppable փոխազդեցության գործառույթն ի սկզբանե անջատված է: Նախնականը կեղծ է
ընդունել	Նեղացնում է լողացող տարրերի շարքը, որոնց կպատասխանի ստացող տարրը: Նախնականը * է, այն համապատասխանում է ցանկացած տարրի
ակտիվ դաս	Սահմանում է դաս, որը նշանակվելու է ի պատասխան ակտիվացման իրադարձության և հեռացնելու ի պատասխան ապաակտիվացման իրադարձության
hoverClass	Սահմանում է դաս, որը պետք է նշանակվի՝ ի պատասխան ավարտված իրադարձության և հեռացվի՝ ի պատասխան ավարտված իրադարձության
հանդուրժողականություն	Նշում է համընկնման նվազագույն աստիճանը, որի դեպքում տեղի է ունենում over-ի իրադարձությունը

Թույլատրված լողացող իրերի սահմանափակում

Դուք կարող եք սահմանափակել լողացող տարրերի շարքը, որոնք կընդունվեն Droppable-ի փոխգործունակության գործառույթ ունեցող տարրի կողմից՝ օգտագործելով ընդունելի տարբերակը: Ընդունման տարբերակը պետք է դրվի ընտրիչի վրա: Դրա արդյունքում Droppable փոխազդեցության իրադարձությունները տեղի կունենան միայն այն դեպքում, եթե հեռացվող տարրը համապատասխանի նշված ընտրիչին: Համապատասխան օրինակը տրված է ստորև.

...

Գործարկման օրինակ

Այս օրինակում կան երկու լողացող տարրեր՝ drag1 և drag2 անուններով: Ստացող տարրը ստեղծելիս օգտագործվում է ընդունելի տարբերակը, որով նշում ենք, որ ընդունելի float տարր կլինի միայն drag1-ը։

Երբ քաշում եք drag1-ը, կտեսնեք նույն ազդեցությունը, ինչ նախորդ օրինակներում: Ակտիվացնել, ապաակտիվացնել, ավարտվել և դադարեցնել իրադարձությունները համապատասխան ժամանակներում կաշխատեն ընդունող տարրի վրա: Միևնույն ժամանակ, եթե քաշեք drag2 տարրը, որը չի համապատասխանում ընդունման պարամետրում նշված ընտրիչին, ապա այդ իրադարձությունները չեն գործարկվի: Այս տարրը կարող է ազատ տեղաշարժվել, բայց այն չի ընկալվի ընդունող տարրի կողմից։

Ուշադրություն դարձրեք այն փոփոխությանը, թե ինչպես եք ընտրում ընդունելի բոց, որի համար պետք է զանգահարեք տեքստի () մեթոդը: Երբ փաստաթղթում կար միայն մեկ շարժական տարր, id հատկանիշը բավական էր դրա համար.

Թողնել՝ ֆունկցիան () ($ («# քաշել»): Տեքստ («Ձախ»)),

Այս օրինակում կան երկու float տարր, և id հատկանիշի վրա ընտրելը չի ​​բերի ցանկալի արդյունք, քանի որ տեքստը այս դեպքում միշտ կփոխվի նույն float տարրում, անկախ նրանից, թե որն է ընդունելի ստացող տարրը:

Ելքը UI օբյեկտի օգտագործումն է, որը jQuery UI-ն տրամադրում է որպես լրացուցիչ փաստարկ յուրաքանչյուր իրադարձություն մշակողի համար: Ui օբյեկտի draggable հատկությունը վերադարձնում է jQuery օբյեկտ, որը պարունակում է այն տարրը, որը օգտվողը քաշում է կամ փորձում է թողնել թիրախային տարրի վրա՝ թույլ տալով ընտրել ցանկալի տարրը հետևյալ կերպ.

Թողնել՝ ֆունկցիա (իրադարձություն, UI) (ui.draggable.text («Ձախ»)),

Փոխելով համընկնման շեմը

Լռելյայնորեն, over-ի իրադարձությունը բացվում է միայն այն դեպքում, երբ լողացող տարրի առնվազն 50%-ը համընկնում է ընդունող տարրի հետ: Այս շեմի համընկնման արժեքը կարող է փոխվել՝ օգտագործելով հանդուրժողականության տարբերակը, որը կարող է վերցնել ստորև բերված աղյուսակում ներկայացված արժեքները.

Երկու արժեքները, որոնք ես օգտագործում եմ ամենից հաճախ՝ տեղավորել և հպվել, դրանք առավել հասկանալի են օգտատերերի համար: Ես օգտագործում եմ համապատասխանության արժեքը այն դեպքերում, երբ քաշված տարրը պետք է մնա ընդունող տարրի տարածքում, որտեղ այն տեղափոխվել է, իսկ հպման արժեքը՝ երբ տեղափոխված տարրը պետք է վերադառնա իր սկզբնական դիրքին (օրինակը տրվելու է ստորև ): Ստորև ներկայացված է համապատասխանության և հպման պարամետրերի օգտագործման օրինակ.

Կլոնի արժեքը jQuery UI-ին հուշում է ստեղծել լողացող տարրի պատճենը նրա ողջ բովանդակության հետ միասին և օգտագործել այդ արդյունքը որպես օգնական տարր: Արդյունքը ցույց է տրված նկարում.

Օգնականը հեռացվում է, երբ օգտատերը մկնիկի կոճակը թողնում է լողացող տարրի վրա՝ լողացող և ստացող տարրերը թողնելով իրենց սկզբնական դիրքերում:

Ինչպես ցույց է տրված նկարում, սկզբնական լողացող տարրը մնում է տեղում, և միայն օժանդակ տարրը շարժվում է էկրանի երկայնքով՝ հետևելով մկնիկի ցուցիչին: Եթե ​​տեղափոխված տարրի չափերը մեծ են, ինչպես մեր օրինակում, ապա այն ընդգրկում է փաստաթղթի մնացած տարրերը, այնպես որ նույնիսկ օգտագործողին դժվար կլինի հետևել ստացող տարրի դիրքին: Դուք կարող եք լուծել այս խնդիրը՝ որպես օգնական տարբերակի արժեք տրամադրելով ֆունկցիա, ինչպես ցույց է տրված ստորև բերված օրինակում.

... $ (գործառույթ () ($ ("div.draggable") .. png "/>")))); $ («# զամբյուղ») droppable ((activeClass՝ «ակտիվ», hoverClass՝ «sover»)); )); ... Գործարկման օրինակ

Երբ օգտվողը սկսում է տարրը քաշել, jQuery UI-ն կանչում է ֆունկցիա, տրված է պարամետրովօգնական, և օգտագործում է վերադարձված տարրը որպես float: Այս դեպքում ես օգտագործում եմ jQuery՝ img տարր ստեղծելու համար։ Արդյունքը ցույց է տրված նկարում.

Փոքր պատկերը գործում է որպես լողացող տարրի տեղապահ, ինչը շատ ավելի հեշտ է դարձնում փաստաթղթի այլ տարրերին հետևելը:

Միջերեսը, որը jQuery UI-ն ուղարկում է Droppable-ի փոխազդեցության իրադարձություններին, պարունակում է օգնական հատկություն, և այս հատկությունը կարող է օգտագործվել օգնականը կառավարելու համար, երբ այն քաշվում է: Այս հատկության օգտագործման օրինակը հետ միասին ավելի ու դուրս իրադարձությունների ցույց է տրված ստորև.

... $ (գործառույթ () ($ ("div.draggable") .. png "/>")))); $ («# զամբյուղ»). droppable ((activeClass՝ «active», hoverClass՝ «save», over: ֆունկցիա (իրադարձություն, UI) (ui.helper.css («border», «thick solid # 27e6ed»)) , դուրս՝ ֆունկցիա (իրադարձություն, UI) (ui.helper.css («սահման», «»)))); )); ...

Այստեղ over and out իրադարձությունները և ui.helper հատկությունը օգտագործվում են օգնականի շուրջ եզրագիծ ցուցադրելու համար, երբ այն համընկնում է ստացող տարրի հետ: Արդյունքը ցույց է տրված նկարում.

Կցեք տարրերի եզրերին

Միջոցով snap ընտրանքներկարող եք հասնել նրան, որ տեղափոխված տարրը «ներգրավվի» այն տարրերի եզրերին, որոնց կողքով այն անցնում է: Այս տարբերակը որպես արժեք ընդունում է ընտրիչ: Լողացող տարրը կկպչի ցանկացած տարրի եզրերին, որը համապատասխանում է նշված ընտրիչին: Snap տարբերակի օգտագործման օրինակը ներկայացված է ստորև.

Գործարկման օրինակ

Երբ տեղափոխված տարրը մոտենում է հարմար տարրերից մեկին, այն, ասես, «գրավվում» է նրան այնպես, որ դրանց հարակից եզրերը դիպչում են։ Նման կապի համար կարող եք ընտրել ցանկացած տարր, ոչ միայն ստացող: Այս օրինակում ես ավելացրել եմ div տարր և սահմանել եմ snap տարբերակը մի արժեքի վրա, որն ընտրում է տվյալ տարրը փաստաթղթում, ինչպես նաև ստացող տարրը:

Կան մի քանի օգնական տարբերակներ, որոնք թույլ են տալիս մանրակրկիտ կարգավորել տարրերի պարտադիր պահվածքը: Դրանցից մեկն է snapMode տարբերակ... Այն կարող է օգտագործվել կապակցման տեսակը նշելու համար: Թույլատրվում են հետևյալ արժեքները. ներքին(կտրվելով տարրերի ներքին եզրերին), արտաքին(կտրվելով տարրերի արտաքին եզրերին) և երկուսն էլ(կտրեք բոլոր եզրերին, լռելյայն):

SnapTolerance տարբերակթույլ է տալիս ճշտել, թե որքան հեռու պետք է լողացող տարրը մոտենա թիրախային տարրի եզրին, նախքան խզումը: Նախնականը 20 է, ինչը նշանակում է 20 պիքսել: Օրինակը օգտագործում է 50 արժեքը, որը համապատասխանում է ավելի մեծ հեռավորության վրա դիպչելուն: Շատ կարևոր է ընտրել այս տարբերակի ճիշտ արժեքը: Եթե ​​snapTolerance արժեքը շատ փոքր է, օգտվողը կարող է չնկատել snap-ի էֆեկտը, իսկ եթե այն չափազանց մեծ է, տեղափոխվող տարրը կսկսի անսպասելի թռիչքներ կատարել՝ դիպչելով դեպի հեռավոր տարրեր:

VCL գրադարանի համար Borland-ը ներդրել է Drag & Drop ինտերֆեյսի իր տարբերակը (թարգմանվում է որպես «քաշել և թողնել»): Այս ինտերֆեյսը ներքին է. դուք կարող եք ուղարկել և ստանալ Delphi կառավարման ցանկացած տարր «ձևի ներսում» (բացառությամբ բուն ձևի): Այն իրականացվում է առանց Windows API-ի համապատասխան գործառույթների օգտագործման. դրանք պետք է օգտագործվեն այլ առաջադրանքների հետ հաղորդակցություն կազմակերպելիս՝ քաշելով և անկում.

Սեղմելով մկնիկի ձախ կոճակը հսկողության վրա, մենք կարող ենք այն «քաշել» ցանկացած այլ կառավարման վրա: Ծրագրավորողի տեսանկյունից դա նշանակում է, որ բանալին քաշելու և բաց թողնելու պահին գեներացվում են որոշակի իրադարձություններ, որոնք փոխանցում են բոլոր անհրաժեշտ տեղեկությունները` ցուցիչ դեպի քաշվող օբյեկտը, կուրսորի ընթացիկ կոորդինատները և այլն։ այս պահինկուրսորը գտնվում է: Նման իրադարձության մշակողը պետք է համակարգին ասի՝ արդյոք տվյալ կառավարումն ընդունում է «ուղարկել», թե ոչ: Երբ կոճակը բաց է թողնվում ընդունիչի վրա, ստեղծվում է ևս մեկ կամ երկու իրադարձություն՝ կախված ստացողի պատրաստվածությունից:

Չեղարկել Քաշել Չեղարկում է ընթացիկ քաշել-թողնել կամ քաշել-տեղակայել գործողությունը:

FindDragTarget ֆունկցիան (const Pos: TPoint; AllowDisabled: Boolean): TControl;

Ֆունկցիան վերադարձնում է բազային դասի օբյեկտ TControl , որին պատկանում է էկրանի դիրքը Pos պարամետրով նշված կոորդինատներով։ Այս ֆունկցիան օգտագործվում է «քաշել և թողնել» կամ «քաշել և տեղադրել» գործողության պոտենցիալ ստացողին որոշելու համար: Եթե ​​նշված դիրքի համար պատուհանի կառավարում չկա, ապա ֆունկցիան վերադառնում էզրո ... AllowDisabled պարամետրը որոշում է, թե արդյոք անջատված օբյեկտները հաշվվում են:

IsDragObject (Ուղարկող՝ TObject) ֆունկցիա՝ բուլյան;

Ֆունկցիան որոշում է, թե արդյոք Sender պարամետրում նշված օբյեկտը դասի հետնորդն է TDragObject . Այս գործառույթըկարող է օգտագործվել որպես Source պարամետր OnDragOver և OnDockOver իրադարձությունների մշակիչներում՝ որոշելու, թե արդյոք քաշված օբյեկտը կընդունվի: Նաև գործառույթը IsDragObjectկարող է օգտագործվել որպես Source պարամետր OnDragDrop և OnDockDrop իրադարձությունների մշակիչներում՝ քաշված օբյեկտը ճիշտ մեկնաբանելու համար:

DragMode, DragCursor հատկությունները, BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag մեթոդներ, Ընդունել պարամետր

Տեղեկություն մեկ օբյեկտից մյուսը քաշելու և թողնելու գործընթացը լայնորեն կիրառվում է Widows-ում: Կարող եք ֆայլեր տեղափոխել թղթապանակների միջև, տեղափոխել թղթապանակներ և այլն:

Բոլոր հատկությունները, մեթոդները և իրադարձությունները, որոնք կապված են քաշել և թողնել գործընթացի հետ, սահմանվում են TControl դասում, որը Delphi-ի բոլոր տեսողական բաղադրիչների մայրն է: Հետեւաբար, դրանք ընդհանուր են բոլոր բաղադրիչների համար:

Քաշման սկիզբը որոշվում է DragMode հատկությամբ, որը կարող է սահմանվել նախագծման ժամանակ կամ ծրագրային առումով հավասար լինել dmManual կամ dmAutomatic: dmAutomatic (ավտոմատ) արժեքը որոշում է, թե արդյոք քաշել և թողնել գործընթացն ինքնաբերաբար կսկսվի, երբ օգտագործողը մկնիկը սեղմում է բաղադրիչի վրա: Այնուամենայնիվ, այս դեպքում, OnMouseDown իրադարձությունը, որը կապված է օգտատիրոջ կողմից մկնիկի կոճակի վրա սեղմելու հետ, ընդհանրապես չի առաջանում այս բաղադրիչի համար:

Բաղադրիչների փոխանցման և ստացման ինտերֆեյսը հայտնվել է շատ վաղուց: Այն թույլ է տալիս երկու կառավարում փոխազդել հավելվածի աշխատանքի ընթացքում: Այս դեպքում կարող են կատարվել ցանկացած անհրաժեշտ վիրահատություն։ Չնայած իրականացման պարզությանը և զարգացման տարիքին, շատ ծրագրավորողներ (հատկապես սկսնակները) այս մեխանիզմը համարում են անհասկանալի և էկզոտիկ: Այնուամենայնիվ, Drag-and-Drop-ի օգտագործումը կարող է շատ օգտակար և հեշտ իրագործելի լինել: Այժմ մենք կհամոզվենք սրանում։

Որպեսզի մեխանիզմը աշխատի, երկու հսկիչները պետք է համապատասխանաբար կազմաձևվեն: Մեկը պետք է լինի Աղբյուրը, մյուսը՝ Թիրախը: Այս դեպքում աղբյուրը ոչ մի տեղ չի շարժվում, այլ միայն որպես այդպիսին գրանցվում է մեխանիզմում։

Հավատացեք ինձ, բավական է միայն դարձի գալ X, Y կոորդինատներըփոխանցվել է OnDragOver և OnDragDrop իրադարձությունների պարամետրերում ձևի կոորդինատներին:

Աշխատեք բաղադրիչի ձախ և վերևի հատկությունների հետ, որի վրա սավառնում է կուրսորը: Մի պարզ օրինակ բերեմ. Տեղադրեք Memo բաղադրիչ ձևի վրա և Align հատկությունը դրեք alTop: Տեղադրեք վահանակ ձևի վրա, նաև Align հատկությունը դրեք alTop և Բարձրություն հատկությունը փոքր արժեքի, ասենք 6 կամ 7 պիքսել: Տեղադրեք DragMode-ը dmAutomatica-ին, իսկ DragCursor-ին՝ crVSplit-ին: Տեղադրեք մեկ այլ Memo բաղադրիչ և դրեք Align-ը alClient-ի վրա: Ընտրեք երկու Memo բաղադրիչները միաժամանակ, վահանակ և ստեղծեք ընդհանուր իրադարձությունների մշակիչ OnDragOver միջոցառման համար, ինչպես ցույց է տրված ստորև.

Վերջերս միտք ունեի սկսել Android-ի համար խաղ մշակել։ Սկզբից որոշեցի շախմատ գրել։ Ինձ թվում էր տեխնոլոգիա Քաշել և թողնելկատարյալ ձևերի շարժման մեխանիզմի ներդրման համար: Չգիտակցողների համար նշում եմ, որ քաշել և թողնել մեթոդն էորոշ գրաֆիկական օբյեկտներ մյուսների վրա քաշելու և ազատելուց հետո գործողություն կատարելու ունակության մեջ: Ամենապարզ օրինակը- հեռացնել դյուրանցումը ձեր համակարգչի աշխատասեղանից՝ այն քարշ տալով դեպի աղբարկղ: Դյուրանցումը «գցելով» աղբամանը՝ մենք համակարգին ասում ենք, որ ցանկանում ենք ստիպել այս երկու օբյեկտներին փոխազդել: Համակարգը ստանում է մեր ազդանշանը և որոշում, թե ինչ գործողություններ ձեռնարկել: Քաշել և թողնել լայն տարածում է գտել իր ինտուիտիվ պարզության շնորհիվ: Այս մոտեցումը հաստատված է իրական աշխարհի օբյեկտների հետ կապված մեր փորձով և հիանալի է աշխատում վիրտուալ միջավայրում: Ինչ վերաբերում է շախմատին, ապա օգտագործելով քաշել և թողնել, տեխնոլոգիապես ավելի հեշտ է որոշել այն բջիջը, որտեղ օգտագործողը քաշել է խաղաքարը, քանի որ կարիք չկա բջիջի համարը հաշվարկել անկման կետի կոորդինատներով: Այս աշխատանքը կվերցնի վիրտուալ մեքենան:

Drag n Drop տեխնոլոգիայի օգտագործման նպատակը

Քաշել և թողնել տեխնոլոգիան թույլ է տալիս ինձ լուծել երեք խնդիր քիչ արյունով.

1. Դասընթացի պատկերացում. Երբ օգտատերը հպում է որևէ ձևի և սկսում է այն շարժել էկրանի շուրջ, ձևը փոխարինվում է ավելի փոքր գծագրով: Այսպիսով, օգտվողը հասկանում է, որ գործիչը գրավված է:
2. Ես սահմանափակել եմ ձևի շարժման տարածքը տախտակի չափով:
3. Եթե ​​օգտագործողը սխալ տեղ է թողել ձևը, այն պետք է վերադառնա իր սկզբնական դիրքին:

Առաջադրանքները նախանշված են, անդրադառնանք դրանց իրականացմանը։

Փոխեք ImageView-ը հպումով

Իմ բոլոր ձևերը ImageView օբյեկտներ են: Ցավոք, պարզվեց, որ Android-ում Drag & Drop-ի ներդրումը թույլ չի տալիս «դուրս արկղից» փոխարինել օբյեկտի պատկերը, երբ այն շոշափվում է։ Այնուամենայնիվ, այս խնդիրը բավականին լուծելի է API-ի միջոցով։ Մենք պետք է կատարենք մի շարք պարզ քայլեր.

1. Ստեղծեք DragShadowBuilder օբյեկտ:
2. Զանգահարեք startDrag մեթոդը:
3. Թաքցրեք մեր ImageView-ը, որը ցուցադրում է ձևը` կանչելով setVisibility մեթոդը View.INVISIBLE պարամետրով: Արդյունքում էկրանին կմնա միայն DragShadowBuilder օբյեկտը, որը օգտատիրոջը կազդարարի ձևը բռնելու համար։

Այս քայլերը պետք է իրականացվեն ImageView-ի OnTouchListner մշակիչում: Դա անելու համար մենք կչեղարկենք onTouch մեթոդը.

@ Override հանրային բուլյան onTouch (Դիտել տեսքը, MotionEvent motionEvent) (եթե (motionEvent. GetAction () == MotionEvent. ACTION_DOWN) (ClipData clipData = ClipData. NewPlainText ("", ""); Դիտել. DragShadowBuilder dsb = նոր դիտում: DragSha (դիտել); դիտել. startDrag (clipData, dsb, դիտել, 0); դիտել. setVisibility (Տեսնել. ԱՆՏԵՍԱՆԵԼԻ), վերադարձնել true;) else (return false;))

Ամեն ինչ շատ պարզ է. Այսպիսով, մենք պարզեցինք պատկերի փոխարինումը, եկեք անցնենք հաջորդ առաջադրանքին:

Քաշելու տարածքը սահմանափակելով քաշել անկման ֆունկցիայի համար

Քաշելու տարածքը սահմանափակելու մեկ խնդիր կա: Բանն այն է, որ եթե ձևը գցեք տախտակից դուրս, ապա drop-ի իրադարձությունը տեղի չի ունենա, քանի որ օգտագործողը զրոյից գցել է առարկան, և օբյեկտը փոխազդելու ոչինչ չունի: Արդյունքում գործիչը չի վերադառնա իր սկզբնական վիճակին և ընդմիշտ թաքնված կմնա։ Ես շատ ժամանակ ծախսեցի փաստաթղթերը կարդալու համար, բայց դեռ չեմ գտել միջոց՝ սահմանափակելու օբյեկտների քաշելու շրջանակը: Ոգեշնչումը հանկարծակի եկավ. Ես ընդհանրապես տարածքը սահմանափակելու կարիք չունեմ, ես պետք է իմանամ՝ օգտատերը ճիշտ է թողարկել ձևը, թե ոչ։

Ճիշտ թողարկման որոշում
Ես գտա իմ հարցերի պատասխանները Android Developers կայքի «վարել քաշել ավարտի իրադարձությունները» բաժնում: Ահա մի քանի հիմնական կետեր.

1. Երբ օգտվողն ավարտում է քաշելը, ACTION_DRAG_ENDED իրադարձությունը գործարկվում է DragListeners մշակիչում:
2. DragListener-ում դուք կարող եք ավելի մանրամասն տեղեկություններ ստանալ քաշելու գործողության մասին՝ զանգահարելով DragEvent.getResult () մեթոդը:
3. Եթե ​​DragListener-ը վերադարձնում է true՝ ի պատասխան ACTION_DROP իրադարձության, getResult զանգը նույնպես կվերադարձնի true, հակառակ դեպքում՝ false:

Այսպիսով, ես պետք է ընդհատեմ ACTION_DRAG_ENDED իրադարձությունը և կանչեմ getResult մեթոդը: Եթե ​​այն վերադարձնում է false, ապա օգտատերը քաշել է ձևը տախտակից, և ես պետք է տեսանելի ռեժիմի մեջ դնեմ ImageView-ը:

@ Անտեսել հանրային բուլյան onDrag (Դիտել տեսքը, DragEvent dragEvent) (int dragAction = dragEvent. GetAction (); Դիտել dragView = (Դիտել) dragEvent. GetLocalState (); if (dragAction == DragEvent. ACTION_DRAG_EXITED) (պարունակում է այլ գծապատկերներ) if (dragAction == DragEvent. ACTION_DRAG_ENTERED) (պարունակում էDragable = ճշմարիտ;) else if (dragAction == DragEvent. ACTION_DRAG_ENDED) (if (dropEventNotHandled (dragEvent)) (dragView. setVisibility (View. else if (VisibLEDrag)); = DragEvent: ACTION_DROP & amp; & amp; պարունակում է Dragable) (checkForValidMove ((ChessBoardSquareLayoutView) դիտում, dragView); dragView. SetVisibility (View. VISIBLE);) վերադարձ true;) մասնավոր բուլյան dropEventNotHandled (Drag) )

Այժմ օգտատերը կարող է ազատել գործիչը ցանկացած վայրում, և ոչ մի սարսափելի բան տեղի չի ունենա:

Թույլատրելի շարժումների որոշում

Հոդվածի վերջին մասը նվիրված է այն քայլի վավերականությունը ստուգելուն, որը օգտատերը փորձում է անել։ Մինչ այս թեմայի մանրամասն քննարկումը սկսելը, ես մի փոքրիկ դիտողություն կանեմ՝ բացատրելով իմ դիմումի կառուցվածքը։ Շաշկի տախտակը ներկայացված է որպես TableLayout, և յուրաքանչյուր բջիջ LinearLayout-ի հետնորդն է և ունի OnDragListener:

Բացի այդ, յուրաքանչյուր OnDragListener վերաբերում է միջնորդ օբյեկտին, որը հոգ է տանում խաղի օբյեկտների փոխազդեցության մասին և հիշում ընթացիկ բջիջի դիրքը:

Երբ օգտատերը կտորը քարշ է տալիս վանդակի վրայով, հնարավոր են հետևյալ գործողությունները.

1. Օգտագործելով ACTION_DRAG_ENTERED իրադարձությունը՝ «containsDraggable» փոփոխականը «true» սահմանելու համար:
2. Օգտագործելով ACTION_DRAG_EXITED իրադարձությունը՝ «containsDraggable» փոփոխականը false սահմանելու համար:
3. Օգտագործելով ACTION_DROP իրադարձությունը՝ միջնորդին հարցնելու համար, թե արդյոք թույլատրվում է պատկեր տեղադրել այս բջիջում:

Ստորև ներկայացված է նկարագրված տրամաբանությունն իրականացնող կոդը

@ Անտեսել հանրային բուլյան onDrag (Դիտել տեսքը, DragEvent dragEvent) (int dragAction = dragEvent. GetAction (); Դիտել dragView = (Դիտել) dragEvent. GetLocalState (); if (dragAction == DragEvent. ACTION_DRAG_EXITED) (պարունակում է այլ գծապատկերներ) if (dragAction == DragEvent. ACTION_DRAG_ENTERED) (պարունակում էDragable = ճշմարիտ;) else if (dragAction == DragEvent. ACTION_DRAG_ENDED) (if (dropEventNotHandled (dragEvent)) (dragView. setVisibility (View. else if (VisibLEDrag)); = DragEvent: ACTION_DROP & amp; & amp; պարունակում է Dragable) (checkForValidMove ((ChessBoardSquareLayoutView) դիտում, dragView); dragView. SetVisibility (Տեսնել. Տեսանելի);) վերադարձնել ճշմարիտ;)

Ինչպես տեսնում եք, անկախ նրանից, թե քայլը օրինական է, թե ոչ, ImageView-ը դրված է տեսանելի վիճակում: Ես ուզում էի, որ օգտատերը տեսներ ձևի շարժը: Ես ավելի վաղ նշել էի, որ բջիջը LayoutView-ի հետնորդն է։ Սա արվում է ImageView-ը բջիջից բջիջ տեղափոխելը հեշտացնելու համար: Ստորև բերված է checkForValidMove մեթոդի կոդը, որը ցույց է տալիս, թե ինչպես է շարժվում ImageView-ը:

մասնավոր void checkForValidMove (ChessBoardSquareLayoutView դիտում, Դիտել dragView) (եթե (միջնորդ. isValidMove (դիտում)) (ViewGroup սեփականատեր = (ViewGroup) dragView. getParent (); սեփականատեր. removeView (dragView); դիտել. addView (dragGravView); դիտել: (Ձգողականություն. ԿԵՆՏՐՈՆ); դիտում. ShowAsLanded (); միջնորդ. HandleMove (դիտում);))

Հուսով եմ, որ այս հոդվածը կօգնի ձեզ մշակել ձեր սեփական նախագծերը: