უმარტივესი გზაა რაღაცის აღება და ჩასმა, ვიდრე დაწერა, რა აიღო და სად დადო. რა თქმა უნდა, მაუსის, ან მსგავსი მოწყობილობის გარეშე, ვერაფერს ვერ აირჩევთ და არაფერს მიუთითებთ, მაგრამ ამჟამინდელ მდგომარეობაშიც კი, „გადაათრიეთ და ჩამოაგდეთ“ იდეის გამოყენება ძალიან ბუნებრივი და კომფორტულია.

იდეის გამოყენების სფერო შორს არის მხოლოდ ონლაინ მაღაზიებისგან, ელექტრონული ბიბლიოთეკებისგან, საძიებო სისტემებისგან ან Ინფორმაციული სისტემები, არამედ გამოყენებითი სფეროც. იდეა ძალიან გამოსაყენებელია საიტების და მათი ელემენტების განვითარებაში, შექმნილი და შენახული ინტერაქტიულად, პროგრამისტის მონაწილეობის გარეშე.

იდეის აღწერა

აირჩიეთ, გადაიტანეთ და განათავსეთ - იდეა ბუნებრივი და მოსახერხებელია. გასაოცარია, რომ ის არ დაბადებულა, როდესაც მაუსი გახდა კომპიუტერის შეუცვლელი აქსესუარი.

ყველაზე აშკარა მაგალითია პროდუქტის არჩევა ონლაინ მაღაზიაში. სასურველი პროდუქტის თაგვით აღება და საყიდლების კალათაში ჩათრევა მარტივი, ბუნებრივი და მოსახერხებელია. ფაილების ატვირთვა: დოკუმენტის ბრაუზერის ფანჯრის გარეთ გატანა და გვერდის ელემენტზე განთავსება, რითაც დოკუმენტის სერვერზე გადაცემის დაწყება, ასევე პრაქტიკული იდეაა.

დეველოპერისთვის, "გადაათრიეთ და ჩამოაგდეთ" იდეა არის გვერდის ელემენტებით მანიპულირება ტეგების კოორდინატებისა და ზომების ხელით გადაანგარიშების გარეშე, რამდენიმე ელემენტის არჩევისა და მათი გასწორების, აგრეთვე ბლოკის ტეგების გვერდების გადაადგილების შესაძლებლობა.

HTML და CSS - დიდი ენებიტეგების აღწერილობები და მათი დიზაინის სტილები, მაგრამ როდესაც დეველოპერს აქვს გვერდის ელემენტების ინტერაქტიული მანიპულირების შესაძლებლობა კოორდინატებისა და ზომების ხელით გადაანგარიშების გარეშე, ეს სამუშაოს უფრო კომფორტულს და ეფექტურს ხდის.

მარტივი ფაილის გადაცემა

"გადაათრიეთ და ჩამოაგდეთ": ინგლისურიდან რუსულად თარგმანი სიტყვასიტყვით ჟღერს "გადაათრიეთ და ჩამოაგდეთ". პრაქტიკაში ის უკეთესად ჟღერს და მუშაობს: აირჩიეთ, გადაიტანეთ და გაათავისუფლეთ - მარტივად და ბუნებრივად.

ძალიან მარტივია გვერდზე გადატანა ფაილების გვერდზე, სერვერზე ან სხვა გამოყენებისთვის.

ამ მაგალითში, დესკტოპზე რამდენიმე ფაილი შეირჩა მაუსით (მარცხნივ სურათი). არჩევისას დააჭირეს მაუსის მარცხენა ღილაკს და არჩეული „გავიდა“ კალათაში. თავად ბრაუზერმა აჩვენა როგორ ხდება ეს, დაწერა მინიშნება „ასლი“ და შექმნა გადასატანი ფაილების კონტურები.

როდესაც მაუსი კალათას მიუახლოვდა, ვიზიტორმა გაათავისუფლა მაუსის მარცხენა ღილაკი, მოხდა ჩათრევა და ჩამოგდება ღონისძიება და საიტის გვერდზე (ქვედა ფიგურა) JavaScript კოდმა შეძლო ყველა ფაილის მიღება და დამუშავება, რომელიც ვიზიტორმა მიეწოდება გვერდზე (საიტს).

განხორციელების აღწერა

კოდი, რომელიც ასრულებს ამ პროცედურას, ძალიან მარტივია. ახალბედა დეველოპერსაც კი შეუძლია მისი გამეორება ნებისმიერ შემთხვევაში.

აქ მომხმარებლის ინტერფეისი წარმოდგენილია ორი ტეგით: scPlaceFile (ეს არის თავად კალათა, სადაც ფაილების განთავსება გჭირდებათ) და scPlaceFiles (ეს არის ფაილების დამუშავების შედეგი, ამ შემთხვევაში მათი სია).

გვერდის ლოგიკა ასეთია. ბრაუზერში გვერდის ჩატვირთვისას კალათაში ენიჭება ღონისძიების „ondrop“ დამმუშავებელი - დასაყენებლად დანარჩენი ივენთები იბლოკება და არ გამოიყენება.

გვერდი ნორმალურად მუშაობს, მაგრამ როგორც კი ვიზიტორი შეარჩევს ფაილს(ებს) და გადაათრევს მათ კალათის სურათზე, ანუ scPlaceFile ტეგზე, დაიწყება ღონისძიების "ფაილის მოვიდა" დამუშავება.

ეს დამმუშავებელი უბრალოდ აჩვენებს ფაილების სიას. მათი რიცხვი არის event.dataTransfer.files.length, ხოლო ინფორმაცია თითოეული ფაილის შესახებ არის event.dataTransfer.files [i] .name. რა უნდა გააკეთოს მიღებულ მონაცემებთან, განსაზღვრავს დეველოპერი, ამ შემთხვევაში, უბრალოდ ყალიბდება მიღებული ფაილების სია.

დამუშავების შემდეგ, ღონისძიება იბლოკება და არ ვრცელდება. ეს აუცილებელია იმისათვის, რომ ბრაუზერი არ იყოს თვითდასაქმებული და ხელი არ შეუშალოს მიღებული ინფორმაციის დამუშავებას.

DnD და გარე მონაცემები

სერვერზე სურათების ატვირთვა გადაადგილების გამოყენებით ამ ტექნოლოგიაში გავრცელებული პრაქტიკაა. როგორც წესი, დეველოპერი ქმნის ფაილის ატვირთვის ფორმას (1), რომელიც მუშაობს ჩვეულებრივი გზით (2). ვიზიტორს შეუძლია შესვლა ნორმალური რეჟიმიაირჩიეთ ფაილები და ატვირთეთ ისინი.

თუმცა, თუ ფორმაში გარკვეული ადგილის სტუმარი აკეთებს "გადაათრიეთ და ჩამოაგდებს", მაშინ ფაილის (ებ)ის სახელის ველი ავტომატურად შეივსება.

ეს კარგი გადაწყვეტილება... რა თქმა უნდა, ძალიან რთულია იმის აღიარება, რომ კომპიუტერზე მაუსი არ არის. მაგრამ უმჯობესია მომხმარებლის ინტერფეისის დაპროექტება რეგულარული გზით და DnD განხორციელებით.

DnD და შიდა მონაცემები

ვიზიტორის ინტერესებზე ზრუნვა ყოველთვის მნიშვნელოვანია, მაგრამ მნიშვნელოვანია დეველოპერის საზრუნავიც. Drag and drop შეიძლება განხორციელდეს არა მხოლოდ სტანდარტული საშუალებებით, არამედ მაუსის მოვლენების გვერდის ელემენტებზე დამუშავებით.

ტეგების კოორდინატების მნიშვნელობების და მათი ზომების გაანგარიშების ამოცანა მუდმივად ჩნდება. ხელით გაანგარიშება კარგი პრაქტიკაა, მაგრამ ინტერაქტიული ვარიანტი უფრო მოსახერხებელია. ყველა ტეგი ყოველთვის მართკუთხაა და ელემენტების გვერდებზე მაუსის მოვლენებს თვალყურის დევნით, შეგიძლიათ შექმნათ ელემენტების ავტომატურად გადატანის შესაძლებლობა გვერდზე სწორ ადგილას, ან შეცვალოთ ისინი.

მაუსის ღილაკზე დაწკაპუნების მოვლენის მართვა - დაწკაპუნების ადგილის კოორდინატების შენახვა, მაგალითად, ელემენტის ერთ-ერთი მხარე. ამოძრავეთ მაუსი - მხარე მოძრაობს სასურველი მიმართულებით. მაუსის ღილაკის გაშვება - მხარე ჩერდება და იცვლება მისი კოორდინატები. ამ გზით თქვენ შეგიძლიათ შეცვალოთ ელემენტის პოზიცია ან მისი ზომა.

ეს არ არის ფორმალურად "გადაათრიეთ და ჩამოაგდეთ", მაგრამ ეფექტი მსგავსი და პრაქტიკულია. ნებისმიერი გვერდის ელემენტისთვის უნივერსალური დამმუშავებლების შექმნით, შეგიძლიათ მიიღოთ კარგი ინტერაქტიული შედეგები, დააჩქაროთ განვითარება და გაამარტივოთ თქვენი კოდი.

ვიზუალური და ხელით პროგრამირება

კომპიუტერზე მაუსი და სმარტფონზე თითები სრულიად განსხვავებული მიდგომებია მომხმარებლის ინტერფეისის (ვიზიტორი, დეველოპერი) განხორციელებისთვის. ეს არის ბუნებრივი და თანამედროვე მოთხოვნა ჯვარედინი ბრაუზერის თავსებადობისთვის.

ეს ყველაფერი ერთად ართულებს გვერდების შექმნას, მაგრამ მასში „გადაათრიეთ და ჩამოშვების“ იდეის გამოყენება სტანდარტული ფორმამისი მოვლენების გამოყენებით, ამ იდეის შერწყმით ჩვეულებრივ მოვლენებთან ელემენტებზე, შეგიძლიათ განახორციელოთ მექანიზმი, რომელშიც გვერდის შექმნა ვიზუალურად მოხდება.

ახლა მოდით შევხედოთ ნივთის ან ნივთების შერჩევას. შერჩევის ფაქტი არის კონტექსტური მენიუს გამოჩენა, მაგალითად, მიზანია არჩეულის გასწორება (მარცხნივ, მარჯვნივ, ცენტრში), ან ელემენტების ვერტიკალურად ან ჰორიზონტალურად განაწილება იმავე ნაბიჯით, ან მათი ზომების შეცვლა (მინიმალური, მაქსიმალური) .

კოორდინატებისა და ზომების ავტომატური ხელახალი გაანგარიშება სასურველია ხელით ხელახლა გაანგარიშებაზე. ნაკლები შეცდომა - მიზანი უფრო სწრაფად მიიღწევა. გარდა ამისა, შეგიძლიათ გააკეთოთ გვერდი ერთ ბრაუზერში, შეინახოთ ელემენტების პოზიცია და ზომა. სმარტფონზე ამ გვერდის გახსნის შემდეგ, შეგიძლიათ შეასწოროთ კოორდინატების და ზომების მნიშვნელობები და დაიმახსოვროთ ისინი კონკრეტული მოდელისმარტფონის ან ბრაუზერის ვერსია.

ასე რომ, იმავე გვერდს ჯვარედინი ბრაუზერის მოთხოვნების მექანიკური შესრულების გარეშე ექნება სხვადასხვა მონაცემების ჩვენება სხვადასხვა მოწყობილობებიდა სხვადასხვა ბრაუზერებში.

თუ ვიზიტორს ნებას დართეთ, განახორციელოს ეს პროცედურები დამოუკიდებლად, ასევე შეარჩიოს გვერდის საჭირო ელემენტები დეველოპერის მიერ მოწოდებულიდან, შეგიძლიათ უზრუნველყოთ ბრაუზერის თავსებადობა და გვერდის საჭირო ფუნქციონირება, მომხმარებლის აზრის გათვალისწინებით. .

Drag and Drop ფუნქცია დაგეხმარებათ გაზარდოთ თქვენი 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-ის Drag-and-drop მექანიზმს, უმჯობესია გამორთოთ HTML5 ეკვივალენტები კონფლიქტების თავიდან ასაცილებლად. ამ მიზნით, დააყენეთ დოკუმენტის ძირითადი ელემენტის გადასატანი ატრიბუტი false-ზე.

გადასატანი ურთიერთქმედების კონფიგურაცია

არსებობს მრავალი პერსონალიზაციის ვარიანტი Draggable ურთიერთქმედებისთვის. ყველაზე მნიშვნელოვანი თვისებები, რომლებიც განხილულია შემდეგ თავებში, შეჯამებულია ქვემოთ მოცემულ ცხრილში:

გადასატანი ურთიერთქმედების თვისებები

საკუთრება	აღწერა
ღერძი	ზღუდავს მოძრაობას კონკრეტულ მიმართულებებზე. ნაგულისხმევი არის false, რაც არ ნიშნავს შეზღუდვებს, მაგრამ ასევე შეგიძლიათ მიუთითოთ მნიშვნელობა "x" (გადაადგილება მხოლოდ X ღერძის გასწვრივ) ან "y" (გადაადგილება მხოლოდ Y ღერძის გასწვრივ)
შეკავება	ზღუდავს მცურავი ელემენტის პოზიციას ეკრანის კონკრეტულ არეალში. მხარდაჭერილი მნიშვნელობების ტიპები აღწერილია ქვემოთ მოცემულ ცხრილში, შესაბამისი მაგალითის გამოყენებით. ნაგულისხმევი არის false, რაც არ ნიშნავს შეზღუდვებს
დაგვიანებით	ადგენს რამდენ ხანს უნდა გადაიტანოს ელემენტი გადაადგილებამდე. ნაგულისხმევი არის 0, რაც ნიშნავს, რომ არ არის დაგვიანება
მანძილი	განსაზღვრავს მანძილს, რომელიც მომხმარებელმა უნდა გადაათრიოს ელემენტი საწყისი პოზიციიდან, სანამ ის რეალურად გადაადგილდება. ნაგულისხმევი არის 1 პიქსელი
ბადე	აიძულებს გადატანილი ელემენტის მიბმას ბადის უჯრედებზე. ნაგულისხმევი არის false, რაც ნიშნავს, რომ არ არის სავალდებულო

მოძრაობის მიმართულებების შეზღუდვა

არსებობს რამდენიმე გზა, რომლითაც შეგიძლიათ შეზღუდოთ ელემენტის მოძრაობა კონკრეტულ მიმართულებებზე. პირველი არის ღერძის ვარიანტის გამოყენება X ან Y ღერძზე მოძრაობის მიმართულების შესაზღუდად. მაგალითი ნაჩვენებია ქვემოთ:

...

გაშვების მაგალითი

ამ მაგალითში ჩვენ განვსაზღვრავთ ორ div ელემენტს, შეარჩიეთ ისინი jQuery-ის გამოყენებითდა მოვუწოდებთ draggable () მეთოდს. ობიექტი გადაეცემა ამ მეთოდს, როგორც არგუმენტი, რომელიც თავდაპირველად ზღუდავს ორივე div-ის მოძრაობას X ღერძის გასწვრივ მიმართულებისკენ. შემდეგ jQuery filter () მეთოდის გამოყენებით, ჩვენ შეგვიძლია ავირჩიოთ dragV ელემენტი jQuery-ის ხელახალი ძიების გარეშე. დოკუმენტი და დააყენეთ გადაადგილების სხვა დაშვებულ მიმართულებაზე - Y-ღერძის გასწვრივ, რაც გვაძლევს დოკუმენტს, რომელშიც ერთი div შეიძლება მხოლოდ ვერტიკალურად და მეორე მხოლოდ ჰორიზონტალურად. შედეგი ნაჩვენებია ფიგურაში:

ელემენტის მოძრაობის დიაპაზონის შეზღუდვა

თქვენ ასევე შეგიძლიათ შეზღუდოთ ეკრანის არეალი, რომელზედაც შესაძლებელია ნივთის გადატანა. ამისათვის გამოიყენება შეკავების ვარიანტი. მნიშვნელობის ფორმატები, რომლებიც შეიძლება მითითებული იყოს ამ პარამეტრში, აღწერილია ქვემოთ მოცემულ ცხრილში:

შეკავების ვარიანტის გამოყენების მაგალითი ნაჩვენებია ქვემოთ:

...

გაშვების მაგალითი

ამ მაგალითში ორივე ელემენტის მოძრაობა შეზღუდულია ისე, რომ მათი მხოლოდ შიგნით ჩათრევა შეიძლება მშობელი ელემენტი, რომელიც არის ფიქსირებული ზომის დივ. ერთ-ერთი მცურავი დივისთვის შემოღებული ღერძის ვარიანტის გამოყენებით დამატებითი შეზღუდვა, რაც არის ის, რომ მას შეუძლია მხოლოდ ჰორიზონტალურად გადაადგილება მშობლის ელემენტში. შედეგი ილუსტრირებულია ფიგურაში:

ელემენტის ბადის უჯრედებში გადასვლის შესაძლებლობის შეზღუდვა

ბადის ოფცია საშუალებას გაძლევთ დააყენოთ მოძრავი ელემენტის წამყვანი ბადის უჯრედებზე. ეს პარამეტრი მნიშვნელობად იღებს ორი ელემენტის მასივს, რომელიც განსაზღვრავს ბადის უჯრედების სიგანეს და სიმაღლეს პიქსელებში. ქსელის ოფციის გამოყენების მაგალითი ნაჩვენებია ქვემოთ:

...

გაშვების მაგალითი

ამ მაგალითს აქვს ბადე უჯრედებით 100 პიქსელი სიგანით 50 პიქსელი სიმაღლით. როდესაც ნივთს გადაათრევთ, ის ერთი (უხილავი) უჯრედიდან მეორეზე "ხტება". ჩაკეტვის ეფექტი არის ურთიერთქმედების ფუნქციონირების გამოყენების ძალიან კარგი მაგალითი, მაგრამ ძნელია მისი გადმოცემა ეკრანის ანაბეჭდების გამოყენებით.

თქვენ შეგიძლიათ შექმნათ დაჭერის ეფექტი მხოლოდ ერთი მიმართულებით, თუ დააყენეთ თავისუფალი გადაადგილების ღერძი 1-ზე. მაგალითად, თუ ქსელის ოფციას დააყენებთ მნიშვნელობას, ელემენტი გადაიჭრება 100 პიქსელი სიგანის ბადის უჯრედებზე, როდესაც ის ჰორიზონტალურად გადაადგილდება, მაგრამ ვერტიკალურად გადაადგილება უფასოა.

გადაადგილების დაყოვნება

არსებობს ორი ვარიანტი, რომლის საშუალებითაც შეგიძლიათ გადაიტანოთ გადატანილი ნივთი. დაყოვნების ოფცია შეიძლება გამოყენებულ იქნას იმ დროის დასაყენებლად, მილიწამებში, რომლითაც მომხმარებელმა უნდა გადაათრიოს მაუსი ელემენტის რეალურად გადაადგილებამდე. სხვა სახის შეფერხებას უზრუნველყოფს მანძილის ოფცია, რომელიც განსაზღვრავს მანძილს, პიქსელებში, რომლითაც მომხმარებელმა უნდა გადაათრიოს მაუსის მაჩვენებელი, სანამ ელემენტი მოჰყვება.

ორივე პარამეტრის გამოყენების მაგალითი ნაჩვენებია ქვემოთ:

...

გაშვების მაგალითი

ამ მაგალითში არის ორი მოძრავი ელემენტი, რომელთაგან ერთს აქვს დაყოვნება მითითებული დაყოვნების ოფციის გამოყენებით, ხოლო მეორეს დისტანციის ოფციის გამოყენებით.

დაყოვნების ოფციით განსაზღვრული დაყოვნების შემთხვევაში, მომხმარებელმა უნდა გადაათრიოს გარკვეული დროის განმავლობაში ელემენტის რეალურად გადატანამდე. ამ მაგალითში, ამ ინტერვალის ხანგრძლივობაა 1000 ms. ამ დროს მაუსის გადაადგილება სულაც არ არის საჭირო, მაგრამ მთელი დაყოვნების პერიოდში მაუსის ღილაკი დაჭერილი უნდა დარჩეს, რის შემდეგაც ელემენტის გადაადგილება შესაძლებელია მაუსის მოძრაობით. დაჯდომის დროის გასვლის შემდეგ, გადაადგილებული ელემენტი მიემართება მაუსის მაჩვენებლის პოზიციაზე, ექვემდებარება ადრე განხილული ბადის, რეგიონისა და ღერძის ვარიანტების მიერ დაწესებულ შეზღუდვებს.

მანძილის ოფციას აქვს მსგავსი ეფექტი, მაგრამ ამ შემთხვევაში მომხმარებელმა უნდა გადაათრიოს მაუსის მაჩვენებელი მინიმუმ პიქსელების მითითებული რაოდენობა ნებისმიერი მიმართულებით ელემენტის საწყისი მდებარეობიდან. შემდეგ გადაადგილებული ელემენტი გადახტება მაჩვენებლის ამჟამინდელ მდებარეობაზე.

თუ ორივე პარამეტრს გამოიყენებთ ერთსა და იმავე ელემენტზე, მაშინ გადატანილი ელემენტი არ დაიძვრება, სანამ ორივე დაყოვნების კრიტერიუმი არ დაკმაყოფილდება, ე.ი. სანამ არ იქნება მცდელობა ელემენტის გადათრევის მითითებულ დროში და სანამ მაუსის მაჩვენებელი პიქსელების განსაზღვრულ რაოდენობას გადააადგილებს.

გადასატანი ურთიერთქმედების მეთოდების გამოყენება

ყველა მეთოდი, რომელიც განსაზღვრულია Draggable-ის ურთიერთქმედებებისთვის, არის მეთოდების ძირითადი ნაკრების ნაწილი, რომელიც უკვე ნახეთ ვიჯეტების ნახვისას. Draggable ურთიერთქმედებისთვის სპეციფიკური მეთოდები არ არის მოწოდებული, ამიტომ მათ დეტალურად არ განვიხილავთ. ხელმისაწვდომი მეთოდების სია ნაჩვენებია ქვემოთ მოცემულ ცხრილში:

გადასატანი ურთიერთქმედების მოვლენების გამოყენება

გადაზიდვადი ურთიერთქმედება მხარს უჭერს მოვლენების მარტივ კომპლექტს, რათა შეატყობინოთ ნივთის გადმოტანისას. ეს მოვლენები აღწერილია ქვემოთ მოცემულ ცხრილში:

როგორც ვიჯეტის მოვლენებს, ასევე შეგიძლიათ ამ მოვლენებზე რეაგირება. დაწყების და გაჩერების მოვლენების მართვის მაგალითი ნაჩვენებია ქვემოთ:

...

გაშვების მაგალითი

ეს მაგალითი იყენებს დაწყების და გაჩერების მოვლენებს ელემენტის ტექსტური შინაარსის შესაცვლელად, როდესაც ის გადმოიყვანება. ეს შესაძლებლობა განპირობებულია იმით, რომ Draggable ურთიერთქმედება ხორციელდება ექსკლუზიურად HTML და CSS გამოყენებით: თქვენ შეგიძლიათ გამოიყენოთ jQuery მოძრავი ელემენტის მდგომარეობის შესაცვლელად მაშინაც კი, როცა ის მოძრაობს ეკრანზე.

Droppable Interaction-ის გამოყენება

ზოგიერთ სიტუაციაში, მხოლოდ ელემენტის გადათრევისა და ჩამოშვების შესაძლებლობა შეიძლება იყოს საკმარისი, მაგრამ ის ყველაზე სასარგებლოა Droppable-ის ურთიერთქმედებისას.

ერთეულები, რომლებსაც ჰქონდათ გამოყენებული Droppable ურთიერთქმედება (ერთეულების მიმღები) იძენენ უნარს მიიღონ მცურავი ელემენტები, რომლებიც შექმნილია Draggable ურთიერთქმედებით.

ნივთების მიმღები იქმნება გამოყენებით droppable () მეთოდიმაგრამ სასარგებლო ფუნქციონალობის მისაღებად, თქვენ უნდა შექმნათ ღონისძიების დამმუშავებლები ამ ტიპის ურთიერთქმედებისთვის განსაზღვრულთაგან. ხელმისაწვდომი მოვლენები ნაჩვენებია ქვემოთ მოცემულ ცხრილში:

ჩამოშვებული ურთიერთქმედების მოვლენები

ღონისძიება	აღწერა
შექმნა	ხდება, როდესაც ელემენტზე გამოიყენება Droppable ურთიერთქმედება
გააქტიურება	ხდება მაშინ, როდესაც მომხმარებელი იწყებს მოძრავი ნივთის გადატანას
გამორთეთ	ხდება მაშინ, როდესაც მომხმარებელი წყვეტს მოძრავი ნივთის გადათრევას
დასრულდა	ხდება მაშინ, როდესაც მომხმარებელი გადაათრევს მოცურულ ელემენტს მიმღებ ელემენტზე (მაგრამ თუ ვივარაუდებთ, რომ მაუსი ჯერ არ არის გამოშვებული)
გარეთ	ხდება მაშინ, როდესაც მომხმარებელი ათრევს მოძრავ ელემენტს მიმღები ელემენტის გარეთ
ჩამოაგდეს	ხდება მაშინ, როდესაც მომხმარებელი ტოვებს ათწილადს მიმღებ ელემენტზე

მარტივი მიმღები ელემენტის შექმნის მაგალითი ერთი წვეთი მოვლენის დამმუშავებლით ნაჩვენებია ქვემოთ:

...

გაშვების მაგალითი

ეს მაგალითი ამატებს div ელემენტს დოკუმენტში ტექსტური შინაარსით, რომელიც წარმოდგენილია სტრიქონით "Leave here". ჩვენ ვირჩევთ ამ ელემენტს jQuery-ის გამოყენებით და მოვუწოდებთ droppable () მეთოდს, გადავცემთ მას პარამეტრების ობიექტს, რომელიც განსაზღვრავს კურატორს ვარდნის მოვლენისთვის. ამ მოვლენის პასუხი არის მოძრავი ელემენტის ტექსტის შეცვლა ტექსტის () მეთოდის გამოყენებით.

ამ მაგალითში შექმნილი გადათრევა-ჩაშვება ურთიერთქმედება ძალიან საბაზისოა, მაგრამ ის იძლევა მოსახერხებელ კონტექსტს შესაძლებლობების ასახსნელად. ერთად მუშაობაგადასატანი და ჩამოსაშლელი ურთიერთქმედებები. გადაწევის პროცესის სხვადასხვა ეტაპები ილუსტრირებულია სურათზე:

ეს ყველაფერი ძალიან მარტივად გამოიყურება. ჩვენ ავათრევთ მოძრავ ელემენტს მანამ, სანამ ის არ იქნება მიმღებ ელემენტზე და ვათავისუფლებთ მას. ჩაშვებული ელემენტი რჩება იმ ადგილას, სადაც ჩამოაგდეს და მისი ტექსტის შინაარსი იცვლება ვარდნის მოვლენის საპასუხოდ. შემდეგი სექციები აჩვენებს, თუ როგორ გამოიყენოთ სხვა Droppable ურთიერთქმედების მოვლენები მომხმარებლის გამოცდილების გასაუმჯობესებლად.

სამიზნის მიმღები ობიექტის ხაზგასმა

აქტივაციისა და გამორთვის მოვლენების გამოყენებით, შეგიძლიათ მონიშნოთ სამიზნე მიმღები ობიექტი, როდესაც მომხმარებელი იწყებს გადმოზიდვის პროცესს. ბევრ სიტუაციაში, ეს იდეა ძალიან ნაყოფიერია, რადგან მომხმარებელს აძლევს საიმედო მითითებას იმის შესახებ, თუ რომელი ელემენტებია გადაწევის მოდელის ნაწილი. შესაბამისი მაგალითი მოცემულია ქვემოთ:

... $ (ფუნქცია () ($ ("# გადასატანი"). გადასატანი (); $ ("# ჩამოსაშლელი"). ჩამოსაშლელი ((ჩაშვება: ფუნქცია () ($ ("# გადასატანი"). ტექსტი ("მარცხნივ" ")), გააქტიურეთ: ფუნქცია () ($ (" # ჩამოსაშლელი "). css ((საზღვარი:" საშუალო ორმაგი მწვანე", ფონისფერი:" ღია მწვანე")); გამორთეთ: ფუნქცია () ($ (" # ჩამოსაშლელი ") .css (" საზღვარი "," ") .css (" background-color "," ");)));)); ... გაშვების მაგალითი

როგორც კი მომხმარებელი დაიწყებს ელემენტის გადათრევას, გააქტიურდება მოვლენა - ასოცირდება ჩვენს მიმღებ ელემენტთან, ხოლო დამმუშავებლის ფუნქცია იყენებს css () მეთოდს შესაცვლელად. CSS საზღვრების თვისებებიდა ამ ელემენტის ფონის ფერი. შედეგად, ხაზგასმულია სამიზნე მიმღები ელემენტი, რაც მომხმარებელს მიანიშნებს, რომ არსებობს კავშირი მასსა და მოძრავ ელემენტს შორის.

გამორთვის ღონისძიება გამოიყენება მიმღები ელემენტიდან CSS საკუთრების მნიშვნელობების ამოსაღებად და მის საწყის მდგომარეობაში დასაბრუნებლად, როგორც კი მომხმარებელი გაათავისუფლებს მაუსის ღილაკს. (ეს მოვლენა ხდება მაშინ, როდესაც ელემენტის გადაწევა ჩერდება, მიუხედავად იმისა, დარჩეს თუ არა ელემენტი მიმღებ ელემენტზე.) ეს პროცესი ილუსტრირებულია სურათზე:

გადახურვის ელემენტების მართვა

გადათრევა და ჩამოშვება შეიძლება გაუმჯობესდეს ღონისძიების განმეორებითი და გამოსვლის დამატებით. გადაჭარბებული მოვლენა ხდება მაშინ, როდესაც მოძრავი ელემენტის 50% არის მიმღები ელემენტის რომელიმე ნაწილზე. გამოსვლის მოვლენა ხდება მაშინ, როდესაც ადრე გადახურული ელემენტები აღარ იფარება. ამ მოვლენებზე რეაგირების მაგალითი ნაჩვენებია ქვემოთ:

$ (ფუნქცია () ($ ("# გადასატანი"). გადასატანი (); $ ("# ჩამოსაშლელი"). droppable ((ჩაშვება: ფუნქცია () ($ ("# გადასატანი"). ტექსტი ("მარცხნივ")) , გააქტიურეთ: ფუნქცია () ($ ("# ჩამოსაშლელი"). css ((საზღვარი: "საშუალო ორმაგი მწვანე", backgroundColor: "lightGreen"));), გამორთეთ: ფუნქცია () ($ ("# droppable"). css ("საზღვარი", "") .css ("ფონის ფერი", "");), over: ფუნქცია () ($ ("# droppable"). css ((საზღვარი: "საშუალო ორმაგი წითელი", backgroundColor : "წითელი"));), out: ფუნქცია () ($ ("# droppable"). css ("საზღვარი", "") .css ("ფონის ფერი", "");)));) ); გაშვების მაგალითი

აქ გამოყენებულია იგივე დამმუშავებლის ფუნქციები, როგორც წინა მაგალითში, მაგრამ ამ შემთხვევაში ისინი ასოცირდება ზედმეტ მოვლენებთან. როდესაც მოძრავი ელემენტის მინიმუმ 50% ემთხვევა მიმღებ ელემენტს, ის ჩარჩოშია და მისი ფონის ფერი იცვლება, როგორც ნაჩვენებია:

მითითებულ 50%-იან ზღვარს ეწოდება ტოლერანტობის ზღვარი, რომელიც შეიძლება დაყენდეს მიმღები ელემენტის შექმნისას, როგორც ეს ნაჩვენებია ქვემოთ.

Droppable ურთიერთქმედების დაყენება

Droppable-ს აქვს მრავალი თვისება ურთიერთქმედებისთვის, რომლებიც შეგიძლიათ შეცვალოთ მისი ქცევის მორგებისთვის. ეს თვისებები ჩამოთვლილია ქვემოთ მოცემულ ცხრილში:

ჩამოშვებადი ურთიერთქმედების თვისებები

საკუთრება	აღწერა
ინვალიდი	თუ ეს პარამეტრი მართალია, მაშინ Droppable ურთიერთქმედების ფუნქცია თავდაპირველად გამორთულია. ნაგულისხმევი არის false
მიღება	ავიწროებს მცურავი ელემენტების ერთობლიობას, რომელსაც მიმღები ელემენტი უპასუხებს. ნაგულისხმევი არის *, ის ემთხვევა ნებისმიერ ელემენტს
activeClass	განსაზღვრავს კლასს, რომელიც უნდა დაინიშნოს გააქტიურებული მოვლენის საპასუხოდ და წაიშლება დეაქტივაციის მოვლენის საპასუხოდ
hoverClass	განსაზღვრავს კლასს, რომელიც უნდა დაინიშნოს ზედმეტ მოვლენის საპასუხოდ და წაშლილი მოვლენის საპასუხოდ
ტოლერანტობა	განსაზღვრავს გადახურვის მინიმალურ ხარისხს, რომლის დროსაც ხდება ზედმეტ მოვლენა

ნებადართული მცურავი ნივთების შეზღუდვა

თქვენ შეგიძლიათ შეზღუდოთ მოძრავი ელემენტების ნაკრები, რომელსაც მიიღებს ელემენტი, რომელსაც აქვს თავსებადობის ფუნქცია Droppable, მიღების ოფციის გამოყენებით. მიღების ვარიანტი უნდა დაყენდეს ამომრჩეველზე. ამის შედეგად, Droppable ურთიერთქმედების მოვლენები მოხდება მხოლოდ იმ შემთხვევაში, თუ ჩაშვებული ელემენტი ემთხვევა მითითებულ სელექტორს. შესაბამისი მაგალითი მოცემულია ქვემოთ:

...

გაშვების მაგალითი

ამ მაგალითში არის ორი მოძრავი ელემენტი სახელად drag1 და drag2. მიმღები ელემენტის შექმნისას გამოიყენება მისაღები ოფცია, რომლითაც ვნიშნავთ, რომ მხოლოდ drag1 იქნება მისაღები float ელემენტი.

drag1-ის გადაადგილებისას დაინახავთ იგივე ეფექტს, როგორც წინა მაგალითებში. მოვლენების გააქტიურება, გამორთვა, გადატვირთვა და გამორთვა გააქტიურდება მიმღებ ელემენტზე შესაბამის დროს. ამავდროულად, თუ გადაიტანეთ drag2 ელემენტი, რომელიც არ ემთხვევა მიღების პარამეტრში მითითებულ სელექტორს, მაშინ ეს მოვლენები არ ამოქმედდება. ამ ელემენტის თავისუფლად გადატანა შესაძლებელია, მაგრამ მიმღები ელემენტის მიერ არ იქნება აღქმული.

ყურადღება მიაქციეთ ცვლილებას, თუ როგორ აირჩევთ მისაღები float-ს, რომლისთვისაც უნდა გამოიძახოთ ტექსტის () მეთოდი. როდესაც დოკუმენტში მხოლოდ ერთი მოძრავი ელემენტი იყო, ამისათვის საკმარისი იყო id ატრიბუტი:

ჩამოგდება: ფუნქცია () ($ ("# გადასატანი"). ტექსტი ("მარცხნივ")),

ამ მაგალითში არის ორი float ელემენტი და id ატრიბუტზე არჩევა არ გამოიწვევს სასურველ შედეგს, ვინაიდან ტექსტი ამ შემთხვევაში ყოველთვის შეიცვლება იმავე float ელემენტში, არ აქვს მნიშვნელობა რომელია მისაღები მიმღები ელემენტისთვის.

გამოსავალი არის jQuery UI ობიექტის გამოყენება, როგორც დამატებითი არგუმენტი თითოეული მოვლენის დამმუშავებლისათვის. Ui ობიექტის draggable თვისება აბრუნებს jQuery ობიექტს, რომელიც შეიცავს ელემენტს, რომელსაც მომხმარებელი გადაათრევს ან ცდილობს დატოვოს სამიზნე ელემენტზე, რაც საშუალებას აძლევს სასურველი ელემენტის არჩევას შემდეგნაირად:

ჩამოშვება: ფუნქცია (მოვლენა, UI) (ui.draggable.text ("მარცხნივ")),

გადახურვის ბარიერის შეცვლა

ნაგულისხმევად, over-ის მოვლენა მხოლოდ მაშინ ირთვება, როდესაც მოძრავი ელემენტის მინიმუმ 50% გადაფარავს მიმღებ ელემენტს. ამ ბარიერის გადახურვის მნიშვნელობა შეიძლება შეიცვალოს ტოლერანტობის ვარიანტის გამოყენებით, რომელიც შეიძლება მიიღოს ქვემოთ მოცემულ ცხრილში ნაჩვენები მნიშვნელობები:

ორი მნიშვნელობა, რომელსაც ყველაზე ხშირად ვიყენებ, მორგება და შეხება, არის ის, რაც ყველაზე გასაგებია მომხმარებლებისთვის. მე ვიყენებ მორგების მნიშვნელობას იმ შემთხვევებში, როდესაც გადაწეული ელემენტი უნდა დარჩეს მიმღები ელემენტის არეში, სადაც ის გადავიდა, ხოლო შეხების მნიშვნელობა - როდესაც გადატანილი ელემენტი უნდა დაბრუნდეს თავდაპირველ პოზიციაზე (მაგალითი მოცემულია ქვემოთ. ). მორგების და შეხების პარამეტრების გამოყენების მაგალითი ნაჩვენებია ქვემოთ:

კლონის მნიშვნელობა ეუბნება jQuery UI-ს შექმნას მოძრავი ელემენტის ასლი მთელ მის შინაარსთან ერთად და გამოიყენოს ეს შედეგი დამხმარე ელემენტად. შედეგი ნაჩვენებია ფიგურაში:

დამხმარე ამოღებულია, როდესაც მომხმარებელი ათავისუფლებს მაუსის ღილაკს მოცურავ ელემენტზე, ტოვებს მოძრავ და მიმღებ ელემენტებს თავდაპირველ პოზიციებზე.

როგორც სურათზეა ნაჩვენები, ორიგინალური მცურავი ელემენტი რჩება ადგილზე და მხოლოდ დამხმარე ელემენტი მოძრაობს ეკრანის გასწვრივ მაუსის მაჩვენებლის შემდეგ. თუ გადატანილი ელემენტის ზომები დიდია, როგორც ჩვენს მაგალითში, მაშინ იგი მოიცავს დოკუმენტის დანარჩენ ელემენტებს, ისე რომ მომხმარებელსაც კი გაუჭირდება მიმღები ელემენტის პოზიციის თვალყურის დევნება. ამ პრობლემის გადასაჭრელად შეგიძლიათ ფუნქციის მიწოდებით დამხმარე ვარიანტის მნიშვნელობა, როგორც ეს ნაჩვენებია ქვემოთ მოცემულ მაგალითში:

... $ (ფუნქცია () ($ ("div.draggable") .. png "/>")))); $ ("# კალათა") droppable ((activeClass: "active", hoverClass: "hover")); )); ... გაშვების მაგალითი

როდესაც მომხმარებელი იწყებს ელემენტის გადათრევას, jQuery UI იძახებს ფუნქციას, მოცემული პარამეტრითდამხმარე და იყენებს დაბრუნებულ ელემენტს როგორც float. ამ შემთხვევაში, მე ვიყენებ jQuery-ს img ელემენტის შესაქმნელად. შედეგი ნაჩვენებია ფიგურაში:

პატარა სურათი მოქმედებს როგორც მცურავი ელემენტის ჩანაცვლება, რაც ბევრად აადვილებს დოკუმენტში სხვა ელემენტების თვალყურის დევნებას.

ინტერფეისი, რომელსაც jQuery UI აგზავნის Droppable-ის ურთიერთქმედების მოვლენებზე, შეიცავს დამხმარე თვისებას და ეს თვისება შეიძლება გამოყენებულ იქნას დამხმარეზე მანიპულირებისთვის მისი გადატანისას. ამ თვისების გამოყენების მაგალითი ზედ და გასვლასთან ერთად ნაჩვენებია ქვემოთ:

... $ (ფუნქცია () ($ ("div.draggable") .. png "/>")))); $ ("# კალათა"). droppable ((activeClass: "active", hoverClass: "hover", over: ფუნქცია (event, ui) (ui.helper.css ("საზღვარი", "სქელი მყარი # 27e6ed")) , out: ფუნქცია (event, ui) (ui.helper.css ("საზღვარი", "")))); )); ...

აქ, over and out მოვლენები და ui.helper თვისება გამოიყენება დამხმარის გარშემო საზღვრების საჩვენებლად, როდესაც ის გადაფარავს მიმღებ ელემენტს. შედეგი ნაჩვენებია ფიგურაში:

მიამაგრეთ ელემენტების კიდეებზე

მეშვეობით ვადამდელი პარამეტრებიშეგიძლიათ მიაღწიოთ იმას, რომ გადატანილი ელემენტი „მიიზიდოს“ იმ ელემენტების კიდეებს, რომელთა გვერდითაც ის გადის. ეს პარამეტრი მნიშვნელობად იღებს ამომრჩეველს. მცურავი ელემენტი მიიჭრება ნებისმიერი ელემენტის კიდეებზე, რომელიც ემთხვევა მითითებულ სელექტორს. snap ვარიანტის გამოყენების მაგალითი ნაჩვენებია ქვემოთ:

გაშვების მაგალითი

როდესაც გადაადგილებული ელემენტი უახლოვდება ერთ-ერთ შესაფერის ელემენტს, ის, როგორც იქნა, „იზიდავს“ მას ისე, რომ მათი მიმდებარე კიდეები ეხება. ასეთი შეკვრისთვის შეგიძლიათ აირჩიოთ ნებისმიერი ელემენტი და არა მხოლოდ მიმღები. ამ მაგალითში მე დავამატე div ელემენტი და დავამატე snap ოფცია მნიშვნელობაზე, რომელიც ირჩევს მოცემულ ელემენტს დოკუმენტში, ისევე როგორც მიმღებ ელემენტს.

არსებობს რამდენიმე დამხმარე ვარიანტი, რომელიც საშუალებას გაძლევთ დაარეგულიროთ ელემენტების სავალდებულო ქცევა. ერთ-ერთი მათგანია snapMode ვარიანტი... ის შეიძლება გამოყენებულ იქნას სავალდებულო ტიპის დასაზუსტებლად. მიღებულია შემდეგი მნიშვნელობები: შინაგანი(ელემენტების შიდა კიდეებზე მიჯაჭვულობა), გარე(ელემენტების გარე კიდეებზე მიჯაჭვულობა) და ორივე(გადაჭერა ყველა კიდეზე; ნაგულისხმევი).

SnapTolerance ვარიანტისაშუალებას გაძლევთ მიუთითოთ რამდენად შორს უნდა მიუახლოვდეს მოძრავი ელემენტი სამიზნე ელემენტის ზღვარს, სანამ არ მოხდება გაფუჭება. ნაგულისხმევი არის 20, რაც ნიშნავს 20 პიქსელს. მაგალითში გამოყენებულია მნიშვნელობა 50, რაც შეესაბამება უფრო დიდ მანძილზე დაჭერას. ძალიან მნიშვნელოვანია ამ პარამეტრის სწორი მნიშვნელობის არჩევა. თუ snapTolerance მნიშვნელობა ძალიან მცირეა, მომხმარებელმა შეიძლება ვერ შეამჩნიოს snap ეფექტი, ხოლო თუ ის ძალიან დიდია, გადაადგილებული ელემენტი დაიწყებს მოულოდნელ ნახტომებს, შორეულ ელემენტებზე გადახვევას.

VCL ბიბლიოთეკისთვის Borland-მა დანერგა Drag & Drop ინტერფეისის საკუთარი ვერსია (ითარგმნება როგორც "გადაათრიეთ და ჩამოაგდეთ"). ეს ინტერფეისი შიდაა - თქვენ შეგიძლიათ გაგზავნოთ და მიიღოთ დელფის ნებისმიერი საკონტროლო ელემენტი ფორმაში "(გარდა თავად ფორმისა). იგი განხორციელებულია Windows-ის შესაბამისი API ფუნქციების გამოყენების გარეშე - ისინი უნდა იქნას გამოყენებული სხვა ამოცანებთან კომუნიკაციის ორგანიზებისას გადათრევით და ჩამოაგდეს.

საკონტროლოზე მაუსის მარცხენა ღილაკზე დაჭერით, ჩვენ შეგვიძლია მისი „გადატანა“ ნებისმიერ სხვა კონტროლზე. პროგრამისტის თვალსაზრისით, ეს ნიშნავს, რომ გასაღების გადატანისა და გაშვების მომენტებში წარმოიქმნება გარკვეული მოვლენები, რომლებიც გადასცემენ ყველა საჭირო ინფორმაციას - ინდიკატორი გადასატან ობიექტზე, კურსორის მიმდინარე კოორდინატებს და ა.შ. ამ მომენტშიკურსორი მდებარეობს. ასეთი მოვლენის დამმუშავებელმა უნდა აცნობოს სისტემას, იღებს თუ არა მოცემული კონტროლი "გაგზავნას". როდესაც ღილაკი იხსნება მიმღებ კონტროლზე, წარმოიქმნება კიდევ ერთი ან ორი მოვლენა, რაც დამოკიდებულია მიმღების მზადყოფნაზე.

გაუქმება გადაიტანეთ აუქმებს ამჟამინდელ გადათრევა-ჩაშვებას ან ჩავლებით და დამაგრების ოპერაციას.

FindDragTarget ფუნქცია (const Pos: TPoint; AllowDisabled: Boolean): TControl;

ფუნქცია აბრუნებს საბაზისო კლასის ობიექტს TCკონტროლი , რომელსაც ეკრანის პოზიცია ეკუთვნის Pos პარამეტრით მითითებულ კოორდინატებს. ეს ფუნქცია გამოიყენება გადაათრიეთ და ჩამოაგდეს ან გადაათრიეთ და დაამაგრეთ ოპერაციების პოტენციური მიმღები. თუ ფანჯრის კონტროლი არ არის მითითებული პოზიციისთვის, მაშინ ფუნქცია ბრუნდებანული ... AllowDisabled პარამეტრი განსაზღვრავს თუ არა გამორთული ობიექტების დათვლა.

IsDragObject (გამგზავნი: TObject) ფუნქცია: ლოგიკური;

ფუნქცია განსაზღვრავს, არის თუ არა Sender პარამეტრში მითითებული ობიექტი კლასის შთამომავალი TDragObject . ეს ფუნქციაშეიძლება გამოყენებულ იქნას წყაროს პარამეტრად OnDragOver და OnDockOver ღონისძიების დამმუშავებლებში, რათა დადგინდეს, მიიღება თუ არა გადმოტანილი ობიექტი. ასევე ფუნქცია IsDragObjectშეიძლება გამოყენებულ იქნას როგორც Source პარამეტრი OnDragDrop და OnDockDrop ღონისძიების დამმუშავებლებში გადატანილი ობიექტის სწორად ინტერპრეტაციისთვის.

DragMode, DragCursor თვისებები, BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag მეთოდები, Accept პარამეტრი

ინფორმაციის ერთი ობიექტიდან მეორეზე გადატანის პროცესი ფართოდ გამოიყენება Widows-ში. შეგიძლიათ ფაილების გადატანა საქაღალდეებს შორის, საქაღალდეების გადატანა და სხვა.

ყველა თვისება, მეთოდი და მოვლენა, რომელიც დაკავშირებულია გადაადგილების პროცესთან, განსაზღვრულია TControl კლასში, რომელიც არის დელფის ყველა ვიზუალური კომპონენტის მშობელი. ამიტომ, ისინი საერთოა ყველა კომპონენტისთვის.

გადაწევის დაწყება განისაზღვრება 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 ღონისძიებისთვის, როგორც ნაჩვენებია ქვემოთ:

ახლახან გამიჩნდა იდეა ანდროიდისთვის თამაშის შემუშავება. დასაწყისისთვის გადავწყვიტე ჭადრაკის დაწერა. მეჩვენებოდა ტექნოლოგია Გადმოათრიე და ჩააგდეიდეალურია ფორმების გადაადგილების მექანიზმის დასანერგად. გაუთვითცნობიერებელებისთვის აღვნიშნავ, რომ გადათრევისა და ჩამოშვების მეთოდიაზოგიერთი გრაფიკული ობიექტის სხვებზე გადატანის და გაშვების შემდეგ მოქმედების შესრულების უნარში. უმარტივესი მაგალითი- წაშალეთ მალსახმობი თქვენი კომპიუტერის დესკტოპიდან ნაგვის ურნაში გადატანით. მალსახმობის ურნაში „გადაგდებით“ სისტემას ვეუბნებით, რომ გვინდა ვაიძულოთ ეს ორი ობიექტი ურთიერთქმედებაში. სისტემა იღებს ჩვენს სიგნალს და წყვეტს რა ქმედებებს მიიღებს. გადათრევა და ჩამოშვება ფართოდ გავრცელდა მისი ინტუიციური სიცხადის გამო. ეს მიდგომა გამყარებულია რეალური სამყაროს ობიექტებთან დაკავშირებული ჩვენი გამოცდილებით და მშვენივრად მუშაობს ვირტუალურ გარემოში. რაც შეეხება ჭადრაკს, drag and drop-ის გამოყენებით ტექნოლოგიურად უფრო ადვილია იმ უჯრედის დადგენა, სადაც მომხმარებელმა გადმოათრია ფიგურა, ვინაიდან არ არის საჭირო უჯრედის ნომრის გამოთვლა ჩამოშვების წერტილის კოორდინატებით. ამ სამუშაოს ვირტუალური მანქანა აიღებს.

Drag n Drop ტექნოლოგიის გამოყენების მიზანი

გადაწევის ტექნოლოგიის გამოყენება საშუალებას მაძლევს გადავწყვიტო სამი პრობლემა პატარა სისხლით:

1. კურსის ვიზუალიზაცია. როდესაც მომხმარებელი შეეხება ფიგურას და იწყებს მის მოძრაობას ეკრანზე, ფორმა იცვლება პატარა ნახატით. ამრიგად, მომხმარებელს ესმის, რომ ფიგურა არის აღბეჭდილი.
2. მე შევზღუდე ფორმის მოძრაობის არეალი დაფის ზომით.
3. თუ მომხმარებელმა გამოუშვა ფორმა არასწორ ადგილას, ის უნდა დაბრუნდეს თავდაპირველ მდგომარეობაში.

ამოცანები ასახულია, მოდით გადავიდეთ მათ შესრულებაზე.

შეცვალეთ ImageView შეხებით

ჩემი ყველა ფორმა არის ImageView ობიექტი. სამწუხაროდ, აღმოჩნდა, რომ Drag & Drop-ის დანერგვა ანდროიდში არ იძლევა საშუალებას „გარედან“ შეცვალოს ობიექტის გამოსახულება შეხებისას. მიუხედავად ამისა, ეს ამოცანა საკმაოდ ამოსახსნელია API-ის საშუალებით. ჩვენ გვჭირდება რამდენიმე მარტივი ნაბიჯის შესრულება:

1. შექმენით DragShadowBuilder ობიექტი.
2. გამოიძახეთ startDrag მეთოდი.
3. დამალეთ ჩვენი ImageView, რომელიც აჩვენებს ფორმას setVisibility მეთოდის გამოძახებით View.INVISIBLE პარამეტრით. შედეგად, ეკრანზე დარჩება მხოლოდ DragShadowBuilder ობიექტი, რომელიც სიგნალს აძლევს მომხმარებელს, რომ აითვისოს ფორმა.

ეს ნაბიჯები უნდა განხორციელდეს ImageView-ის OnTouchListner დამმუშავებელში. ამისათვის ჩვენ უგულებელყოფთ onTouch მეთოდს:

@ შეხებაზე საჯარო ლოგიკის უგულებელყოფა (ხედის ნახვა, MotionEvent motionEvent) (if (motionEvent. GetAction () == MotionEvent. ACTION_DOWN) (ClipData clipData = ClipData. NewPlainText ("", ""); ნახვა. DragShadowBuilder dsb = ახალი View. DragSha (ნახვა); ნახვა. startDrag (clipData, dsb, ხედი, 0); ნახვა. setVisibility (ნახვა. INVISIBLE); დაბრუნება true;) else (return false;))

ყველაფერი ძალიან მარტივია. ასე რომ, ჩვენ გავარკვიეთ გამოსახულების ჩანაცვლება, მოდით გადავიდეთ შემდეგ ამოცანაზე.

გადაწევის არეალის შეზღუდვა გადაადგილების ფუნქციისთვის

ერთი პრობლემაა გადაადგილების არეალის შეზღუდვასთან დაკავშირებით. საქმე იმაშია, რომ თუ ფორმას დაფს გარეთ ჩამოაგდებთ, ვარდნის მოვლენა არ მოხდება, რადგან მომხმარებელმა ობიექტი ნულიდან ჩამოაგდო და ობიექტს არაფერი აქვს ურთიერთქმედება. შედეგად, ფიგურა არ უბრუნდება პირვანდელ მდგომარეობას და სამუდამოდ დარჩება დამალული. დიდი დრო გავატარე დოკუმენტაციის კითხვაზე, მაგრამ ჯერ კიდევ ვერ ვიპოვე გზა, რომ შევზღუდო ობიექტების გადაზიდვის დიაპაზონი. შთაგონება მოულოდნელად მოვიდა. ტერიტორიის შეზღუდვა საერთოდ არ მჭირდება, უნდა ვიცოდე მომხმარებელმა სწორად გამოუშვა თუ არა ფორმა.

სწორი გამოშვების დადგენა
ჩემს კითხვებზე პასუხები ვიპოვე 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) (შეიცავს; სხვას შეიცავს;Dragable) if (dragAction == DragEvent. ACTION_DRAG_ENTERED) (შეიცავსDragable = true;) სხვა შემთხვევაში if (dragAction == DragEvent. ACTION_DRAG_ENDED) (if (dropEventNotHandled (dragEvent)) (dragView. setVisibility (View. else if (VisibLEAction)); = DragEvent. ACTION_DROP & amp; & amp; შეიცავსDragable) (checkForValidMove ((ChessBoardSquareLayoutView) ხედი, dragView); dragView. SetVisibility (View. VISIBLE);) დაბრუნება true;) პირადი ლოგიკური dropEventNotHandled (DragTrag) )

ახლა მომხმარებელს შეუძლია ფიგურის გაშვება სადმე და არაფერი საშინელი არ მოხდება.

დასაშვები მოძრაობების განსაზღვრა

სტატიის ბოლო ნაწილი ეძღვნება იმ ნაბიჯის მართებულობის შემოწმებას, რომლის გაკეთებასაც მომხმარებელი ცდილობს. სანამ ამ თემის დეტალურ განხილვას დავიწყებ, მცირე შენიშვნას გავაკეთებ ჩემი განაცხადის სტრუქტურის ახსნით. ჭადრაკი წარმოდგენილია როგორც 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) (შეიცავს; სხვას შეიცავს;Dragable) if (dragAction == DragEvent. ACTION_DRAG_ENTERED) (შეიცავსDragable = true;) სხვა შემთხვევაში if (dragAction == DragEvent. ACTION_DRAG_ENDED) (if (dropEventNotHandled (dragEvent)) (dragView. setVisibility (View. else if (VisibLEAction)); = DragEvent. ACTION_DROP & amp; & amp; შეიცავსDragable) (checkForValidMove ((ChessBoardSquareLayoutView) ხედი, dragView); dragView. SetVisibility (View. VISIBLE);) დაბრუნება true;)

როგორც ხედავთ, მიუხედავად იმისა, გადაადგილება ლეგალურია თუ არა, ImageView დაყენებულია ხილულ მდგომარეობაში. მინდოდა მომხმარებელმა ენახა ფორმის მოძრაობა. ადრე აღვნიშნე, რომ უჯრედი LayoutView-ის შთამომავალია. ეს კეთდება იმისთვის, რომ გაადვილდეს ImageView-ის გადატანა უჯრედიდან უჯრედში. ქვემოთ მოცემულია checkForValidMove მეთოდის კოდი, რომელიც აჩვენებს, თუ როგორ მოძრაობს ImageView.

პირადი void checkForValidMove (ChessBoardSquareLayoutView ხედი, View dragView) (if (mediator. isValidMove (view)) (ViewGroup მფლობელი = (ViewGroup) dragView. getParent (); მფლობელი. removeView (dragView); ნახვა. addView (dragGravity); ნახვა. (გრავიტაცია. CENTER); ხედი. ShowAsLanded (); შუამავალი. HandleMove (ხედვა);))

ვიმედოვნებ, რომ ეს სტატია დაგეხმარებათ საკუთარი პროექტების შემუშავებაში.