İçindekiler
Etki sürükle bırak Sayfanın bir öğesini fare hareketiyle almak, genellikle üzerine tıklamak ve söz konusu öğeyi yerleştirilebileceği bir alana sürüklemek, ardından sayfamızın işlevselliğine bağlı olarak yeni bir olay meydana gelip gelmeyeceğinden oluşur.Daha önceki zamanlarda bu, kullanılarak gerçekleştirildi Javascript kütüphaneleri ve çerçeveleri jQuery stili, HTML desteği sınırlı olduğundan HTML5, tarayıcımızda zaten bu işlevlere sahibiz.
Sürükleme için öğeler oluşturma
HTML belgesinde bu efekti kullanabilecek elementleri tanımlamamız gerekiyor, bunun için bize bu amaca yardımcı olacak bazı özelliklerimiz var.
Özniteliği yerleştirirken sürüklenebilir bir öğeye tarayıcıya bu öğenin sürüklenebileceğini veya sürüklenmeyebileceğini belirtiriz, bunun için öznitelik true, false ve auto değerlerine sahiptir, çıkarabileceğimiz gibi true, tarayıcıya eğer bir öğe olması gerekiyorsa şunu söyler: sürüklenir, yanlış ise, efekti devre dışı bırakır ve otomatik olarak tarayıcıya, efektin kendisinin etkinleştirilip etkinleştirilmeyeceğine karar vermesini söyler.
İyi bir uygulama, efektin etkinleştirilip etkinleştirilmediğini açıkça belirtmek için doğru veya yanlış kullanmaktır, çünkü çoğu tarayıcı auto değerini doğru olarak yorumlasa da, sayfamızın gidişatını üçüncü taraflara bırakmamalıyız.
Sürükleme efekti olayları
Örneğe geçmeden önce, bir elementi sürüklemenin bir diğer önemli özelliğini tanımlayacağız, bu, bir elementin sürüklenmesine başlarken tanımlayabileceğimiz ve istersek çeşitli işlemler gerçekleştirebileceğimiz 3 tane olaya sahip olmamızdır. , bu olaylar şunlardır:
sürükle başlat, fareyi öğenin üzerine getirip tıkladığınızda ve söz konusu öğeyi sürüklemeye başladığınızda meydana gelen sürükleme olayının başlangıcıdır.
sürüklemek, dragstart'tan sonra olur ve öğeyi sürüklediğimiz yol boyunca sürer.
ejderha, öğeyi sürüklemeyi bıraktığımız anda, yatırma alanında bıraksak da, tövbe edip yarıya kadar sürüklemeyi bıraktığımız anda oluşur.
Sürükleme uygulaması
Aşağıda, yukarıdakilerin hepsini bir sayfaya nasıl dahil ettiğimizin bir örneğini görelim, atayacağımız öğelerin bir listesini oluşturacağız. true olarak sürüklenebilir özellik, stillerini değiştirmemize izin verecek bazı css sınıfları oluşturacağız ve son olarak bir elementin sürüklenmesini yaptığımızda bahsettiğimiz olaylarla rengini değiştirecek.
Kodu görelim:
Örnek
Buraya para yatırın
Şimdi tarayıcımızda nasıl göründüğü:
