kod

HTML5'in Sürükle ve Bırakması Nasıl Kullanılır

Uzun süre boyunca sürükle ve bırak arayüzleri oluşturmamıza izin veren JavaScript işlevleri mevcuttu, ancak bu uygulamaların hiçbiri tarayıcıya özgü değildi.

HTML5'te, sürükle ve bırak arayüzleri oluşturmanın yerel bir yöntemine sahibiz (JavaScript’ten biraz yardım alarak).

Bunu nasıl başaracağınız konusunda size izin vereceğim…

Tarayıcı desteği

Devam etmeden önce bunu yolumuza çıkarmak isterim: şu anda HTML5 sürükle ve bırak tüm büyük masaüstü tarayıcıları tarafından destekleniyor (IE de dahil olmak üzere (IE 5.5'te kısmi destek var)) ancak şu anda popüler mobil cihazlar tarafından desteklenmiyor. tarayıcılar.

Sürükle ve bırak olayları

Sürükle ve bırak işleminin her aşamasında, tarayıcının hangi JavaScript kodunun yürütüleceğini bilmesi için farklı bir olay tetiklenir; olaylar:

  • dragStart: kullanıcı öğeyi sürüklemeye başladığında patlar.
  • dragEnter: sürüklenebilir öğe ilk hedef öğe üzerinde sürüklendiğinde tetiklenir.
  • dragOver: sürükleme meydana geldiğinde fare bir öğe üzerinde hareket ettirildiğinde patlar.
  • dragLeave: kullanıcının imleci sürüklerken bir öğe bıraktığında tetiklenir.
  • sürükle: öğemizin sürüklenmesi sırasında fareyi hareket ettirdiğimizde her seferinde yanar.
  • damla: gerçek damla gerçekleştirildiğinde ateşlenir.
  • dragEnd: Nesneyi sürüklerken kullanıcı fareyi serbest bıraktığında tetiklenir.

Tüm bu olay dinleyicileri ile arayüzünüzün nasıl çalıştığını ve tam olarak nasıl farklı koşullarda performans gösterdiğini kontrol edebilirsiniz.

DataTransfer nesnesi

Tüm sürükle ve bırak büyüsü burada gerçekleşir; Bu nesne, sürükleme işlemi tarafından gönderilen verileri tutar. Veriler çeşitli şekillerde ayarlanabilir ve alınabilir, en önemlileri şunlardır:

  • dataTransfer.effectAllowed = value: Bu, izin verilen eylem türlerini döndürür, olası değerler hiçbiri, kopyalama, copyLink, copyMove, link, linkMove, taşı, tümü ve başlatılmamış.
  • dataTransfer.setData (biçim, veri): belirtilen verileri ve biçimini ekler.
  • dataTransfer.clearData (format): belirli bir formattaki tüm verileri temizler.
  • dataTransfer.setDragImage (element, x, y): sürüklemek istediğiniz görüntüyü ayarlar, x ve y değerleri, fare imlecinin nerede olması gerektiğini belirtir (0, 0 üst sol yerleştirir).
  • data = dataTransfer.getData (format): Adından da anlaşılacağı gibi, belirli bir format için mevcut olan verileri döndürür.

Sürükle ve bırak örneği oluşturma

Şimdi yaratmaya başlayacağız basit sürükle ve bırak örneği, İki küçük div ve daha büyük bir tane olduğumuzu görebiliriz, küçük olanları sürükleyip bırakabiliriz ve hatta onları geri alabiliriz.

Nesneyi sürükleme

Yapmamız gereken ilk şey, HTML'mizi oluşturmak. Sürüklenebilir öznitelikle div'leri sürükleyebiliriz, şöyle ki: 

draggable="true">

Bu yapıldığında, bu öğeyi sürüklemeye başladığımız zaman çalışacak javascript işlevini tanımlamamız gerekir: 

function dragStart(ev) {ev.dataTransfer.effectAllowed='move';ev.dataTransfer.setData("Text", ev.target.getAttribute('id'));   ev.dataTransfer.setDragImage(ev.target,100,100);return true;}

Bu kodda ilk olarak operasyonda ne tür bir etkiye izin verdiğimizi bildiririz ve bunu harekete geçiririz, ikinci satırda işlem için verileri belirleriz ve bu durumda tür Metin'dir ve değer öğenin kimliğidir. sürüklüyoruz. Bundan sonra, ne sürükleyeceğimizi belirlemek için setDragImage yöntemini kullanıyoruz ve sonra imlecin sürüklenirken nerede olacağını ve küplerin 200px 200 piksel olduğu için bu merkeze yerleştirdik. Sonunda doğru döndük .

Nesneyi bırakmak

Bir öğenin bir düşüşü kabul etmesi için, 3 farklı olayı dinlemesi gerekir: dragEnter, dragOver ve ayrıca drop olayı da bu yüzden büyük olanın kimliğine sahip div'daki html'ye şunu ekleyelim:

Şimdi etkinlik dinleyicilerini ekledik, bu işlevleri, dragenter ve dragover olayları ile başlayacağız: 

function dragEnter(ev) {ev.preventDefault();return true;}function dragOver(ev) {ev.preventDefault();}

İlk fonksiyonda, sürüklemekte olduğumuz eleman, düşürülmesi gereken öğeye ulaştığında ne olmasını istediğimizi tanımlarız, bu durumda sadece tarayıcının varsayılan davranışını engelleriz, ancak değiştirmek istediğiniz herhangi bir şeyi yapabilirsiniz. kullanıcının doğru alana sürüklendiğini ve dragleave etkinliğini kullanarak yaptığınız değişiklikleri geri alabileceğinizi belirtmek için arka plan veya metin ekleyin. DragOver işlevinin bir sonraki adımında , düşüşün izin vermesini önleriz .

Bir sonraki kısım, unsuru istenen hedefe bıraktığımız zaman için fonksiyonu tanımladığımız yerdir: 

function dragDrop(ev) {var data = ev.dataTransfer.getData("Text");ev.target.appendChild(document.getElementById(data));ev.stopPropagation();return false;}

Bu son bölümde ilk olarak, metin formatı için mevcut olan tüm verileri elde ettiğimiz bir veri değişkeni belirledik ve daha sonra, (bizim sürüklediğimiz öğe olacak olan) verileri, düşmeyi dilediğimiz bölüme ekliyoruz eleman Son olarak bazı sonlar, yayılmayı durdurma ve yanlış geri dönme gibi dokunur.

Bölümü bir hedef düşürme

Kontrol etme demo Gördüğünüz gibi, iki divun da orijinal konumlarına geri çekilebildiğinden emin olduk. Mutlu bir şekilde, başka bir damla hedefi eklemek düşündüğünüzden daha basit olabilir; işlevler zaten yerinde olduğundan, tek yapmamız gereken olay dinleyicilerini eklemek, böylece:

Ve bu, divleri orijinal yere sürüklemeye izin vermek için ihtiyacımız olan şey.

Sonuç

JavaScript kütüphaneleri kullanılarak oluşturulan birçok sürükle ve bırak uygulaması vardır ve bu kütüphaneleri kullanmak genellikle daha kolaydır. Ama umarım bu HTML5 ve JavaScript tekniğinde, yerel çözümün gelecekteki potansiyelini görürsünüz.

Sürükle ve bırak arayüzü oluşturdunuz mu? Yerel HTML5, salt JavaScript çözümleriyle nasıl karşılaştırılır? Yorumlarda bize bildirin.

Öne çıkan görsel / küçük resim, photophilde ile görüntü bırakın.

kullanılabilirlik