HTML5 sürükle-bırak (DnD) API'si, sayfadaki hemen hemen her unsurun sürüklenebilir hale gelebileceği anlamına gelir. Bu makalede, sürükle ve bırak temel konularını ele alacağız.
Sürüklenebilir içerik oluşturun
Çoğu tarayıcıda metin seçimlerinin, görsellerin ve bağlantıların varsayılan olarak sürüklenebilir olduğunu belirtmekte fayda var. Örneğin, Google logosunu Google Arama'da sürüklerseniz, hayalet bir görüntü göreceksiniz. Görüntü daha sonra adres çubuğuna, <input type="file" /> öğesine sürüklenip bırakılabilir veya hatta masaüstüne bile yerleştirilebilir. Diğer içerik türlerini sürüklenebilir hale getirmek için HTML5 DnD API'sini kullanmanız gerekir.
Bir nesneyi sürüklenebilir hale getirmek için öğeyi ayarlayınsürüklenebilir=doğru。 Sürüklemek, neredeyse her öğe için desteklenebilir; görseller, dosyalar, bağlantılar, dosyalar veya sayfadaki herhangi bir işaretleme dahil.
Örneğimizde, CSS Grid üzerinden düzenlenmiş bazı sütunları yeniden düzenlemek için bir arayüz oluşturacağız. Bu sütunlar için temel işaretleme aşağıda gösterilmiştir; sürüklenebilir özellik her sütun için doğru olarak ayarlanmıştır.
İşte konteyner ve kutu elemalarım için CSS. DnD işlevselliğiyle ilgili tek CSS'nin imleç: move özelliği olduğunu unutmayın. Kodun geri kalanı sadece konteyner ve kutu öğelerinin düzenini ve stilini kontrol eder.
Bu noktada, eşyayı sürükleyebileceğinizi göreceksiniz ama başka hiçbir şey olmayacak. DnD işlevselliği eklemek için JavaScript API'sini kullanmamız gerekiyor.
Drag etkinliklerini dinleyin
Tüm sürükle-bırak sürecini izlemek için birçok farklı etkinlik eklenebilir.
- sürükleme başlatma
- sürükleme
- dragenter
- sürükleme
- Dragover
- damla
- dragend
Bir DnD akışını işlemek için bir tür kaynak öğeye (sürüklemenin başlangıç noktası), veri yüküne (yerleştirmeye çalıştığınız şey) ve hedefe (snap yerleşiminin yapıldığı alan) ihtiyacınız var. Kaynak öğeler görseller, listeler, bağlantılar, dosya nesneleri, HTML blokları vb. olabilir. Amaç, kullanıcının yerleştirmeye çalıştığı verinin bırakma bölgesini (veya bırakma bölgesi kümesini) kabul etmektir. Tüm unsurların hedef olamayacağını unutmayın, örneğin görüntüler hedef olamaz.
Sürükle-bırak dizisini başlatın ve bitirin
İçerik üzerinde sürüklenebilir="true" özelliğini tanımladıktan sonra, her sütun için DnD dizisini başlatmak üzere bir sürükleme olay işleyicisi ekleyin.
Bu kod, kullanıcı sürüklemeye başladığında sütunun opaklığını %40'a ayar ve sürükleme etkinliğinin sonunda bunu %100'e geri getirir.
Sonuçlar aşağıdaki Glitch demosunda görülebilir. Bir eşyayı sürüklerseniz, opaklaşır. Sürükleme olayı kaynak öğeyi hedeflediği için, this.style.opacity %40'a ayarlamak kullanıcıya şu anda seçilen öğenin hareket ettiğine dair görsel geri bildirim verir. Öğe yerleştirildikten sonra, kaynak eleman %100 opaklığa geri döner, ancak yerleştirme fonksiyonu henüz yazılmamıştır.
Ek görsel ipuçları eklemek için dragenter, dragover ve dragleave kullanın
Kullanıcıların arayüzünüzle nasıl etkileşim kuracaklarını anlamalarına yardımcı olmak için dragenter, dragover ve dragleave etkinlik yöneticilerini kullanın. Aşağıdaki örnekte, sütunlar sürüklenebilir veya hedef alınabilir. Kullanıcıların bunu anlaması için, kullanıcı bir öğeyi bir sütunun ötesine sürüklediğinde, o sütunun sınırı noktalı bir çizgi haline gelir. Örneğin, CSS'de bir yerleştirme hedefi olan bir elemanı temsil etmek için bir over sınıfı oluşturabilirsiniz:
Sonra, bir sütunun ötesine sürüklenirken over sınıfını ekleyecek ve çıkarken kaldıracak JavaScript'te bir olay işleyicisi kurun. Dragend handler'da da, dragend sonunda sınıfın kaldırıldığından emin olmak istiyoruz.
Bu kodda belirtilecek birkaç nokta vardır:
Bir bağlantı gibi bir öğeyi sürüklerken, tarayıcının varsayılan davranışını, yani o bağlantıya yönlendirmeyi engellemeniz gerekir. Bunu yapmak için dragover etkinliğinde e.preventDefault() numarasını çağırın. Bir diğer iyi uygulama ise aynı handler'da false geri dönmektir.
Sınıf değiştirmek için dragenter olay handler'ı kullanın, dragover değil. Dragover kullanırsanız, CSS sınıfı birden fazla kez açılır çünkü olay dragover sütun havada durduğunda tetiklenir. Sonunda, bu tarayıcının render cihazının gereksiz çok fazla iş yapmasına neden olur. Her zaman yeniden çizim yapmaya devam etmek en iyisidir. Dragover etkinliklerini bir sebepten dolayı kullanmanız gerekiyorsa, etkinlik dinleyicilerini sınırlamayı veya kaldırmayı düşünün.
Yerleştirmeyi tamamla
Gerçek yerleştirmeyi yönetmek için, drop event için bir olay dinleyicisi ekleyin. Bir drop handler'da, tarayıcının varsayılan yerleştirme davranışını engellemeniz gerekir, ki bu genellikle sinir bozucu bir yönlendirme olur. e.stopPropagation() çağrılarak olayın DOM'u tetiklemesini engelleyebilir.
Yeni yöneticiyi diğer yöneticiye kaydettiğinden emin olun:
Kodu şu anda çalıştırırsanız, proje yeni bir konuma yerleştirilmez. Bunu başarmak için bir DataTransfer nesnesi kullanmanız gerekir.
DataTransfer özelliği tüm DnD harikalarının gerçekleştiği yerdir. Sürükleme işleminde gönderilen veri parçalarını kaydeder. dataTransfer, sürükleme etkinliğinde ayarlanır ve bırakma etkinliğinde okunur/işlenir. e.dataTransfer.setData(mimeType, dataPayload) çağırarak nesnenin MIME tipini ve veri yükünü ayarlayın.
Aşağıdaki örnekte, kullanıcıların sütunların sırasını yeniden düzenlemelerine izin vereceğiz. Bunu yapmak için önce kaynak öğenin HTML'sini sürüklemenin başında saklamanız gerekir:
Bırakma etkinliğinde sütun yerleştirmesini yönetin, kaynak sütunun HTML'sini, hedef sütunun HTML'sine ayarlayın, önce kullanıcı tarafından sürüklenip bırakılan hedef sütunun kaynak sütunuyla aynı olup olmadığını kontrol edin.
Daha fazla sürüklenme özelliği
dataTransfer nesnesi, sürükleme işlemi sırasında kullanıcıya görsel geri bildirim sağlamak için kullanılan özellikleri ortaya çıkarır. Bu özellikler, her yerleştirme hedefinin belirli veri tiplerine nasıl yanıt verdiğini kontrol etmek için de kullanılabilir.
- dataTransfer.effectallowed bir kullanıcının bir eleman üzerinde yapabileceği "sürükleme türünü" sınırlar. Sürükle-bırak işleme modelinde, sürükleyici ve dragover olayları sırasında dropEffect'i başlatmak için kullanılır. Bu özellik şu değerlere ayarlanabilir: none, copy, copyLink, copyMove, link, linkMove, move, all ve uninitialized.
- dataTransfer.dropEffect, sürükleme ve dragover etkinlikleri sırasında kullanıcıya verilen geri bildirimi kontrol eder. Kullanıcı hedef öğenin üzerinde durduğunda, tarayıcının imleci yapılacak eylem türünü (örneğin, kopyalama, taşıma vb.) gösterir. Etkisi şu değerlerden biri olabilir: none, copy, link, move.
- e.dataTransfer.setDragImage(imgElement, x, y) tarayıcının varsayılan "hayalet görüntü" geri bildiriminin kullanılmadığını ve bunun yerine sürükle simgesini ayarlama seçeneğinin olduğunu gösterir.
Dosyaları sürükleyip bırakarak yükleyin
Aşağıdaki basit örnek, sürükleme kaynağı ve sürükleme hedefi olarak bir sütun kullanır. Bu, kullanıcıdan öğeleri yeniden düzenlemesi istendiğinde arayüzde görülebilir. Bazı durumlarda, hedefi sürüklemek ve kaynağı sürüklemek farklı olabilir; örneğin bir arayüzde, kullanıcının seçilmiş görüntüyü hedefe sürükleyerek ürünün ana görüntüsünü seçmesi gerekir.
Sürükle ve bırak (sürükle ve bırak) genellikle kullanıcıların masaüstünden öğe sürüklemesini sağlamak için kullanılır. Ana fark drop handler'dır. dosyaya erişmek için dataTransfer.getData() kullanılmazsa, dosyanın verileri dataTransfer.files özelliğine dahil edilir:
Orijinal bağlantı:Bağlantı girişi görünür.
|
2022-4-26 10:30:50 tarihinde yayınlandı
|
|
|
|
2022-4-26 tarihinde yayınlandı 21:27:25
|
