Sürükle ve Bırak teknolojisinin genel konuları ve teorisi. Android'de Sürükle ve Bırak teknolojisi Diğer sözlüklerde "Sürükle ve bırak"ın ne olduğunu görün
182
Bu örnekte bir div elemanı seçiyoruz ve üzerinde draggable() metodunu çağırarak onu hareketli hale getiriyoruz. Aşağıdaki şekilde gösterildiği gibi, açılan belgede öğe her zamanki konumunu alır, ancak bundan sonra fare işaretçisi kullanılarak tarayıcı penceresinde herhangi bir yere taşınabilir:
Öğeleri sürükleyip bırakma yeteneği tek başına kullanışlıdır, ancak daha sonra anlatılacak olan Droppable etkileşimi ile birlikte kullanıldığında daha da kullanışlıdır.
Sürüklenebilir etkileşim yalnızca belirli HTML işaretlemesi ve CSS stillerinin kullanılmasıyla elde edilir. Bu, bu işlevselliğin hemen hemen her tarayıcıda çalışacağı, ancak onunla donatılmış öğelerin benzer yerel sürükle ve bırak araçlarıyla çalışamayacağı anlamına gelir. işletim sistemleri.
HTML5 spesifikasyonu 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 eşdeğer HTML5 özelliklerini devre dışı bırakmak daha iyidir. Bunu yapmak için belgenin gövde öğesinin sürüklenebilir özelliğini false olarak ayarlayın.
Sürüklenebilir etkileşimi ayarlamaSürüklenebilir etkileşimler 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 gösterilmektedir:
| eksen | Belirli yönlerde hareket etme yeteneğini sınırlar. Varsayılan değer false'tur, yani kısıtlama yoktur, ancak aynı zamanda "x" (yalnızca X ekseni boyunca hareket et) veya "y" (yalnızca Y ekseni boyunca hareket et) değerini de belirtebilirsiniz. |
| çevreleme | Taşınan öğenin konumunu ekranın belirli bir alanına sınırlar. Desteklenen değer türleri, ilgili örnek kullanılarak aşağıdaki tabloda açıklanmaktadır. Varsayılan değer false'tur; bu, herhangi bir kısıtlama olmadığı anlamına gelir |
| gecikme | Bir öğenin hareket etmeden önce ne kadar süreyle sürüklenmesi gerektiğini belirtir. Varsayılan değer 0'dır; bu, gecikme olmadığı anlamına gelir |
| mesafe | Kullanıcının bir öğeyi gerçekten hareket etmeden önce başlangıç konumundan sürüklemesi gereken mesafeyi tanımlar. Varsayılan değer 1 pikseldir |
| Kafes | Taşınan öğenin ızgara hücrelerine yapışmasını zorlar. Varsayılan değer false'tur; bu, bağlamanın olmadığı anlamına gelir |
Bir öğenin hareketini belirli yönlerle sınırlamanın birkaç yolu vardır. Bunlardan ilki, hareket yönünü X veya Y ekseniyle sınırlamanıza olanak tanıyan eksen seçeneğini kullanmaktır.Bunun bir örneği aşağıda gösterilmiştir:
... div.dragElement (yazı tipi boyutu: büyük; kenarlık: ince düz siyah; dolgu: 16 piksel; genişlik: 8 em; metin hizalama: orta; arka plan rengi: açık gri; kenar boşluğu: 4 piksel) $(function() ( $ (".dragElement").draggable(( eksen: "x")).filter("#dragV").draggable("seçenek", "eksen", "y"); )); Dikey olarak sürükleyin Yatay olarak sürükleyin Örneği çalıştır
Bu örnekte iki div öğesi tanımlayacağız, bunları jQuery kullanarak seçeceğiz ve draggable() yöntemini çağıracağız. Bu yönteme bir argüman olarak, başlangıçta her iki div öğesinin hareketini X ekseni boyunca yönle sınırlayan bir nesneyi iletiyoruz. Daha sonra jQuery filter() yöntemini kullanarak, jQuery'yi aramadan dragV öğesini seçebiliyoruz. tüm belgeyi tekrar ve izin verilen farklı bir hareket yönüne - Y ekseni boyunca ayarlayın.Böylece, bir div öğesinin yalnızca dikey yönde, diğerinin yalnızca yatay yönde sürüklenebildiği bir belge elde ederiz. Sonuç şekilde gösterilmektedir:
Ayrıca ekranın bir öğeyi sürükleyebileceğiniz alanını da sınırlayabilirsiniz. Bunu yapmak için çevreleme seçeneğini kullanın. Bu seçenekte belirtilebilecek değer formatları aşağıdaki tabloda açıklanmıştır:
Muhafaza seçeneğinin kullanımına ilişkin bir örnek aşağıda verilmiştir:
... div.dragElement (yazı tipi boyutu: büyük; kenarlık: ince düz siyah; dolgu: 16 piksel; genişlik: 8 em; metin hizalama: orta; arka plan rengi: açık gri; kenar boşluğu: 4 piksel) #container ( kenarlık: orta çift siyah; genişlik: 700 piksel; yükseklik: 450 piksel) $(function() ( $(".dragElement").draggable(( muhafaza: "parent" )).filter("#dragH").draggable("option", " eksen", "x"); )); Yatay olarak sürükleyin Üst öğenin içine sürükleyin Çalıştırma örneği
Bu örnekte, her iki öğenin de hareket kabiliyeti sınırlıdır, böylece yalnızca sabit boyutlu bir div olan ana öğelerinin içinde sürüklenebilirler. Kayan div'lerden biri, eksen seçeneği kullanılarak kayan hale gelme gibi ek bir kısıtlamaya sahiptir, çünkü yalnızca üst öğesi içinde yatay olarak hareket edebilir. Sonuç şekilde gösterilmektedir:
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 değer olarak alır. Izgara seçeneğinin kullanımına ilişkin bir örnek aşağıda verilmiştir:
... #sürüklenebilir (yazı tipi boyutu: x-büyük; kenarlık: ince düz siyah; genişlik: 5em; metin hizalama: orta; dolgu:10 piksel) $(function() ( $("#draggable").draggable( ( Kafes: )); )); Beni sürükleyin Çalıştır örneği
Bu örnek, 100 piksel genişliğinde ve 50 piksel yüksekliğinde hücrelere sahip bir ızgarayı belirtir. Bir öğeyi sürüklediğinizde, bir (görünmez) hücreden diğerine "atlar". Yakalama efekti, etkileşim işlevselliğinin nasıl kullanılabileceğine dair harika bir örnektir ancak ekran görüntülerini kullanarak aktarmak zordur.
Serbest hareket eksenini 1'e 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 ettirildiğinde 100 piksel genişliğindeki ızgara hücrelerine yapışır, ancak dikey olarak serbestçe hareket eder.
Taşıma gecikmesiHareketli bir öğenin sürüklenmesini geciktirmenize olanak tanıyan iki seçenek vardır. Gecikme seçeneği, öğe gerçekten taşınmadan önce kullanıcının fare işaretçisini sürüklemesi gereken süreyi milisaniye cinsinden belirtmenize olanak tanır. Başka bir gecikme türü, kullanıcının fare işaretçisini bir öğe takip etmeden önce sürüklemesi gereken mesafeyi piksel cinsinden belirten mesafe seçeneğiyle sağlanır.
Her iki ayarın kullanımına ilişkin bir örnek aşağıda verilmiştir:
... #zaman, #mesafe (yazı tipi boyutu: büyük; kenarlık: ince düz siyah; dolgu: 10 piksel; genişlik: 120 piksel; metin hizalama: orta; arka plan rengi: açık gri; kenar boşluğu: 4 piksel; ) $(işlev( ) ( $("#time").draggable(( gecikme: 1000 )) $("#distance").draggable(( mesafe: 150 )) )); Zaman gecikmeli bloklama Minimum mesafeli bloklama Çalıştırma örneği
Bu örnekte, biri gecikme seçeneği kullanılarak geciktirilen, diğeri ise mesafe seçeneği kullanılarak geciktirilen iki hareketli eleman bulunmaktadır.
Gecikme seçeneğiyle belirtilen bir gecikme durumunda, kullanıcının öğeyi gerçekten taşımadan önce belirli bir süre boyunca sürüklemesi gerekir. Bu örnekte bu sürenin süresi 1000 ms'dir. Bu sırada fareyi hareket ettirmeye gerek yoktur, ancak tüm gecikme süresi boyunca fare düğmesinin basılı kalması gerekir, bundan sonra öğe fareyi hareket ettirerek hareket ettirilebilir. Gecikme süresi dolduktan sonra, taşınan öğe, daha önce tartışılan ızgara, bölge ve eksen seçeneklerinin getirdiği kısıtlamalara bağlı olarak fare işaretçisinin konumuna yapışacaktır.
Uzaklık seçeneği de benzer bir etkiye sahiptir, ancak bu durumda kullanıcının fare işaretçisini, öğenin başlangıç konumundan herhangi bir yönde en az belirli sayıda piksel sürüklemesi gerekir. Taşınan öğe daha sonra geçerli işaretçi konumuna atlayacaktır.
Her iki ayarı da aynı öğeye uygularsanız, taşınan öğe her iki gecikme kriteri karşılanıncaya kadar hareket etmeyecektir; bir öğeyi sürükleme girişimi belirli bir süre devam edene ve fare işaretçisi belirli sayıda piksel hareket ettirene kadar.
Sürüklenebilir etkileşim yöntemlerini kullanmaSürüklenebilir etkileşimi için tanımlanan yöntemlerin tümü, widget'lara bakarken zaten gördüğünüz temel yöntemler kümesinin bir parçasıdır. Sürüklenebilir etkileşime özgü herhangi bir yöntem bulunmadığından bunları ayrıntılı olarak ele almayacağız. Mevcut yöntemlerin listesi aşağıdaki tabloda verilmiştir:
Sürüklenebilir Etkileşim Olaylarını KullanmaEtkileşim Sürüklenebilir, bir öğe sürüklendiğinde sizi bilgilendiren basit bir dizi olayı destekler. Bu olaylar aşağıdaki tabloda açıklanmıştır:
Widget olaylarında olduğu gibi bu olaylara da yanıt verilebilir. Başlatma ve durdurma olaylarını işlemeye ilişkin bir örnek aşağıda verilmiştir:
... #sürüklenebilir (yazı tipi boyutu: x-büyük; kenarlık: ince düz siyah; genişlik: 190 piksel; metin hizalama: orta; dolgu: 10 piksel) $(function() ( $("#draggable").draggable( ( start: function() ( $("#draggable").text("Beni sürükleyin..."), stop: function() ( $("#draggable").text("Beni sürükleyin") ) )) ; )); Beni sürükleyin Çalıştır örneği
Bu örnek, bir öğenin metin içeriğini sürüklendikçe değiştirmek için start ve stop olaylarını kullanır. Bu avantaj, Draggable'ın etkileşiminin tamamen HTML ve CSS kullanılarak uygulanmasından kaynaklanmaktadır: sürüklenebilir bir öğenin durumunu, ekran boyunca hareket ederken bile değiştirmek için jQuery'yi kullanabilirsiniz.
Bırakılabilir Etkileşimi KullanmaBir öğeyi tek başına sürüklemek bazı durumlarda yeterli olabilir, ancak en çok Droppable etkileşimiyle birlikte kullanıldığında faydalıdır.
Bırakılabilir etkileşimin uygulandığı öğeler (alıcı öğeler), Sürüklenebilir etkileşimi kullanılarak oluşturulan hareketli öğeleri kabul etme yeteneği kazanır.
Alıcı öğeler droppable() yöntemi kullanılarak oluşturulur, ancak yararlı işlevsellik elde etmek için bu tür etkileşim için tanımlananlar arasından olay işleyicileri oluşturmanız gerekecektir. Mevcut etkinlikler aşağıdaki tabloda gösterilmektedir:
| yaratmak | Bir öğeye Bırakılabilir etkileşim uygulandığında gerçekleşir |
| etkinleştir | Kullanıcı taşınan öğeyi sürüklemeye başladığında gerçekleşir |
| devre dışı bırakmak | Kullanıcı taşınan öğeyi sürüklemeyi bıraktığında gerçekleşir |
| üzerinde | Kullanıcı yüzebilen bir öğeyi alıcı öğenin üzerine sürüklediğinde gerçekleşir (fare düğmesinin henüz serbest bırakılmamış olması şartıyla) |
| dışarı | Kullanıcı, taşınan öğeyi alıcı öğenin dışına sürüklediğinde gerçekleşir |
| düşürmek | Kullanıcı alıcı öğe üzerinde taşınmakta olan öğeyi terk ettiğinde gerçekleşir |
Tek bir drop olay işleyicisinin tanımlandığı basit bir alıcı öğe oluşturma örneği aşağıda verilmiştir:
... #sürüklenebilir, #bırakılabilir (yazı tipi boyutu: büyük; kenarlık: ince düz siyah; dolgu: 10 piksel; genişlik: 100 piksel; metin hizalama: orta; arka plan rengi: açık gri; kenar boşluğu: 4 piksel;) #droppable (dolgu) : 20 piksel; konum: mutlak; sağ: 5 piksel;) $(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $(" #sürüklenebilir").text("Sol") ) )); )); Beni burada bırak Sürükle Beni Çalıştır örneği
Bu örnek, metin içeriği "Buradan ayrıl" dizesiyle temsil edilen belgeye bir div öğesi ekler. Bu öğeyi jQuery kullanarak seçiyoruz ve droppable() yöntemini çağırıyoruz ve ona drop olayı için bir işleyici tanımlayan bir ayarlar nesnesi aktarıyoruz. Bu olaya yanıt, taşınan öğenin metninin text() yöntemi kullanılarak değiştirilmesidir.
Bu örnekte oluşturulan Sürükle ve bırak etkileşimi basit bir etkileşimdir ancak Sürüklenebilir ve Bırakılabilir etkileşimlerinin birlikte nasıl çalıştığını açıklamak için yararlı bir bağlam sağlar. Elemanları sürükleme işleminin çeşitli aşamaları şekilde gösterilmektedir:
Her şey çok basit görünüyor. Taşınan öğeyi alıcı öğenin üzerine gelene kadar sürükleyip bırakıyoruz. Bırakılan öğe kaldığı yerde kalır ve bırakma olayına yanıt olarak metin içeriği değişir. Aşağıdaki bölümlerde kullanıcı deneyimini geliştirmek için diğer Bırakılabilir etkileşim etkinliklerinin nasıl kullanılacağı gösterilmektedir.
Hedef alıcı nesnenin aydınlatılması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ğu konusunda güvenilir rehberlik sağlar. İlgili bir örnek aşağıda verilmiştir:
... $(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#draggable").text("Sol ") ), etkinleştir: function() ( $("#droppable").css(( border: "orta çift yeşil", arka planRenk: "açıkYeşil" )); ), devre dışı bırak: function() ( $("#droppable) ").css("kenarlık", "").css("arka plan rengi", ""); ) )); )); ...Örneği çalıştır
Kullanıcı bir öğeyi sürüklemeye başlar başlamaz, alıcı öğemizle ilişkili active olayı tetiklenir ve işleyici işlevi, o öğenin kenarlık ve arka plan rengi CSS özelliklerini değiştirmek için css() yöntemini kullanır. Sonuç olarak, hedef alıcı eleman vurgulanarak kullanıcıya kendisi ile taşınan eleman arasında bir bağlantı olduğu gösterilir.
Deactivate olayı, CSS özellik değerlerini alıcı öğeden kaldırmak ve onu geri döndürmek için kullanılır. başlangıç durumu Kullanıcı fare düğmesini bıraktığı anda. (Bu olay, sürüklenen öğenin alıcı öğe üzerinde bırakılıp bırakılmadığına bakılmaksızın, bir öğenin sürüklenmesi durduğunda meydana gelir.) Bu işlem şekilde gösterilmektedir:
Sürükle ve bırak teknolojisi, olay yönetiminin ü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 meydana gelir. Bu olaylara verilen yanıtın bir örneği aşağıda verilmiştir:
$(function() ( $("#draggable").draggable(); $("#droppable").droppable(( drop: function() ( $("#draggable").text("Left") ) , etkinleştirin: function() ( $("#droppable").css(( border: "medium double green",backgroundColor: "lightGreen" )); ), deactivate: function() ( $("#droppable"). css("border", "").css("arka plan rengi", ""); ), over: function() ( $("#droppable").css(( border: "orta çift kırmızı", arka planRenk : "kırmızı" )); ), out: function() ( $("#droppable").css("border", "").css("background-color", ""); ) )); ) ); Örneği çalıştır
Önceki örnekte olduğu gibi burada da aynı işleyici işlevleri kullanılır, ancak bu durumda bunlar over ve out olaylarıyla ilişkilendirilir. Alıcı eleman, taşınan elemanın en az %50'siyle örtüştüğünde, bir çerçeve içine alınır ve şekilde gösterildiği gibi arka plan rengi değişir:
Bu %50'lik sınıra örtüşme eşiği (tolerans) adı verilir ve bunun değeri daha sonra gösterileceği gibi alıcı öğe oluşturulurken ayarlanabilir.
Bırakılabilir etkileşimleri ayarlamaBırakılabilir etkileşimin, davranışını özelleştirmek için değiştirebileceğiniz bir dizi özelliği vardır. Bu özellikler aşağıdaki tabloda listelenmiştir:
| 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ıştır |
| kabul etmek | Alıcı öğenin yanıt vereceği hareketli öğeler kümesini daraltır. Varsayılan değer herhangi bir öğeyle eşleşen *'dir |
| aktif Sınıf | Etkinleştirme olayına yanıt olarak atanacak ve devre dışı bırakma olayına yanıt olarak kaldırılacak bir sınıfı tanımlar. |
| vurgulu Sınıf | Bir aşırı olaya yanıt olarak atanacak ve bir çıkış olayına yanıt olarak kaldırılacak bir sınıfı tanımlar |
| hata payı | Aşırı olayın meydana geldiği minimum örtüşme derecesini tanımlar |
Kabul seçeneğini kullanarak, Bırakılabilir 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çiciye ayarlanmalıdır. Sonuç olarak, Bırakılabilir etkileşim olayları yalnızca taşınan öğenin belirtilen seçiciyle eşleşmesi durumunda gerçekleşir. İlgili bir örnek aşağıda verilmiştir:
... .draggable, #droppable (yazı tipi boyutu: büyük; kenarlık: ince düz siyah; dolgu: 10 piksel; genişlik: 100 piksel; metin hizalama: orta; arka plan rengi: açık gri; kenar boşluğu: 4 piksel;) #droppable (dolgu) : 20 piksel; konum: mutlak; sağ: 5 piksel;) $(function() ( $(".draggable").draggable(); $("#droppable").droppable(( drop: function(event, ui) ( ui.draggable.text("Sol") ), etkinleştir: function() ( $("#droppable").css(( border: "orta çift yeşil", arka planRenk: "açıkYeşil" )); ), devre dışı bırak: function () ( $("#droppable").css("kenarlık", "").css("arka plan rengi", ""); ), kabul et: "#sürükle1" )); )); Burada bırakın Eleman 1 Eleman 2 Çalıştırma örneği
Bu örnekte drag1 ve drag2 kimliklerine sahip iki sürüklenebilir öğe vardır. Alıcı eleman oluştururken, yalnızca drag1 elemanının taşınması kabul edilebilir bir eleman olacağını belirttiğimiz kabul seçeneğini kullanırız.
drag1 öğesini sürüklediğinizde önceki örneklerdeki efektin aynısını göreceksiniz. Uygun zamanlarda, alıcı eleman için etkinleştirme, devre dışı bırakma, bitirme ve kapatma olayları tetiklenecektir. Aynı zamanda, kabul parametresinde belirtilen seçiciyle eşleşmeyen bir drag2 öğesini sürüklerseniz bu olaylar tetiklenmez. Bu eleman serbestçe hareket ettirilebilir ancak alıcı eleman tarafından algılanmayacaktır.
text() yöntemini çağıracağımız kabul edilebilir bir kayan öğeyi seçme şeklimizdeki değişikliğe dikkat edin. Belgede yalnızca bir hareketli öğe olduğunda id niteliği bunun için yeterliydi:
Bırak: function() ( $("#draggable").text("Sol")),
Bu örnekte, iki kayan öğe vardır ve id niteliğine göre seçim yapmak istenen sonucu vermeyecektir, çünkü bu durumda metin, alıcı öğe için hangisinin kabul edilebilir olduğuna bakılmaksızın aynı kayan öğede her zaman değişecektir.
Çözüm, jQuery UI'nin her olay işleyicisine ek bir argüman olarak sağladığı ui nesnesini kullanmaktır. Bir 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 şu şekilde seçilmesine olanak tanır:
Bırak: function(event, ui) ( ui.draggable.text("Sol")),
Örtüşme eşiğini değiştirmeVarsayılan olarak, over olayı yalnızca taşınan öğenin en az %50'si alıcı öğeyle örtüştüğünde meydana gelir. Bu eşik çakışmasının 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 uyum ve dokunmadır çünkü kullanıcılara en anlamlı gelen bunlardır. Sürüklenen öğenin taşındığı alıcı öğe alanında kalması gerektiğinde fit'i, sürüklenen öğenin orijinal konumuna dönmesi gerektiğinde ise touch'ı kullanıyorum (aşağıda bir örnek verilecektir). Uyum ve dokunma parametrelerinin kullanımına ilişkin bir örnek aşağıda verilmiştir:
Klon değeri, jQuery kullanıcı arayüzüne, taşınan öğenin tüm içeriğiyle birlikte bir kopyasını oluşturmasını ve ortaya çıkan sonucu bir yardımcı öğe olarak kullanmasını söyler. Sonuç şekilde gösterilmektedir:
Kullanıcı, taşınan öğenin üzerinde fare düğmesini bıraktığında yardımcı öğe kaldırılır, taşınan öğe ve alıcı öğe orijinal konumlarında kalır.
Şekilde görüldüğü gibi, taşınan orijinal eleman yerinde kalır ve fare imlecini takip ederek sadece yardımcı eleman ekranda hareket eder. Örneğimizde olduğu gibi taşınan öğenin boyutu büyükse, belge öğelerinin geri kalanını kapsar, böylece kullanıcının alıcı öğenin konumunu takip etmesi bile zor olacaktır. Bu sorun, aşağıdaki örnekte gösterildiği gibi, yardımcı seçeneğin değeri olarak işlev sağlanarak çözülebilir:
... $(function() ( $("div.draggable")..png"/>") ) )); $("#basket").droppable(( activeClass: "aktif", vurgulu Sınıf: "hover" )); )); ...Örneği çalıştır
Kullanıcı bir öğeyi sürüklemeye başladığında jQuery UI, yardımcı parametre tarafından belirtilen işlevi çağırır ve döndürülen öğeyi sürüklenecek nesne olarak kullanır. Bu durumda img öğesini oluşturmak için jQuery kullanıyorum. Sonuç şekilde gösterilmektedir:
Küçük bir resim, taşınan öğe için bir vekil görevi görür ve belgedeki diğer öğelerin takibini ç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, sürüklenirken yardımcıyı değiştirmek için kullanılabilir. Bu özelliğin over ve out olaylarıyla birlikte kullanılmasına ilişkin bir örnek aşağıda verilmiştir:
... $(function() ( $("div.draggable")..png"/>") ) )); $("#basket").droppable(( activeClass: "active", hoverClass: "hover", over: function(event, ui) ( ui.helper.css("border", "thick katı #27e6ed") ) , out: function(olay, ui) ( ui.helper.css("sınır", "")) )); )); ...
Burada, aşırı ve dışarı olayları ve ui.helper özelliği, alıcı öğeyle örtüştüğünde yardımcı öğenin etrafında bir kenarlık görüntülemek için kullanılır. Sonuç şekilde gösterilmektedir:
Yakalama seçeneğini kullanarak, taşınan elemanın yanından geçtiği elemanların kenarlarına “çekilmesini” sağlayabilirsiniz. Bu seçenek bir seçiciyi değer olarak kabul eder. Taşınan öğe, belirtilen seçiciyle eşleşen herhangi bir öğenin kenarlarına yapışacaktır. Snap seçeneğinin kullanımına ilişkin bir örnek aşağıda verilmiştir:
JQuery kullanıcı arayüzü örneğini çalıştırın #snapper, .draggable, .droppable (yazı tipi boyutu: büyük; kenarlık: orta düz siyah; dolgu: 4 piksel; genişlik: 150 piksel; metin hizalama: orta; arka plan rengi: açık gri; kenar boşluğu: 10 piksel) ;).droppable (kenar boşluğu-sağ: 5 piksel; yükseklik: 50 piksel; genişlik: 120 piksel) #dropContainer (konum: mutlak; sağ: 5 piksel;) div yayılma (konum: göreceli; üst: %25) .droppable.active (kenarlık: orta düz yeşil) .droppable.hover (arka plan rengi: açık yeşil) #snapper (konum: mutlak; sol: %35; kenarlık: orta düz siyah; genişlik: 180 piksel; yükseklik: 50 piksel) $(function() ( $(" div.draggable").draggable(( snap: "#snapper, .droppable", snapMode: "her ikisi de", snapTolerance: 50 )); $("#basket").droppable(( activeClass: "active", hoverClass: "üzerine gelin" )); )); Sepet Buraya yapıştır Beni sürükle
Hareketli bir eleman uygun elemanlardan birine yaklaştığında, bitişik kenarları birbirine değecek şekilde kendisine "çekilir". Böyle bir bağlama için yalnızca alıcı olanı değil, herhangi bir öğeyi seçebilirsiniz. Bu örnekte, bir div öğesi ekledim ve snap seçeneğini belgedeki alıcı öğenin yanı sıra o öğeyi de seçen bir değere ayarladım.
Öğelerin sabitleme davranışını daha hassas bir şekilde özelleştirmenize olanak tanıyan birkaç yardımcı seçenek vardır. Bunlardan biri snapMode seçeneğidir. Onun yardımıyla ciltleme türünü belirleyebilirsiniz. Aşağıdaki değerlere izin verilir: iç(elemanların iç kenarlarına tutturun), dış(elemanların dış kenarlarına tutturun) ve ikisi birden(tüm kenarlara yasla; varsayılan).
snapTolerance seçeneği, yapışma meydana gelmeden önce kayan öğenin hedef öğenin kenarına ne kadar yaklaşması gerektiğini belirtmenize olanak tanır. Varsayılan değer 20'dir, yani 20 pikseldir. Örnekte, daha büyük bir mesafedeki yakalamaya karşılık gelen 50 değeri kullanılmaktadır. Bu seçenek için doğru değeri seçmek çok önemlidir. SnapTolerance değeri çok düşükse kullanıcı yapışma efektini fark etmeyebilir, çok yüksekse ise taşınan öğe beklenmedik sıçramalar yapmaya başlayarak uzaktaki öğelere yapışacaktır.
Teknoloji kullanımı sürükle ve bırak(sürükle ve bırak), kullanıcının çeşitli nesneleri birinden diğerine, örneğin bir listedeki öğeleri diğerine taşımasına olanak tanır. Bunu yapmak için iki kontrolü kullanmanız gerekir: lavabo ve kaynak. Alıcı, kaynak nesneyi (taşınan nesne) alacak olan nesnedir.
Nesnelerin hareketi sırasında meydana gelen olaylar, oluşma sırasına göre aşağıda listelenmiştir.
BaşlangıçtaSürükle(TSartDragEvent yazın) - işlemin başlangıcında, kaynak nesne tarafından oluşturulur. Olay işleyicisine iletilen parametreler: DragObject alıcı nesnesi (TDragObject türü), Kaynak nesnesi (TObject türü).
OnDragOver(TDragOverEvent yazın) - sürüklenen bir nesne üzerindeyken bir alıcı nesnesi oluşturur. Olay işleyicisine iletilen parametreler: alıcı nesnesi Gönderici (TObject türü), kaynak nesnesi Kaynak (TObject türü), hareket durumu Durumu (TDragState türü), X ve Y (tamsayı türü) - fare işaretçisinin geçerli koordinatları, Accept ( boolean yazın) taşıma işleminin onay işareti. Hareket durumu, hareket ettirilen nesnenin alıcı alanda mı olduğunu, içinde mi hareket ettiğini veya oradan mı ayrıldığını açıkça belirtir. İletilen parametreler, hedef nesnenin kaynak nesneyi kabul etmesini veya reddetmesini sağlar. Accept parametresi taşıma işlemi kabul edilirse Trye, aksi halde False olarak ayarlanır.
onDragDrop (TDragDropEvent yazın) - sürüklenen nesne üzerine bırakıldığında alıcı nesnesi tarafından oluşturulur. Olay işleyicisine fare işaretçisinin, Gönderen alıcı nesnesinin (TObject türü) ve orijinal hareket nesnesi Kaynağının (TObject türü) geçerli koordinatları aktarılır.
onEndDrag (EndDragEvent türü) - Sürükleme işlemi tamamlandığında tetiklenir. Kaynak Gönderici nesnesinin ve alıcı Hedef nesnesinin olay işleyicisine iletildiği noktanın X ve Y koordinatları.
Sürükle ve bırak işlemi oluşturmak için iki olayı uygulamak yeterlidir: OnDragDrop ve OnDragOver, DragMode özelliği dmAutomatic olarak ayarlanmıştır. Aksi halde sürükleme işleminin başlangıcı olan BeginDrag yönteminin programcı tarafından kodlanması gerekir.
Malzemeyi birleştirmek için aşağıdaki uygulamayı oluşturacağız. Panel bileşenini forma yerleştirin. Object Inspector'ın DragMode özelliğini dmAutomatic olarak ayarlayın. Form nesnesini seçelim ve aşağıdaki olayları oluşturmak için Nesne Denetçisini kullanalım:
Prosedür TForm1.FormDragOver(Sender, Kaynak: TObject; X, Y: Tamsayı; Durum: TDragState; var Accept: Boolean); Kaynak = Panel1 ise başla, ardından Kabul Et:= Doğru, aksi takdirde Kabul Et:= Yanlış; son; prosedür TForm1.FormDragDrop(Gönderen, Kaynak: TObject; X, Y: Tamsayı); Panel1'i başlat. Sol:= X; Panel1.Üst:= Y; son;
Artık uygulamayı başlatıp panelin üzerindeki fare düğmesine tıklayarak panel nesnesini form boyunca taşıyabiliriz.
Özetle: teknolojiyle tanıştık sürükle ve bırak(sürükle ve bırak) ve pratikte kullandım.
Sürükle ve bırak teknikleri yıllar içinde gelişmiştir. Açık kaynaklı eklentiler (jQuery gibi) geliştiren programcıların sayısının artmasıyla birlikte eski yöntemlerin yeniden canlandırılması şaşırtıcı değil. JavaScript kitaplığı son derece duyarlıdır ve web teknolojisinin bu çağında birçok iyileştirme sunar.
Bu eğitimde, web sitenizde dinamik sürükle ve bırak dikdörtgenleri oluşturmak için kullanabileceğiniz bir komut dosyası oluşturacağız. Süreç jQuery tarafından yönetilmektedir. Bu tür komut dosyaları hazır işlevsellik sağlayarak zamandan tasarruf sağlar! Sürükle ve bırak kütüphanesi diğer projelerde de kullanılabilir.
Öncelikle proje için küçük bir web sitesi hazırlayalım. Proje klasöründe "js" ve "css" adlı önemli adlara sahip iki dizin ve boş bir dosya oluşturmanız gerekir. indeks.html. Kod çok basit olacak, böylece iş hakkında net bir fikir ortaya çıkacak ve daha fazla gelişme için bir nokta olacak.
HTML dosyamızın kodu aşağıdadır. Bölümde KAFA 3 komut dosyası ekliyoruz. Ana jQuery betiği Google Code sunucusundan yüklenecektir. biçimlendirmenin ana özelliklerini içeren stil dosyamız style.css de dahildir dış görünüş bizim belgemiz.
Beni sürükle Evet, evet. Kesinlikle ben. Beni de sürükleyebilirsin ( zIndex: 200, opacity: .9 )
Not: Beni her yerde bırakabilirsin!
İç bölüm vücut sadece iki blok yerleştirildi div her iki dikdörtgeni de içeren. Kod oldukça basit ve anlaşılır. Her dikdörtgenin içinde handler ve handler2 sınıflarını içeren başlıklar vardır. Bu önemlidir çünkü her dikdörtgen sürükledikçe farklı davranır.
HTML kodu çok basittir. Temel işaretlemeyi anlarsanız CSS stilleri de zor olmayacaktır. Temel olarak tanımlanmış kenar boşlukları, dolgular ve renkler.
Gövde,html ( font-family:Calibri, sans-serif; arka plan:#eaf3fb; font-size:12px; height:1000px; line-height:18px; ) p ( height:30px; )
Seçiciler gövde,html yalnızca demo sayfası için kullanılır. Ve tüm içerik iki sürüklenebilir dikdörtgenin içine yerleştirilmiştir.
Dv1 ( genişlik:200 piksel; arka plan rengi:#eff7ff; kenarlık:1px katı #96c2f1; konum:mutlak; sol:100 piksel; üst:100 piksel; ) .dv1 h2 ( arka plan rengi:#b2d3f5; dolgu:5px; yazı tipi- family:Georgia, "Times New Roman", Times, serif; yazı tipi boyutu:1.0em; text-transform:büyük harf; yazı tipi ağırlığı:kalın; renk:#3a424a; kenar boşluğu:1px; imleç:hareket; ) .dv1 div ( dolgu:5px; kenar boşluğu-alt:10 piksel; ) .dv2 ( arka plan rengi:#f6ebfb; kenarlık:1px katı #a36fde; genişlik:550px; konum:mutlak; imleç:hareket; sol:400px; üst:230px; ) .dv2 h2 ( arka plan rengi:#eacfe9; harf aralığı:-0,09em; yazı tipi boyutu:1,8em; yazı tipi ağırlığı: kalın; dolgu:15px; kenar boşluğu:1px; renk:#241f24; imleç:hareket; ) .dv2 .content2 ( dolgu:5px; kenar boşluğu-alt:10px; )
Hem .dv1 hem de .dv2 sınıfları için mutlak konumlandırmayı kullanırız. Bu gerekli değil ve muhtemelen en önemlisi değil En iyi yol sürüklenebilir dikdörtgenleri konumlandırmak için. Ancak bizim örneğimizde bu konumlandırma mantıklıdır, çünkü sayfa her yenilendiğinde dikdörtgenler belirli yerlere yerleştirilir.
Ayrıca farkın görülmesini kolaylaştırmak için dikdörtgenlerin yazı tipleri ve renkleri de farklıdır.
Bunun dışında blokların başlıkları ve içerikleri hemen hemen aynıdır. Stilleri projenize kopyalayacaksanız başlamadan önce adları değiştirin. Bazı durumlarda, örneğin belirli bir blok için sürükle ve bırak tekniğini kullanırken, sınıflar yerine kimlikleri kullanmak daha mantıklı olur.
JavaScript ayrıştırılıyorİki JavaScript dosyası, çalışması için gereken tüm kodu içerir. Bu dersin kapsamı dışında olduğundan jQuery ile çalışmanın ayrıntılarını atlayacağız. jquery.dragndrop.js dosyasına dikkat edelim.
22. satır Sürükleme fonksiyonunu tanımlar.
$.fn.Drags = function(opts) ( var ps = $.extend(( zIndex: 20, opacity: .7, işleyici: null, onMove: function() ( ), onDrop: function() ( ) ), opts );
Bu, dönüş değişkenini ve başlatma verilerini ayarlar. Sürükler. Bu yöntem, seçenekleri diğer işlevlere aktarmak için jQuery ile çalışırken çok yaygın olarak kullanılır. Dahili olarak, sürüklenen dikdörtgenler için mevcut tüm seçenekler için değişkenler belirleriz.
Bir sonraki kod parçası, dragndrop değişkeni için olay işleyicilerini içerir. Her iki olay sürüklemek Ve düşürmek olay parametrelerini kendilerine ileten çağrı işlevleri. Bu olaylar, bir nesneyi sürüklemek için fare düğmesine bastığınızda ve ardından onu bıraktığınızda meydana gelir.
Var dragndrop = ( drag: function(e) ( var dragData = e.data.dragData; dragData.target.css(( left: dragData.left + e.pageX - dragData.offLeft, top: dragData.top + e.pageY - dragData.offTop )); dragData.handler.css(( imleç: "taşı" )); dragData.target.css (( imleç: "taşı" )); dragData.onMove(e); ), bırak: function( e) ( var dragData = e.data.dragData; dragData.target.css(dragData.oldCss); //.css(( "opacity": "" )); dragData.handler.css("imleç", dragData. oldCss.cursor); dragData.onDrop(e); $().unbind("mousemove", dragndrop.drag) .unbind("mouseup", dragndrop.drop); )) )
İşlevlerimiz her nesnenin CSS konumlandırmasını değiştirir. Nesnelerinizin mutlak konumunu değiştirmek kodunuzun çalışma şeklini etkilemez çünkü her JavaScript işlevi, nesne için tanımlanan stil ne olursa olsun değişir.
Kodun geri kalanı işleyiciyi kontrol eder ve diğer stillerde kozmetik değişiklikler yapar. Burada şeffaflığa, yazı tipine ve yazı tipi rengine değişiklikler ekleyebilir veya yeni paragraflar ekleyebilirsiniz.
Sürükle/Bırak işlevleriİkinci fn.js dosyası çok basit bir kod içeriyor. Bekliyoruz tam dolu belgeyi oluşturduktan sonra işlevlerimizi çağırıyoruz. Fonksiyonun iki örneği tanımlandı Sürükler, daha önce tartışılmıştı.
.dv1 ve .dv2 sınıflarına sahip iki hareketli bloğumuz var. Hareketli bir bloktan ayrılmanız gerekiyorsa, kodun ikinci bölümünü kaldırmanız yeterlidir. Başka bir hareketli blok eklemek de kolaydır. Bu dosyaya yeni bir fonksiyon eklemeniz yeterli.
İlk adım, işlevi çağırırken seçenekleri ayarlamaktır. İşleyici adını ayarladığınızdan emin olun. Bununla birlikte, belgenin belirli bir alanında fare düğmesine basıldığında jQuery'ye hangi işleyicinin kullanılacağını söylüyoruz. İşleyici adı bir sınıf veya kimlik özelliği olabilir.
İlk fonksiyonumuzun onMove ve onDrop olmak üzere iki olay işleyicisi vardır. Her ikisi de geçerli olaya değişken olarak aktarılan yeni işlevleri çağırır. Burası dikdörtgendeki HTML kodunun her hareketle güncellenecek şekilde değiştirildiği yerdir. Bu, basit jQuery olaylarını kullanarak bir süreci nasıl kontrol edebileceğinizi göstermek için harika bir efekttir.
İkinci fonksiyonda z-Index ve opaklık parametrelerini kullanıyoruz. Başka CSS özellikleri ekleyebilir misiniz? ancak bu, ayarların kontrol edilmesi için JavaScript kodunun yeniden işlenmesini gerektirecektir. Örneğin, hareketli bir dikdörtgenin yüksekliği ve genişliği için farklı bir yazı tipi stili veya değerleri iletebilirsiniz - çok ilginç bir numara!
ÇözümBiraz çalışmayla artık harika bir sürükle ve bırak arayüzüne sahibiz. jQuery, projelerinde eski yöntemleri kullanmak isteyen geliştiricilere büyük faydalar sağlar.
Sonuç olarak, yalnızca olay işleyici işlevlerine sahip olmakla kalmıyoruz, aynı zamanda yeni değişkenleri sürüklenebilir bloklara aktarabiliyoruz. Bu, yaratıcılık için yeni olanaklar açar. Dersin gösterimi, bu tür bir kod kullanılarak neler yapılabileceğinin yalnızca bir taslağını içerir.
Kütüphane işlevlerini kullanmak için jQuery belgelerine bakın.
Borland, VCL kütüphanesi için Sürükle ve Bırak arayüzünün kendi versiyonunu ("sürükle ve bırak" olarak çevrilir) uyguladı. Bu arayüz dahilidir - formun içindeki herhangi bir Delphi kontrolünü gönderip alabilirsiniz (formun kendisi hariç) İlgili Windows API işlevlerini kullanmadan uygulanır - diğer görevlerle iletişimi sürükleyip bırakarak düzenlerken kullanılmaları gerekir.
Bir kontrolün üzerine farenin sol tuşuna tıklayarak onu başka herhangi bir öğenin üzerine "sürükleyebiliriz". Bir programcının bakış açısından bu, bir tuşun sürüklenip bırakıldığı anlarda, gerekli tüm bilgileri (sürüklenen nesneye bir işaretçi, imlecin geçerli koordinatları vb.) ileten belirli olayların üretildiği anlamına gelir. Alıcı Olaylardan biri, imlecin o anda üzerinde bulunduğu öğedir. Böyle bir olayın işleyicisi, kontrolün gönderimi alıp almadığını sisteme bildirmelidir. Alma kontrolünün üzerindeki düğme bırakıldığında, alıcının hazır olma durumuna bağlı olarak bir veya iki olay daha üretilir.
CancelDrag Geçerli sürükle ve bırak veya sürükle ve sabitle işlemini iptal eder.
FindDragTarget işlevi (const Pos: TPoint; AllowDisabled: Boolean): TControl;
İşlev, Pos parametresi tarafından tanımlanan koordinatlarla ekranın konumunu ifade eden TControl temel sınıfının bir nesnesini döndürür. Bu işlev, sürükle ve bırak veya sürükle ve kenetleme işleminin potansiyel alıcısını belirlemek için kullanılır. Belirtilen konum için pencere kontrolü yoksa işlev nil değerini döndürür. AllowDisabled parametresi, devre dışı bırakılan nesnelerin dikkate alınıp alınmayacağını belirler.
İşlev IsDragObject(Sender: TObject): Boolean;
İşlev, Sender parametresinde belirtilen nesnenin TDragObject sınıfının soyundan olup olmadığını belirler. Bu işlev, sürüklenen nesnenin kabul edilip edilmeyeceğini belirlemek için OnDragOver ve OnDockOver olay işleyicilerinde Kaynak parametresi olarak kullanılabilir. IsDragObject işlevi, sürüklenen nesneyi doğru şekilde yorumlamak için OnDragDrop ve OnDockDrop olay işleyicilerinde Kaynak parametresi olarak da kullanılabilir.
Özellikler DragMode, DragCursor, yöntemler BeginDrag, OnDragOver, OnDragDrop, OnEndDrag, OnStartDrag, Accept parametresi
Fareyi kullanarak bilgileri bir nesneden diğerine sürükleme işlemi Windows'ta yaygın olarak kullanılır.Dosyaları klasörler arasında taşıyabilir, klasörleri kendileri taşıyabilir vb.
Sürükle ve bırak işlemiyle ilişkili tüm özellikler, yöntemler ve olaylar, tüm Delphi görsel bileşenlerinin atası 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 ayarlanabilen veya program aracılığıyla dmManual veya dmAutomatic'e eşit olabilen DragMode özelliği tarafından belirlenir. dmAutomatic değeri, kullanıcı bir bileşenin üzerinde fare düğmesine bastığında sürükleme işleminin otomatik olarak başlayıp başlamayacağını belirtir. Ancak bu durumda kullanıcının fare düğmesini tıklatmasıyla ilişkili OnMouseDown olayı bu bileşen için hiçbir şekilde gerçekleşmez.
Bileşenleri aktarma ve alma arayüzü oldukça uzun zaman önce ortaya çıktı. Uygulama çalışırken iki kontrolün etkileşime girmesine izin verir. Bu durumda gerekli işlemler yapılabilir. Uygulama kolaylığına ve uzun süredir devam eden gelişime rağmen, birçok programcı (özellikle yeni başlayanlar) bu mekanizmanın belirsiz ve egzotik olduğunu düşünüyor. Ancak Sürükle ve Bırak yöntemini kullanmak çok yararlı olabilir ve uygulanması kolay olabilir. Artık bundan emin olacağız.
Mekanizmanın çalışabilmesi için iki kontrolün buna göre yapılandırılması gerekmektedir. Biri kaynak (Kaynak), ikincisi alıcı (Hedef) olmalıdır. Bu durumda kaynak herhangi bir yere taşınmaz, yalnızca mekanizmaya bu şekilde kaydedilir.
İnanın OnDragOver ve OnDragDrop olay parametrelerinde iletilen X,Y koordinatlarını form koordinatlarına dönüştürmek yeterli.
İmlecin üzerinde hareket ettiği bileşenin Sol ve Üst özellikleriyle çalışın. Size basit bir örnek vereyim. Forma bir Not bileşeni yerleştirin ve Hizala ö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'u crVSplit'e ayarlayın. Başka bir Memo bileşeni yerleştirin ve Align'ı alClient olarak ayarlayın. Her iki Memo bileşenini, yani paneli aynı anda seçin ve aşağıda gösterildiği gibi ortak bir OnDragOver olay işleyicisi oluşturun:
Son zamanlarda Android için bir oyun geliştirmeye başlama fikrim vardı. Başlangıç olarak satranç yazmaya karar verdim. Bana öyle geldi ki Sürükle ve Bırak teknolojisi, hareketli figürler için mekanizmayı uygulamak için mükemmel olacak. Deneyimsiz olanlar için, sürükle ve bırak yönteminin, bir grafik nesnesini diğerine sürükleme ve onu bıraktıktan sonra bir veya başka bir eylemi gerçekleştirme yeteneği olduğunu not ediyorum. En basit örnek, bilgisayarınızın masaüstündeki bir kısayolu çöp kutusuna sürükleyerek silmektir. Etiketi çöp kutusuna "atarak" sisteme bu iki nesneyi etkileşime girmeye zorlamak istediğimizi söyleriz. Sistem sinyalimizi alır ve hangi işlemi 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şimde bulunma deneyimimizle desteklenmektedir ve sanal ortamda harika çalışmaktadır. Satranca gelince, sürükle ve bırak yöntemini kullanarak kullanıcının taşı sürüklediği hücreyi belirlemek teknolojik olarak daha kolaydır, çünkü hücre numarasını serbest bırakma noktasının koordinatlarından hesaplamaya gerek yoktur. Bu iş sanal makine tarafından üstlenilecektir.
Sürükle ve bırak teknolojisini kullanmak, üç sorunu çok az çabayla çözmemi sağlıyor:
Görevler özetlendi, uygulamaya başlayalım.
Dokunmayla ImageView değişimiTü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ün "kutudan çıktığı gibi" değiştirilmesine izin vermediği ortaya çıktı. Ancak bu görev API kullanılarak tamamen çözülebilir. Bir dizi basit adımı uygulamamız gerekecek:
Bu eylemlerin ImageView nesnesinin OnTouchListner işleyicisinde uygulanması gerekir. Bunu yapmak için onTouch yöntemini geçersiz kılalım:
@ Public boolean'ı geçersiz kıl onTouch(View view, MotionEvent motionEvent) ( if (motionEvent. getAction() == MotionEvent. ACTION_DOWN) ( ClipData ClipData= ClipData.newPlainText("" , "" ) ; View. DragShadowBuilder dsb= new View. DragShadowBuilder (view) ; view.startDrag(clipData, dsb, view, 0 ) ; view.setVisibility(View.INVISIBLE) ; return true ; ) else ( return false ; ) )Her şey çok basit. Böylece görüntü değiştirme işlemini çözdük, bir sonraki göreve geçelim.
Sürükle bırakma özelliği için sürükleme alanını sınırlamaSürükleme alanının sınırlandırılmasında bir sorun var. Mesele şu ki, tahtanın dışına bir parça bırakırsanız, kullanıcı nesneyi boş bir alana bıraktığından ve nesnenin etkileşime girebileceği hiçbir şey olmadığından düşme olayı gerçekleşmeyecektir. Sonuç olarak figür orijinal durumuna dönmeyecek ve sonsuza kadar gizli kalacaktır. Belgeleri okumak için çok zaman harcadım ama yine de nesnelerin sürükle ve bırak alanını sınırlamanın bir yolunu bulamadım. İçgörü aniden geldi. Alanı hiçbir şekilde sınırlamama gerek yok, kullanıcının şekli doğru şekilde bırakıp bırakmadığını bilmem gerekiyor.
Doğru Sürümün Belirlenmesi
Sorularımın yanıtlarını Android Geliştiricileri web sitesindeki "sürükle sonlandırma olaylarını işleme" bölümünde buldum. İşte birkaç önemli nokta:
Bu yüzden ACTION_DRAG_ENDED olayına müdahale etmem ve getResult yöntemini çağırmam gerekiyor. Yanlış değerini döndürürse, kullanıcı parçayı tahtadan sürüklemiştir ve ImageView'ı görünür moda ayarlamam gerekir.
@ Public boolean'ı geçersiz kıl onDrag(View view, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; View dragView= (View) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( includeDragable= false ; ) else if (dragAction== DragEvent.ACTION_DRAG_ENTERED) ( includeDragable= true ; ) else if (dragAction== DragEvent.ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView.setVisibility(View.VISIBLE) ; ) ) else if (dragAction= = DragEvent.ACTION_DROP&& includeDragable) ( checkForValidMove((ChessBoardSquareLayoutView) view, dragView) ; dragView.setVisibility(View.VISIBLE) ; ) return true ; ) özel boolean dropEventNotHandled(DragEvent dragEvent) ( return ! dragEvent. getResult( ) ; )Artık kullanıcı figürü herhangi bir yere bırakabilir ve kötü bir şey olmaz.
Geçerli hamlelerin tanımıMakalenin son kısmı kullanıcının yapmaya çalıştığı hamlenin geçerliliğinin kontrol edilmesine ayrılmıştır. Bu konuya detaylıca değinmeden önce uygulamamın yapısını anlatan kısa bir not düşeceğim. Satranç tahtası bir TableLayout olarak temsil edilir ve her hücre bir LinearLayout'un çocuğudur ve bir OnDragListener'a sahiptir.
Ek olarak, her OnDragListener, oyun nesnelerinin etkileşimiyle ilgilenen ve mevcut hücrenin konumunu hatırlayan bir "aracı" nesnesine atıfta bulunur.
Kullanıcı bir parçayı hücrenin üzerine sürüklediğinde aşağıdaki eylemler mümkündür:
Açıklanan mantığı uygulayan kod aşağıdadır
@ Public boolean'ı geçersiz kıl onDrag(View view, DragEvent dragEvent) ( int dragAction= dragEvent. getAction() ; View dragView= (View) dragEvent. getLocalState() ; if (dragAction== DragEvent. ACTION_DRAG_EXITED) ( includeDragable= false ; ) else if (dragAction== DragEvent.ACTION_DRAG_ENTERED) ( includeDragable= true ; ) else if (dragAction== DragEvent.ACTION_DRAG_ENDED) ( if (dropEventNotHandled(dragEvent) ) ( dragView.setVisibility(View.VISIBLE) ; ) ) else if (dragAction= = DragEvent.ACTION_DROP&& includeDragable) ( checkForValidMove((ChessBoardSquareLayoutView) view, dragView) ; dragView.setVisibility(View.VISIBLE) ; ) return true ; )Gördüğünüz gibi taşımanın geçerli olup olmadığına bakılmaksızın ImageView görünür duruma aktarılıyor. Kullanıcının şeklin hareketini görmesini istedim. Daha önce bir hücrenin LayoutView'ın çocuğu olduğundan bahsetmiştim. Bu, ImageView'ı hücreden hücreye taşımayı kolaylaştırmak için yapılır. Aşağıda ImageView'in nasıl hareket ettiğini gösteren checkForValidMove yönteminin kodu bulunmaktadır.
özel void checkForValidMove(ChessBoardSquareLayoutView view, View dragView) ( if (mediator.isValidMove(view) ) ( ViewGroupowner= (ViewGroup) dragView.getParent() ;owner.removeView(dragView) ; view.addView(dragView) ; view.setGravity (Gravity.CENTER) ; view.showAsLanded() ; mediator.handleMove(view) ; ))Bu makalenin kendi projelerinizi geliştirirken size yardımcı olacağını umuyorum.
