Bir şeyi alıp koymak, ne almanız gerektiğini ve nereye koyacağınızı yazmaktan daha kolaydır. Elbette, bir fare veya benzeri bir cihaz olmadan hiçbir şeyi seçemez veya belirtemezsiniz, ancak mevcut durumda bile, sürükle ve bırak fikrini kullanmak çok doğal ve rahattır.

Fikrin kapsamı sadece çevrimiçi mağazalar, dijital kütüphaneler, arama veya Bilgi sistemi, aynı zamanda uygulanan alan. Fikir, bir programcının katılımı olmadan etkileşimli olarak oluşturulan ve sürdürülen sitelerin ve öğelerinin geliştirilmesinde çok uygulanabilir.

Fikrin açıklaması

Seçin, taşıyın ve koyun - fikir doğal ve kullanışlıdır. Fare bilgisayar için vazgeçilmez bir aksesuar haline geldiğinde doğmamış olması şaşırtıcı.

En belirgin örnek, bir çevrimiçi mağazada bir ürün seçmektir. İstediğiniz ürünü fare ile seçin ve alışveriş sepetine sürükleyin - basit, doğal ve rahat. Dosya Yükleme: Bir belgeyi tarayıcı penceresinin dışına alıp bir sayfa elemanına yerleştirmek, böylece belgenin sunucuya transferini başlatmak da pratik bir fikirdir.

Geliştirici için, "sürükle ve bırak" fikri, etiketlerin koordinatlarını ve boyutlarını manuel olarak yeniden hesaplamadan sayfa öğelerinin manipülasyonu, birden fazla öğe seçme ve bunları hizalama ve blok etiketlerinin kenarlarını hareket ettirme yeteneğidir.

HTML ve CSS - harika diller Etiketlerin açıklamaları ve tasarım stilleri, ancak bir geliştiricinin koordinatları ve boyutları manuel olarak yeniden hesaplamadan sayfa öğelerini etkileşimli olarak değiştirme yeteneği olduğunda, bu, işi daha rahat ve verimli hale getirir.

Kolay dosya aktarımı

"Sürükle ve bırak": İngilizce'den Rusça'ya çeviri kelimenin tam anlamıyla "sürükle ve bırak" gibi geliyor. Pratikte kulağa daha hoş geliyor ve daha iyi çalışıyor: seçti, aktardı ve bıraktı - basit ve doğal.

Bir sayfadan bir sayfaya, bir sunucuya veya başka bir kullanım için dosya aktarımlarını uygulamak çok basittir.

Bu örnekte, masaüstündeki birkaç dosya fare ile seçilmiştir (soldaki şekil). Seçimde farenin sol tuşuna basıldı ve seçilen sepete "gitti". Tarayıcının kendisi bunun nasıl olduğunu gösterdi, bir "kopya" ipucu yazdı ve taşınan dosyaların ana hatlarını oluşturdu.

Fare sepetin üzerine geldiğinde, ziyaretçi sol fare düğmesini bıraktı, sürükle ve bırak olayı gerçekleşti ve site sayfasında (alt resim), JavaScript kodu ziyaretçinin sağladığı tüm dosyaları alıp işleyebildi. sayfa (site).

Uygulama Açıklaması

Bu prosedürü gerçekleştiren kod çok basittir. Acemi bir geliştirici bile herhangi bir kullanım durumunda tekrarlayabilir.

Burada, kullanıcı arabirimi iki etiketle temsil edilir: scPlaceFile (bu, dosyaları koymak istediğiniz sepetin kendisidir) ve scPlaceFiles (bu, dosyaların işlenmesinin sonucudur, bu durumda bunların bir listesi).

Sayfanın mantığı aşağıdaki gibidir. Sayfa tarayıcıya yüklendiğinde, sepete "ondrop" olay işleyicisi atanır - koyma, geri kalan olaylar engellenir ve kullanılmaz.

Sayfa normal çalışıyor ancak ziyaretçi dosyayı (dosyaları) seçip sepet görüntüsüne yani scPlaceFile etiketine sürüklediği anda “files var geldi” olayı işlenecektir.

Bu işleyici basitçe dosyaların bir listesini görüntüler. Numaraları event.dataTransfer.files.length içindedir ve her dosyayla ilgili bilgiler event.dataTransfer.files[i].name içindedir. Alınan verilerle ne yapılacağı geliştirici tarafından belirlenir, bu durumda alınan dosyaların bir listesi basitçe oluşturulur.

İşlendikten sonra olay engellenir ve yayılmaz. Bu, tarayıcının amatör faaliyetlerde bulunmaması ve alınan bilgilerin işlenmesine müdahale etmemesi için gereklidir.

DnD ve harici veriler

Görüntüleri "sürükle ve bırak" yöntemiyle sunucuya yüklemek bu teknolojide yaygın bir uygulamadır. Tipik olarak bir geliştirici, olağan şekilde çalışan (2) bir dosya yükleme formu (1) oluşturur. Ziyaretçi normal mod dosyaları seçin ve yükleyin.

Ancak, bir ziyaretçi formda belirli bir yere sürükleyip bırakırsa, dosya adı alanı (dosyalar) otomatik olarak doldurulacaktır.

Bu iyi karar. Bilgisayarda fare olmadığını kabul etmek elbette çok zor. Ancak kullanıcı arabirimini olağan şekilde ve DnD uygulamasında geliştirmek daha iyidir.

DnD ve dahili veriler

Ziyaretçinin çıkarlarına özen göstermek her zaman önemlidir, ancak geliştiricinin endişeleri de önemlidir. "Sürükle ve bırak"ı yalnızca standart yollarla değil, aynı zamanda sayfa öğelerinde fare olaylarını işleyerek de uygulayabilirsiniz.

Etiket koordinat değerlerini ve boyutlarını hesaplama görevi sürekli olarak ortaya çıkar. Manuel hesaplama iyi bir uygulamadır, ancak etkileşimli seçenek daha uygundur. Tüm etiketler her zaman dikdörtgen şeklindedir ve öğelerin kenarlarındaki fare olaylarını izleyerek öğeleri otomatik olarak sayfada doğru yere taşıma veya değiştirme yeteneği oluşturabilirsiniz.

Fare düğmesi tıklama olayını işleme - örneğin, öğenin kenarlarından biri gibi tıklama konumunun koordinatlarını hatırlama. Fareyi hareket ettirin - kenar istenen yönde hareket eder. Fare düğmesinin bırakılması - kenar durur ve koordinatları değişir. Bu şekilde elemanın konumunu veya boyutunu değiştirebilirsiniz.

Resmi olarak sürükle ve bırak değildir, ancak etkisi benzer ve pratiktir. Herhangi bir sayfa öğesi için evrensel işleyiciler yaparak iyi bir etkileşimli sonuç elde edebilir, geliştirmeyi hızlandırabilir ve kodu basitleştirebilirsiniz.

Görsel ve manuel programlama

Bilgisayardaki fare ve akıllı telefondaki parmaklar, kullanıcı arayüzünün (ziyaretçi, geliştirici) uygulanmasına tamamen farklı yaklaşımlardır. Tarayıcılar arası uyumluluk için tamamen doğal ve modern bir gerekliliktir.

Bütün bunlar birlikte sayfa oluşturmayı zorlaştırır, ancak içine sürükleyip bırakma fikrini uygulamak standart biçim, olaylarını kullanarak, bu fikri öğelerdeki olağan olaylarla birleştirerek, sayfanın oluşturulmasının görsel olarak gerçekleşeceği bir mekanizma uygulayabilirsiniz.

Şimdi bir elementin veya elementlerin seçimine bakalım. Seçim gerçeği - bir bağlam menüsünün görünümü, örneğin amaç, seçileni (sol, sağ, orta) hizalamak veya öğeleri aynı adımda dikey veya yatay olarak dağıtmak veya boyutlarını değiştirmek (minimum, maksimum).

Koordinatların ve boyutların otomatik yeniden hesaplanması manuel olarak tercih edilir. Daha az hata - hedefe daha hızlı ulaşılır. Ek olarak, bir tarayıcıda bir sayfa oluşturabilir, öğelerin konumunu ve boyutunu kaydedebilirsiniz. Bu sayfayı bir akıllı telefonda açarak koordinatları ve boyutları düzeltebilir ve bunları aşağıdakiler için hatırlayabilirsiniz. belirli model akıllı telefon veya tarayıcı sürümü.

Bu nedenle, tarayıcılar arası uyumluluk gereksinimiyle manuel olarak uyumlu olmayan aynı sayfada görüntülenecek farklı veriler olacaktır. çeşitli cihazlar ve farklı tarayıcılarda.

Ziyaretçinin bu prosedürleri kendi başına yapmasına izin verirseniz ve geliştirici tarafından sağlananlar arasından gerekli sayfa öğelerini seçerseniz, tarayıcılar arası uyumluluğu ve sayfanın gerekli işlevselliğini sağlamak mümkündür. kullanıcının görüşü.

Sürükle ve Bırak özelliği, iPad'inizin performansını artırmanıza yardımcı olabilir. Bunu nasıl kullanabileceğiniz aşağıda açıklanmıştır.

Böylece bir dosyayı bir bulut depolama hizmetinden diğerine taşıyabilir, teklif eklemek veya oluşturmak için Safari'den bir metin düzenleme uygulamasına metin kopyalayabilirsiniz. destek olmak dosya depolama uygulamasındaki bazı fotoğraflar.

Fotoğraflar, dosyalar ve metin nasıl sürüklenir ve bırakılır

1. Başka bir uygulamaya sürüklemek istediğiniz fotoğrafa, dosyaya veya vurgulanan metne dokunun ve basılı tutun.

2. Öğeyi istediğiniz konuma sürükleyin. bu başvuru veya Slayt Üstü veya Bölünmüş Görünüm'de açıp serbest bıraktığınız başka bir şey.

Aynı anda birden fazla fotoğraf veya dosya nasıl sürüklenip bırakılır

1. Sürüklemek istediğiniz fotoğraf veya dosyalardan birine dokunun ve basılı tutun.

2. Geçerli öğeyi sürüklerken, yine sürüklemek istediğiniz başka bir fotoğrafa veya dosyaya dokunun. Taşımak istediğiniz kadar elementle tekrar yapın.

3. Tüm seçili nesneleri, Slide Over veya Split View'da açtığınız başka bir uygulamada belirlenen yere sürükleyin ve bırakın.

Bir uygulamadan diğerine metin nasıl sürüklenir

1. Seçmek için metnin sürüklemek istediğiniz kısmına dokunun ve basılı tutun.

2. Sürüklemek istediğiniz metnin geri kalanını vurgulamak için seçim noktalarını kullanın.

3. Seçili metni basılı tutun.

4. Metni yerleştirmek istediğiniz uygulamaya sürükleyin ve bırakın.

"Sürükle ve Bırak" kullanılarak aynı anda birkaç uygulamanın simgelerinin konumu nasıl değiştirilir

Çoğu iOS sürükle ve bırak işlevi yalnızca iPad'de çalışırken, bu numara aslında hem iPhone hem de iPad'de çalışır. Bu, kullanarak ana ekrandaki uygulamaların konumunu düzenlemenizi sağlar. « Tek tek taşımak yerine Sürükle ve Bırak" seçeneğini kullanın.

1. Ana ekranda yeniden konumlandırmak istediğiniz uygulamanın simgesine dokunun ve basılı tutun.

2. Ayrıca taşımak istediğiniz ek uygulamalara dokunun.

3. Bu uygulamaları, olmasını istediğiniz sayfaya veya klasöre sürükleyin ve bırakın.

182

Bu örnekte, bir div elemanı seçiyoruz ve onu çağırarak hareket ettirilebilir hale getiriyoruz. sürüklenebilir() yöntemi. Aşağıdaki şekilde gösterildiği gibi, açılan belgede öğe normal konumunu alır, ancak bundan sonra fare imleci ile tarayıcı penceresinde herhangi bir yere taşınabilir:

Sürükle ve bırak özelliği kendi başına kullanışlıdır, ancak daha sonra açıklanacak olan Droppable etkileşimi ile birlikte kullanıldığında daha da faydalıdır.

Sürüklenebilir etkileşim, yalnızca belirli HTML işaretlemesi ve CSS stilleri kullanılarak uygulanır. Bu, bu işlevselliğin hemen hemen her tarayıcıda çalışacağı, ancak bununla donatılmış öğelerin benzer yerel sürükle ve bırak özellikleriyle çalışamayacağı anlamına gelir. işletim sistemleri.

HTML5 belirtimi tarafından tanımlanan sürükle ve bırak işlemleri, genellikle yerel işletim sistemi mekanizmaları kullanılarak uygulanır. jQuery UI sürükle ve bırak mekanizmasını kullanıyorsanız, çakışmaları önlemek için HTML5 eşdeğerlerini devre dışı bırakmak en iyisidir. Bunu yapmak için belgenin gövde öğesinin sürüklenebilir özniteliğini false olarak ayarlayın.

Sürüklenebilir Etkileşimi Özelleştirme

Sürüklenebilir etkileşim için birçok özelleştirme seçeneği vardır. Aşağıdaki bölümlerde ele alınan en önemli özellikler aşağıdaki tabloda özetlenmiştir:

Sürüklenebilir etkileşim özellikleri

Mülk	Tanım
eksen	Hareketi belirli yönlerle sınırlar. Varsayılan değer false'tur, yani herhangi bir kısıtlama yoktur, ancak "x" (yalnızca x ekseni boyunca hareket ettirin) veya "y" (yalnızca y ekseni boyunca hareket ettirin) değerini de belirtebilirsiniz.
muhafaza	Yüzen öğenin konumunu ekranın belirli bir alanıyla kısıtlar. Desteklenen değer türleri aşağıdaki tabloda karşılık gelen örnekle açıklanmıştır. Varsayılan değer false, yani herhangi bir kısıtlama yok
gecikme	Bir öğenin hareket etmeden önce sürüklenmesi gereken süreyi belirtir. Varsayılan değer 0'dır, yani gecikme yok
mesafe	Kullanıcının bir öğeyi fiilen hareket etmeden önce başlangıç ​​konumundan sürüklemesi gereken mesafeyi belirtir. Varsayılan değer 1 pikseldir
Kafes	Taşınan öğenin ızgara hücrelerine bağlanmasını zorlar. Varsayılan değer yanlıştır, yani bağlayıcı yoktur

Hareket yönlerinin kısıtlanması

Bir öğenin hareketini belirli yönlerle sınırlandırmanın birkaç yolu vardır. Bunlardan ilki, hareket yönünü X veya Y ekseni ile sınırlandırmanızı sağlayan eksen seçeneğini kullanmaktır.Aşağıda bir örnek gösterilmiştir:

...

Örnek Çalıştır

Bu örnekte, iki div elemanı tanımlıyoruz, bunları ile seçiyoruz. jQuery ve draggable() yöntemini çağırın. Bu yöntem, başlangıçta her iki div'in x-yönünde hareket etmesini kısıtlayan bir nesne iletilir.Daha sonra jQuery filter() yöntemini uygulayarak, jQuery tüm belgeyi tekrar aramadan dragV öğesini seçebilir ve izin verilen farklı bir harekete ayarlayabiliriz. yön - Y ekseni boyunca Böylece, bir div öğesinin yalnızca dikey yönde ve diğerinin - yalnızca yatay yönde sürüklenebildiği bir belge elde ederiz. Sonuç şekilde gösterilmiştir:

Bir öğeyi taşımak için izin verilen alanı kısıtlama

Bir öğeyi sürükleyebileceğiniz ekranın alanını da sınırlayabilirsiniz. Bunun için çevreleme seçeneği kullanılır. Bu seçenekte belirtilebilecek değer biçimleri aşağıdaki tabloda açıklanmıştır:

Kapsama seçeneğinin kullanımına ilişkin bir örnek aşağıda gösterilmiştir:

...

Örnek Çalıştır

Bu örnekte, her iki öğe de yalnızca içeriye sürüklenebilecekleri şekilde hareket etmek üzere sınırlandırılmıştır. ana öğe, sabit boyutlu bir div öğesidir. Yazılan eksen seçeneği ile hareketli div'lerden biri için ek kısıtlama, bu, yalnızca ana öğenin içinde yatay olarak hareket edebileceği anlamına gelir. Sonuç şekilde gösterilmiştir:

Bir öğeyi ızgara hücrelerine taşıma yeteneğini kısıtlama

Izgara seçeneği, taşınan öğenin ızgara hücrelerine bağlanmasını ayarlamanıza olanak tanır. Bu seçenek, ızgara hücrelerinin genişliğini ve yüksekliğini piksel cinsinden belirten iki öğeden oluşan bir diziyi kabul eder. Izgara seçeneğini kullanmanın bir örneği aşağıda gösterilmiştir:

...

Örnek Çalıştır

Bu örnekte, ızgara 100 piksel genişliğe ve 50 piksel yüksekliğe ayarlanmıştır. Bir öğeyi sürüklediğinizde, bir (görünmez) hücreden diğerine "atlar". Yakalama efekti, etkileşim işlevselliği için harika bir kullanım durumudur, ancak ekran görüntüleri ile iletmek zordur.

Serbest hareket eksenini 1 olarak ayarlayarak yalnızca bir yön için yakalama efekti oluşturabilirsiniz. Örneğin, ızgara seçeneğini olarak ayarlarsanız, öğe yatay olarak hareket ederken 100 piksel genişliğindeki ızgara hücrelerine yapışacaktır, ancak dikey olarak serbestçe hareket edecektir. .

Seyahat Gecikmesi

Kayan bir öğenin sürüklenmesini geciktirmenize izin veren iki seçenek vardır. Gecikme seçeneğiyle, öğe fiilen hareket ettirilmeden önce kullanıcının fare işaretçisini sürüklemesi gereken süreyi milisaniye cinsinden ayarlayabilirsiniz. Başka bir gecikme türü, bir öğe onu izlemeden önce kullanıcının fare işaretçisini sürüklemesi gereken mesafeyi piksel cinsinden belirten uzaklık seçeneği tarafından sağlanır.

Her iki ayarın da kullanıldığı bir örnek aşağıda gösterilmiştir:

...

Örnek Çalıştır

Bu örnekte, biri gecikme seçeneğiyle ayarlanmış bir gecikmeye, diğeri ise mesafe seçeneğine sahip olan iki kayan öğe vardır.

Gecikme seçeneği tarafından belirtilen gecikme durumunda, kullanıcı, öğeyi fiilen hareket ettirmeden önce belirtilen süre boyunca sürüklemelidir. Bu örnekte, bu boşluğun süresi 1000 ms'dir. Bu süre boyunca fareyi hareket ettirmek gerekli değildir, ancak tüm gecikme süresi boyunca fare düğmesi basılı kalmalıdır, bundan sonra öğe fareyi hareket ettirerek hareket ettirilebilir. Gecikme süresi geçtikten sonra, taşınmakta olan öğe, daha önce tartışılan ızgara, bölge ve eksen seçenekleri tarafından dayatılan kısıtlamalara tabi olarak, fare işaretçisinin konumuna yapışacaktır.

Uzaklık seçeneği de benzer bir etkiye sahiptir, ancak bu durumda kullanıcı, fare işaretçisini öğenin başlangıç ​​konumundan herhangi bir yönde en az belirtilen sayıda piksel sürüklemelidir. Taşınmakta olan öğe daha sonra mevcut işaretçi konumuna atlayacaktır.

Her iki ayarı da aynı öğeye uygularsanız, taşınmakta olan öğe, her iki gecikme kriteri karşılanana kadar hareket etmeyecektir, yani. öğeyi sürükleme girişimi belirtilen süre boyunca ve fare işaretçisi belirtilen sayıda pikseli hareket ettirene kadar.

Sürüklenebilir Etkileşim Yöntemlerini Kullanma

Sürüklenebilir etkileşim için tanımlanan yöntemlerin tümü, widget'larda zaten görmüş olduğunuz temel yöntemler grubunun bir parçasıdır. Sürüklenebilir etkileşime özgü yöntemler sağlanmamıştır, bu nedenle bunları ayrıntılı olarak ele almayacağız. Kullanılabilir yöntemlerin listesi aşağıdaki tabloda gösterilmektedir:

Sürüklenebilir Etkileşim Olaylarını Kullanma

Sürüklenebilir etkileşim, bir öğenin sürüklendiğini bildiren basit bir dizi olayı destekler. Bu olaylar aşağıdaki tabloda açıklanmıştır:

Widget olaylarında olduğu gibi, bu olaylara da tepki verilebilir. Başlatma ve durdurma olaylarının ele alınmasına ilişkin bir örnek aşağıda gösterilmiştir:

...

Örnek Çalıştır

Bu örnek, sürükleme işlemi sırasında bir öğenin metin içeriğini değiştirmek için başlatma ve durdurma olaylarını kullanır. Bu avantaj, Sürüklenebilir etkileşimin tamamen HTML ve CSS kullanılarak uygulanması gerçeğinden kaynaklanmaktadır: jQuery'yi, ekranda hareket ederken bile kayan bir öğenin durumunu değiştirmek için kullanabilirsiniz.

Bırakılabilir etkileşimi kullanma

Bazı durumlarda, bir öğeyi tek başına sürüklemek yeterli olabilir, ancak en çok Droppable etkileşimi ile birlikte kullanıldığında yararlıdır.

Droppable etkileşiminin uygulandığı (elemanları kabul eden) elemanlar, Sürüklenebilir etkileşimi ile oluşturulan bırakılabilir elemanları kabul etme yeteneği kazanır.

Alıcı elemanlar ile oluşturulur droppable() yöntemi, ancak kullanışlı işlevsellik elde etmek için, bu tür etkileşim için tanımlananlar arasından olay işleyicileri oluşturmanız gerekir. Mevcut olaylar aşağıdaki tabloda gösterilmektedir:

Bırakılabilir etkileşim olayları

Etkinlik	Tanım
oluşturmak	Bir öğeye Droppable etkileşimi uygulandığında gerçekleşir
etkinleştirmek	Kullanıcı kayan bir öğeyi sürüklemeye başladığında gerçekleşir
devre dışı bırakmak	Kullanıcı kayan bir öğeyi sürüklemeyi bıraktığında gerçekleşir
üzerinde	Kullanıcı yüzen bir öğeyi alıcı öğenin üzerine sürüklediğinde gerçekleşir (ancak fare düğmesinin henüz serbest bırakılmadığı varsayılırsa)
dışarı	Kullanıcı, yüzen bir öğeyi alıcı öğenin dışına sürüklediğinde gerçekleşir
düşürmek	Kullanıcı, alıcı öğede kayan bir öğe bıraktığında gerçekleşir

Tek bir bırakma olay işleyicisine sahip basit bir alıcı öğe oluşturma örneği aşağıda verilmiştir:

...

Örnek Çalıştır

Bu örnekte, metin içeriği "Burada bırak" dizesiyle temsil edilen belgeye bir div öğesi eklenir. Bu öğeyi jQuery kullanarak seçiyoruz ve droppable() yöntemini çağırıyoruz, ona drop olayı için bir işleyici tanımlayan bir settings nesnesi iletiyoruz. Bu olaya verilen yanıt, text() yöntemini kullanarak kayan öğenin metnini değiştirmektir.

Bu örnekte oluşturulan sürükle ve bırak etkileşimli deneyimi en basitidir, ancak olasılıkları açıklamak için yararlı bir bağlam sağlar. ortak çalışma Sürüklenebilir ve Bırakılabilir etkileşimler. Öğeleri sürükleyip bırakma işleminin farklı aşamaları şekilde gösterilmiştir:

Bütün bunlar çok basit görünüyor. Taşınan elemanı alıcı elemanın üzerine gelene kadar sürükleyip bırakıyoruz. Bırakılan öğe, bırakıldığı yerde kalır ve metin içeriği, bırakma olayının ortaya çıkmasına yanıt olarak değişir. Aşağıdaki bölümler, kullanıcı deneyimini geliştirmek için diğer Droppable etkileşim olaylarını nasıl kullanacağınızı gösterir.

Hedef Alma Nesnesi Vurgusu

Etkinleştirme ve devre dışı bırakma olaylarını kullanarak, kullanıcı bir öğeyi sürükleme işlemine başladığında hedef alıcı nesneyi vurgulayabilirsiniz. Çoğu durumda, bu fikir çok verimlidir, çünkü kullanıcıya hangi öğelerin sürükle ve bırak modelinin parçası olduğuna dair güvenilir bir gösterge sağlar. İlgili örnek aşağıda gösterilmiştir:

... $(function() ( $("#sürüklenebilir").draggable(); $("#droppable").droppable((drop: function() ( $("#sürüklelebilir").text("Bırakıldı") ") ), etkinleştirin: function() ( $("#droppable").css(( border: "medium double green", backgroundColor: "lightGreen" )); ), deactivate: function() ( $("#droppable) ").css("kenarlık", "").css("arka plan rengi", ""); ) )); )); ... Örneği çalıştırın

Kullanıcı öğeyi sürüklemeye başlar başlamaz, alıcı öğemizle ilişkili activate olayı tetiklenir ve işleyici işlevi değiştirmek için css() yöntemini kullanır. CSS özellik sınırı ve bu öğenin arka plan rengi. Sonuç olarak, hedef alıcı öğe vurgulanır ve kullanıcıya bu öğe ile taşınan öğe arasında bir bağlantı olduğunu gösterir.

Devre dışı bırakma olayı, alıcı öğeden CSS özellik değerlerini kaldırmak ve kullanıcı fare düğmesini bıraktığı anda sıfırlamak için kullanılır. (Bu olay, sürüklenen öğenin alıcı öğede bırakılıp bırakılmadığına bakılmaksızın, bir öğenin sürüklenmesi durduğunda patlar.) Bu işlem şekilde gösterilmiştir:

Eleman Örtüşme İşlemi

Sürükle ve bırak teknolojisi, olay işleme üzerine ve dışına eklenerek geliştirilebilir. Over olayı, taşınan öğenin %50'si alıcı öğenin herhangi bir bölümünün üzerinde olduğunda meydana gelir. Out olayı, önceden örtüşen öğeler artık üst üste gelmediğinde tetiklenir. Bu olaylara örnek bir yanıt aşağıda gösterilmiştir:

$(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#draggable").text("Bırakıldı") ) , etkinleştir: function() ( $("#droppable").css(( border: "orta çift yeşil", backgroundColor: "lightGreen" )); ), devre dışı bırak: function() ( $("#droppable"). css("border", "").css("background-color", ""); üzerinde: function() ( $("#droppable").css(( border: "orta çift kırmızı", backgroundColor : "red" )); ), çıkış: function() ( $("#droppable").css("border", "").css("background-color", ""); ) )); ) ); Örnek Çalıştır

Burada önceki örnekte olduğu gibi aynı işleyici işlevleri kullanılır, ancak bu durumda bunlar over ve out olaylarıyla ilişkilendirilir. Yüzen öğenin en az %50'si alıcı öğeyle çakıştığında çerçevelenir ve şekilde gösterildiği gibi arka plan rengi değişir:

Bu %50'lik sınıra, daha sonra gösterileceği gibi alıcı eleman oluşturulurken ayarlanabilen tolerans eşiği adı verilir.

Bırakılabilir etkileşim kurulumu

Bırakılabilir etkileşim, davranışını özelleştirmek için değiştirebileceğiniz bir dizi özelliğe sahiptir. Bu özellikler aşağıdaki tabloda listelenmiştir:

Bırakılabilir etkileşim özellikleri

Mülk	Tanım
engelli	Bu seçenek doğruysa, Bırakılabilir etkileşim işlevi başlangıçta devre dışı bırakılır. Varsayılan değer yanlış
kabul	Alıcı öğenin yanıt vereceği kayan öğeler kümesini daraltır. Varsayılan değer *'dir, herhangi bir öğeyle eşleşir
aktifSınıf	Activate olayına yanıt olarak atanacak ve deactivate olayına yanıt olarak kaldırılacak bir sınıfı tanımlar.
hoverClass	Bir over olayına yanıt olarak atanacak ve bir out olayına yanıt olarak kaldırılacak bir sınıfı tanımlar.
hoşgörü	Over olayının meydana geldiği minimum örtüşme derecesini belirtir

İzin verilen kayan öğelerle ilgili kısıtlama

Kabul seçeneğini kullanarak Droppable birlikte çalışabilirlik işlevine sahip bir öğe tarafından kabul edilecek bırakılabilir öğeler kümesini sınırlayabilirsiniz. Kabul seçeneğinin değeri bir seçici olmalıdır. Bu olayın bir sonucu olarak, Droppable etkileşimleri yalnızca taşınan öğe belirtilen seçiciyle eşleşirse gerçekleşir. İlgili örnek aşağıda gösterilmiştir:

...

Örnek Çalıştır

Bu örnekte, drag1 ve drag2 kimliklerine sahip iki kayan öğe vardır. Kabul eden bir öğe oluştururken, yalnızca drag1 öğesinin kabul edilebilir bir kayan öğe olacağını belirttiğimiz kabul seçeneği kullanılır.

drag1 öğesini sürüklerken, önceki örneklerdekiyle aynı efekti göreceksiniz. Etkinleştirme, devre dışı bırakma, aşırı ve çıkış olayları, uygun zamanlarda alıcı elemanda tetiklenir. Aynı zamanda, kabul parametresinde belirtilen seçiciyle eşleşmeyen bir drag2 öğesini sürüklerseniz, bu olaylar tetiklenmeyecektir. Bu eleman serbestçe hareket ettirilebilir, ancak alıcı eleman tarafından kabul edilmeyecektir.

text() yöntemini çağırmak için kabul edilebilir bir kayan öğeyi seçme şeklinizdeki değişikliğe dikkat edin. Belgede yalnızca bir kayan öğe olduğunda, bunun için id niteliği yeterliydi:

Bırak: function() ( $("#sürüklenebilir").text("Bırakıldı") ),

Bu örnekte, iki kayan öğe vardır ve bu durumda metin, hangisinin alıcı öğe için kabul edilebilir olduğuna bakılmaksızın her zaman aynı kayan öğede değişeceğinden, id özniteliğine göre seçim yapmak istenen sonucu vermeyecektir.

Çözüm, jQuery UI'nin sağladığı ui nesnesini her olay işleyicisine ek bir argüman olarak kullanmaktır. ui nesnesinin sürüklenebilir özelliği, kullanıcının hedef öğeye sürüklediği veya bırakmaya çalıştığı öğeyi içeren bir jQuery nesnesi döndürür ve istenen öğenin aşağıdaki gibi seçilmesine izin verir:

Bırak: function(event, ui) ( ui.draggable.text("Bırakıldı")),

Örtüşme eşiğini değiştirme

Varsayılan olarak, over olayı yalnızca taşınan öğenin en az %50'si alıcı öğeyle çakıştığında tetiklenir. Bu eşik örtüşme miktarı, aşağıdaki tabloda gösterilen değerleri alabilen tolerans seçeneği kullanılarak değiştirilebilir:

En sık kullandığım iki değer, fit ve touch, kullanıcılara en mantıklı gelen değerlerdir. Sürüklenen öğenin alıcı öğenin taşındığı alanda kalması gerektiğinde fit değerini ve sürüklenen öğenin orijinal konumuna dönmesi gerektiğinde dokunma değerini kullanırım (bir örnek daha sonra verilecektir). Sığdırma ve dokunma parametrelerinin kullanımına ilişkin bir örnek aşağıda gösterilmiştir:

Klon değeri, jQuery UI'ye tüm içeriğiyle birlikte kayan öğenin bir kopyasını oluşturmasını ve sonucu yardımcı öğe olarak kullanmasını söyler. Sonuç şekilde gösterilmiştir:

Yardımcı eleman, kullanıcı hareket ettirilen elemanın üzerinde farenin düğmesini bıraktığında kaldırılır, böylece eleman hareket ettirilir ve alıcı eleman orijinal konumlarında bırakılır.

Şekilde gösterildiği gibi, orijinal kayan eleman yerinde kalır ve fare imlecini takip ederek ekran boyunca sadece yardımcı eleman hareket eder. Örneğimizde olduğu gibi taşınan öğenin boyutu büyükse, belgenin geri kalan öğelerini kapsar, bu nedenle kullanıcının alıcı öğenin konumunu izlemesi bile zor olacaktır. Bu sorun, aşağıdaki örnekte gösterildiği gibi, yardımcı seçeneğin değeri olarak bir işlev sağlanarak çözülebilir:

... $(function() ( $("div.sürüklenebilir")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover" )); )); ... Örneği çalıştırın

Kullanıcı bir öğeyi sürüklemeye başladığında, jQuery UI bir işlevi çağırır, parametre helper ve döndürülen öğeyi hareketli bir nesne olarak kullanır. Bu durumda, img öğesini oluşturmak için jQuery kullanıyorum. Sonuç şekilde gösterilmiştir:

Küçük resim, kayan öğe için bir yer tutucu görevi görerek belgedeki diğer öğeleri takip etmeyi çok daha kolay hale getirir.

jQuery UI'nin Droppable etkileşim olaylarına ilettiği ui nesnesi, bir yardımcı özellik içerir ve bu özellik, yardımcı öğeyi sürüklenirken değiştirmek için kullanılabilir. Bu özelliğin over ve out olaylarıyla birlikte kullanımına bir örnek aşağıda gösterilmiştir:

... $(function() ( $("div.sürüklenebilir")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover", over: function(event, ui) ( ui.helper.css("border", "thick solid #27e6ed") ) , çıkış: function(event, ui) ( ui.helper.css("border", "") ) )); )); ...

Burada, over ve out olayları ve ui.helper özelliği, ana bilgisayar öğesiyle çakıştığında yardımcı öğenin etrafında bir kenarlık görüntülemek için kullanılır. Sonuç şekilde gösterilmiştir:

Öğelerin kenarlarına yasla

Üzerinden snap seçenekleri hareket ettirilen elemanın, yanından geçtiği elemanların kenarlarına "çekilmesi" mümkündür. Bu seçenek, değeri olarak bir seçici alır. Kayan öğe, belirtilen seçiciyle eşleşen herhangi bir öğenin kenarlarına yapışacaktır. Snap seçeneğini kullanmanın bir örneği aşağıda gösterilmiştir:

Örnek Çalıştır

Hareketli bir eleman eşleşen elemanlardan birine yaklaştığında, bitişik kenarları birbirine değecek şekilde ona "çekilir". Böyle bir bağlama için, yalnızca alıcı öğeyi değil, herhangi bir öğeyi seçebilirsiniz. Bu örnekte, bir div öğesi ekledim ve yakalama seçeneğini belgede bu öğeyi ve ayrıca alıcı öğeyi seçen bir değere ayarladım.

Elemanların çıpa ile ilgili nasıl davranacağını ince ayar yapmanıza izin veren birkaç alt seçenek vardır. Onlardan biri snapMode seçeneği. Ciltleme türünü belirtmek için kullanılabilir. Aşağıdaki değerlere izin verilir: iç(elemanların iç kenarlarına oturtun), dış(elemanların dış kenarlarına oturtun) ve ikisi birden(tüm kenarlara yapıştır; varsayılan).

snapTolerance seçeneği yakalama gerçekleşmeden önce kayan öğenin hedef öğenin kenarına ne kadar yaklaşması gerektiğini belirtmenize olanak tanır. Varsayılan değer 20'dir ve bu, 20 piksel anlamına gelir. Örnek, daha büyük bir mesafedeki bir çapaya karşılık gelen 50 değerini kullanır. Bu seçenek için doğru değeri seçmek çok önemlidir. snapTolerance seçeneğinin değeri çok düşükse, kullanıcı yakalama efektini fark etmeyebilir ve çok yüksekse, taşınan eleman beklenmedik bir şekilde atlamaya başlar ve uzaktaki elemanlara yapışır.

VCL kitaplığı için Borland, Sürükle ve Bırak arayüzünün kendi sürümünü ("sürükle" olarak çevrilmiştir) uygulamıştır. Bu arayüz dahilidir - form içinde herhangi bir Delphi kontrolünü gönderip alabilirsiniz "(formun kendisi hariç). İlgili Windows API işlevleri kullanılmadan uygulanır - diğer görevlerle iletişimi sürükleyip bırakarak organize ederken kullanılmalıdırlar. .

Kontrol üzerinde farenin sol tuşuna basarak, onu başka herhangi bir öğeye "sürükleyebiliriz". Programcının bakış açısından bu, anahtarı sürükleyip bırakma anlarında, gerekli tüm bilgileri ileten belirli olayların üretildiği anlamına gelir - sürüklenen nesneye bir işaretçi, mevcut imleç koordinatları, vb. Olay alıcısı öğedir. üzerinde şu an imleç bulunur. Böyle bir olayın işleyicisi, sisteme verilen kontrolün "göndermeyi" kabul edip etmediğini söylemelidir. Alıcı kontrolü üzerindeki düğme bırakıldığında, alıcının hazır olup olmadığına bağlı olarak bir veya iki olay daha tetiklenir.

İptalSürükle Geçerli sürükle ve bırak veya sürükle ve sabitle işlemini iptal eder.

FindDragTarget işlevi (const Konum: TPoint ;AllowDisabled: Boolean ): TControl ;

İşlev, temel sınıfın bir nesnesini döndürür TKontrol Pos parametresi tarafından belirtilen koordinatlarla ekran konumunu ifade eder. Bu işlev, bir sürükle ve bırak veya sürükle ve sabitle işleminin potansiyel alıcısını belirlemek için kullanılır. Belirtilen konum için pencere denetimi yoksa, işlev döner sıfır . AllowDisabled parametresi, devre dışı bırakılan nesnelerin dikkate alınıp alınmayacağını belirler.

İşlev IsDragObject(Gönderen: TObject): Boolean;

İşlev, Sender parametresinde belirtilen nesnenin sınıfın bir alt öğesi olup olmadığını belirler. TDragObject . bu fonksiyon sürüklenen nesnenin kabul edilip edilmeyeceğini belirlemek için OnDragOver ve OnDockOver olay işleyicilerinde Source parametresi olarak kullanılabilir. Ayrıca işlev IsDragObjectsürüklenen nesneyi doğru şekilde yorumlamak için OnDragDrop ve OnDockDrop olay işleyicilerinde Source parametresi olarak kullanılabilir.

DragMode, DragCursor özellikleri, BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag yöntemleri, Kabul parametresi

Bilgileri bir nesneden diğerine fare ile sürükleme işlemi Widows'da yaygın olarak kullanılır.Dosyaları klasörler arasında taşıyabilir, klasörlerin kendilerini taşıyabilir ve daha fazlasını yapabilirsiniz.

Sürükle ve bırak işlemiyle ilişkili tüm özellikler, yöntemler ve olaylar, tüm Delphi görsel bileşenlerinin ebeveyni olan TControl sınıfında tanımlanır. Bu nedenle, tüm bileşenler için ortaktırlar.

Sürüklemenin başlangıcı, tasarım zamanında veya programlı olarak dmManual veya dmAutomatic'e eşit olarak ayarlanabilen DragMode özelliği tarafından belirlenir. dmAutomatic (otomatik) değeri, kullanıcı fare düğmesini bileşen üzerinde tıklattığında, sürükleme işleminin otomatik olarak başlamasını belirler. Ancak bu durumda, kullanıcının fare düğmesine basması ile ilişkili OnMouseDown olayı bu bileşen için hiç gerçekleşmez.

Bileşenleri aktarmak ve almak için arayüz uzun zaman önce ortaya çıktı. Uygulamanın yürütülmesi sırasında iki kontrol arasında etkileşim sağlar. Bu durumda gerekli işlemler yapılabilir. Uygulamanın basitliğine ve geliştirme yaşına rağmen, birçok programcı (özellikle yeni başlayanlar) bu mekanizmayı belirsiz ve egzotik olarak görmektedir. Ancak Sürükle ve Bırak özelliğini kullanmak çok kullanışlı ve uygulaması kolay olabilir. Şimdi bunu doğrulayacağız.

Mekanizmanın çalışması için iki kontrolün buna göre yapılandırılması gerekir. Biri kaynak (Kaynak), ikincisi - alıcı (Hedef) olmalıdır. Bu durumda, kaynak hiçbir yere hareket etmez, sadece mekanizmada olduğu gibi kaydedilir.

İnan bana, dönüştürmek yeterince kolay X,Y koordinatları, OnDragOver ve OnDragDrop olaylarının parametrelerinde form koordinatlarına geçirilir.

İmlecin üzerine geldiği bileşenin Sol ve Üst özellikleriyle çalışın. Basit bir örnek vereceğim. Forma bir Not bileşeni yerleştirin ve Align özelliğini alTop olarak ayarlayın. Forma bir panel yerleştirin, ayrıca Align özelliğini alTop olarak ayarlayın ve Height özelliğini 6 veya 7 piksel gibi küçük bir değere ayarlayın. DragMode'u dmAutomatica'ya ve DragCursor'ı crVSplit'e ayarlayın. Başka bir Not bileşeni yerleştirin ve Align'ı alClient olarak ayarlayın. Panelden her iki Notu da aynı anda seçin ve aşağıda gösterildiği gibi ortak bir OnDragOver olay işleyicisi oluşturun:

Geçenlerde bir android oyunu geliştirme fikrim vardı. Başlangıç ​​olarak, satranç yazmaya karar verdim. teknoloji sanmıştım Sürükle ve bırak hareketli şekiller için mekanizmayı uygulamak için mükemmel. Deneyimsiz olanlar için şunu belirteyim sürükle ve bırak yöntemi bazı grafik nesnelerini diğerlerinin üzerine sürükleme ve serbest bıraktıktan sonra bir veya başka bir eylem gerçekleştirme olasılığında. En basit örnek- kısayolu çöp kutusuna sürükleyerek PC masaüstünüzden kaldırın. Etiketi çöp kutusuna "atarak", sisteme bu iki nesneyi etkileşime sokmak istediğimizi söylüyoruz. Sistem sinyalimizi alır ve ne yapması gerektiğine karar verir. Sürükle ve bırak, sezgisel netliği nedeniyle yaygınlaştı. Bu yaklaşım, gerçek dünyadaki nesnelerle etkileşim deneyimimizle desteklenir ve sanal bir ortamda harika çalışır. Satranca gelince, sürükle bırak kullanarak, kullanıcının parçayı sürüklediği hücreyi belirlemek teknolojik olarak daha kolaydır, çünkü bırakma noktasının koordinatlarından hücre numarasını hesaplamak gerekli değildir. Bu iş sanal makine tarafından üstlenilecektir.

Sürükle ve Bırak teknolojisinin kullanım amaçları

Sürükle ve bırak teknolojisini kullanmak, az kanla üç sorunu çözmeme izin veriyor:

1. Hareket görselleştirme. Kullanıcı bir şekle dokunduğunda ve onu ekranda hareket ettirmeye başladığında, şeklin yerini daha küçük bir çizim alır. Böylece kullanıcı şeklin yakalandığını anlar.
2. Figürün hareket alanını tahtanın boyutlarıyla sınırladım.
3. Kullanıcı şekli yanlış yerde bırakırsa, orijinal konumuna geri dönmelidir.

Görevler tanımlandı, uygulamalarına başlayalım.

Dokunmada ImageView'i değiştirin

Tüm şekillerim ImageView nesneleridir. Ne yazık ki, Android'de Sürükle ve Bırak uygulamasının, dokunulduğunda bir nesnenin görüntüsünü "kutudan çıkar çıkmaz" değiştirmesine izin vermediği ortaya çıktı. Yine de, bu görev API aracılığıyla oldukça çözülebilir. Birkaç basit adım gerçekleştirmemiz gerekiyor:

1. Bir DragShadowBuilder nesnesi oluşturun.
2. startDrag yöntemini çağırın.
3. View.INVISIBLE parametresiyle setVisibility yöntemini çağırarak şekli görüntüleyen ImageView'ımızı gizleyin. Sonuç olarak, ekranda yalnızca DragShadowBuilder nesnesi kalacak ve bu, kullanıcıya şeklin yakalandığını bildirecektir.

Bu eylemler, ImageView nesnesinin OnTouchListner işleyicisinde uygulanmalıdır. Bunu yapmak için onTouch yöntemini geçersiz kılacağız:

@Override public boolean onTouch(Görünüm görünümü, MotionEvent motionEvent) ( if (motionEvent. getAction() == MotionEvent. ACTION_DOWN) ( ClipData clipData= ClipData. newPlainText("" , "" ) ; Görünüm. DragShadowBuilder dsb= yeni Görünüm. DragShadowBuilder (view) ;view.startDrag(clipData, dsb, view, 0 ) ;view.setVisibility(View.INVISIBLE) ; true döndürmek; ) else ( false döndürmek; ) )

Her şey çok basit. Öyleyse, anlaşılan görüntünün ikamesiyle, bir sonraki göreve geçelim.

Sürükle bırak işlevi için sürükleme alanını sınırlama

Sürükleme alanını kısıtlamak bir sorunla ilgilidir. Gerçek şu ki, şekli tahtanın dışına bırakırsanız, bırakma olayı gerçekleşmeyecektir, çünkü kullanıcı nesneyi boş bir yere düşürdü ve nesnenin etkileşime girecek hiçbir şeyi yok. Sonuç olarak, şekil orijinal durumuna geri dönmeyecek ve sonsuza kadar gizli kalacaktır. Belgeleri okumak için çok zaman harcadım, ancak nesnelerin sürükleme alanını sınırlamanın bir yolunu bulamadım. Vahiy aniden geldi. Alanı hiç sınırlamama gerek yok, kullanıcının rakamı doğru yayınlayıp yayınlamadığını bilmem gerekiyor.

Doğru yayının belirlenmesi
Android Developers sitesindeki "sürükle bitiş olaylarını işleme" bölümünde sorularıma yanıt buldum. İşte birkaç önemli nokta:

1. Kullanıcı sürüklemeyi bitirdiğinde, DragListeners işleyicisinde ACTION_DRAG_ENDED olayı tetiklenir.
2. DragListener'da, DragEvent.getResult() yöntemini çağırarak sürükleme işlemi hakkında daha ayrıntılı bilgi alabilirsiniz.
3. Bir ACTION_DROP olayına yanıt olarak DragListener true değerini döndürürse, getResult çağrısı da true değerini döndürür, aksi takdirde false döndürür.

Bu yüzden ACTION_DRAG_ENDED olayını yakalamam ve getResult yöntemini çağırmam gerekiyor. Yanlış döndürürse, kullanıcı şekli tahtadan sürükledi ve ImageView'ı görünür hale getirmem gerekiyor.

@Override public boolean onDrag(Görünüm görünümü, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; Görünüm dragView= (Görünüm) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( includeDragable= false ; ) başka if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( includeDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE) ; ) if (dragA) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) = DragEvent. ACTION_DROP& amp; içerirDragable) ( checkForValidMove((ChessBoardSquareLayoutView) görünümü, dragView) ; dragView. setVisibility(View. VISIBLE) ; ) return true ; ) özel boolean dropEventNotHandled(DragEvent get dragEvent) (DragEvent get dragEvent) (DragEvent get dragEvent) (DragEvent get ) ; )

Artık kullanıcı figürü herhangi bir yerde serbest bırakabilir ve korkunç bir şey olmayacak.

İzin verilen hareketlerin belirlenmesi

Makalenin son kısmı, kullanıcının yapmaya çalıştığı hareketin geçerliliğini kontrol etmeye ayrılmıştır. Bu konuyu ayrıntılı olarak tartışmadan önce, uygulamamın yapısını açıklayan küçük bir açıklama yapacağım. Dama tahtası bir TableLayout olarak temsil edilir ve her hücre bir LinearLayout'un soyundan gelir ve bir OnDragListener'a sahiptir.

Ek olarak, her OnDragListener, oyun nesnelerinin etkileşimiyle ilgilenen ve mevcut hücrenin konumunu hatırlayan bir "arabulucu" nesneye atıfta bulunur.

Kullanıcı bir hücrenin üzerine bir şekli sürüklediğinde, aşağıdaki eylemler mümkündür:

1. 'containsDraggable' değişkenini true olarak ayarlamak için ACTION_DRAG_ENTERED olayını kullanma.
2. 'containsDraggable' değişkenini false olarak ayarlamak için ACTION_DRAG_EXITED olayını kullanma.
3. Bu hücreye bir şeklin yerleştirilmesine izin verilip verilmediğini ara katman yazılımını sorgulamak için ACTION_DROP olayını kullanma.

Aşağıda açıklanan mantığı uygulayan kod yer almaktadır.

@Override public boolean onDrag(Görünüm görünümü, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; Görünüm dragView= (Görünüm) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( includeDragable= false ; ) başka if (dragAction== DragEvent. ACTION_DRAG_ENTERED) ( includeDragable= true ; ) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView. setVisibility(View. VISIBLE) ; ) if (dragA) else if (dragAction== DragEvent. ACTION_DRAG_ENDED) = DragEvent.ACTION_DROP& amp; içerirDragable) ( checkForValidMove((ChessBoardSquareLayoutView) görünümü, dragView) ; dragView. setVisibility(View. VISIBLE) ; ) true döndür ; )

Gördüğünüz gibi, hareketin geçerli olup olmadığına bakılmaksızın, ImageView görünür duruma ayarlanmıştır. Kullanıcının şeklin hareket ettiğini görmesini istedim. Daha önce hücrenin LayoutView'ın bir çocuğu olduğundan bahsetmiştim. Bu, ImageView'in hücreden hücreye taşınmasını kolaylaştırmak için yapılır. Aşağıda, ImageView'in nasıl taşındığını gösteren checkForValidMove yönteminin kodu bulunmaktadır.

private void checkForValidMove(ChessBoardSquareLayoutView view, View dragView) ( if (mediator. isValidMove(view)) ( ViewGroup Owner= (ViewGroup) dragView. getParent() ; sahibi. removeView(dragView) ; view. addView(dragView) ; view. setGravity (Gravity.CENTER) ;view.showAsLanded() ;mediator.handleMove(view) ; ) )

Umarım bu makale kendi projelerinizi geliştirirken size yardımcı olur.