|
|
HTML5 Sürükle ve Bırak (DnD) API'si, bir sayfadaki neredeyse tüm öğelerin sürüklenebilir hale getirilebileceği anlamına gelir. Bu makalede, sürükle ve bırak işleminin temellerini ele alacağız.
Sürükle ve Bırak İçeriği Oluşturma
Metin seçimlerinin, resimlerin ve bağlantıların çoğu tarayıcıda varsayılan olarak sürüklenebilir olduğunu belirtmek gerekir. Örneğin, bir Google aramasında Google logosunu sürüklerseniz, hayalet görüntüyü görürsünüz. Bu görüntü daha sonra sürüklenip adres çubuğuna, <input type="file" /> öğesine ve hatta masaüstüne bırakılabilir. 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 yapmak için o öğede draggable=true ayarını yapın. resimler, dosyalar, bağlantılar, belgeler veya sayfadaki herhangi bir işaretleme dahil olmak üzere hemen hemen her öğe sürüklemeyi destekleyebilir.
Örneğimizde, CSS Izgarası kullanılarak düzenlenmiş bazı sütunları yeniden düzenlemek için bir arayüz oluşturacağız. Bu sütunlar için temel biçimlendirme aşağıda gösterilmiştir ve sürüklenebilir özelliği her sütun için true olarak ayarlanmıştır.
İşte kapsayıcı ve kutu öğelerim için CSS. DnD işlevselliği ile ilgili tek CSS'nin cursor: move özelliği olduğuna dikkat edin. Kodun geri kalanı yalnızca konteyner ve kutu öğelerinin düzenini ve stilini kontrol ediyor.
Bu noktada, öğeleri sürükleyebildiğinizi fark edeceksiniz, ancak başka hiçbir şey olmuyor. DnD işlevselliği eklemek için JavaScript API'sini kullanmamız gerekir.
Sürükleme Olaylarını Dinleme
Tüm sürükle ve bırak işlemini izlemek için eklenebilecek birçok farklı olay vardır.
dragstart drag dragenter dragleave dragover drop dragend
Bir DnD akışını işlemek için, bir tür kaynak öğeye (sürüklemenin başladığı yer), bir veri yüküne (yerleştirmeye çalıştığınız şey) ve bir hedefe (yerleştirmenin yakalandığı alan) ihtiyacınız vardır. Kaynak öğe bir resim, liste, bağlantı, dosya nesnesi, HTML bloğu vb. olabilir. Hedef, kullanıcının yerleştirmeye çalıştığı verileri alan veri yüküdür. Hedef, kullanıcının yerleştirmeye çalıştığı verileri alan yerleştirme alanıdır (veya yerleştirme alanları kümesidir). Tüm öğelerin hedef olamayacağını, örneğin görüntülerin hedef olamayacağını unutmayın.
Sürükle ve bırak dizisini başlatma ve sonlandırma
İçerik için draggable="true" niteliğini tanımladıktan sonra, her sütun için DnD dizisini başlatmak üzere bir dragstart olay işleyicisi ekleyin.
Bu kod, kullanıcı sürüklemeye başladığında sütunların opaklığını %40'a ayarlayacak ve sürükleme olayı sona erdiğinde %100'e döndürecektir.
Sonuçlar aşağıdaki Glitch demosunda görülebilir. Bir öğeyi sürüklediğinizde öğe opak hale gelir. Dragstart olayı kaynak öğeyi hedeflediğinden, this.style.opacity öğesinin %40 olarak ayarlanması kullanıcıya seçili öğenin hareket ettiğine dair görsel geri bildirim sağlar. Bir öğe yerleştirildikten sonra, place işlevi henüz yazılmamış olsa bile kaynak öğe %100 opaklığa geri döner.
Dragenter, dragover ve dragleave ile ek görsel ipuçları ekleme
Kullanıcıların arayüzünüzle nasıl etkileşime geçeceklerini anlamalarına yardımcı olmak için dragenter, dragover ve dragleave olay işleyicilerini kullanın. Aşağıdaki örnekte, sütunlar sürüklenebilir olmanın yanı sıra aynı zamanda yerleştirme hedefleridir. Kullanıcının bunu anlamasına yardımcı olmak için, kullanıcı bir öğeyi bir sütunun yanından sürüklediğinde, sütunun kenarlığı noktalı bir çizgiye dönüşür. Örneğin, yerleştirme hedefi olan öğeyi temsil etmek için CSS'de bir over sınıfı oluşturabilirsiniz:
Ardından, sütunu sürüklerken over sınıfını eklemek ve sütundan çıkarken kaldırmak için JavaScript'te olay işleyicileri ayarlayın. Dragend işleyicisinde, sürükleme sona erdiğinde sınıfın kaldırıldığından da emin olacağız.
Bu kodda bahsedilmesi gereken birkaç şey var:
Bağlantı gibi bir öğeyi sürüklerken, tarayıcının varsayılan davranışı olan o bağlantıya gitmeyi engellemeniz gerekir. Bunu yapmak için dragover olayında e.preventDefault() işlevini çağırın. Başka bir iyi uygulama da aynı işleyicide false değerini döndürmektir.
dragover'ı kullanmak yerine over sınıfını değiştirmek için dragenter olay işleyicisini kullanın. dragover'ı kullanırsanız, sütunun üzerine gelindiğinde dragover olayı sürekli tetikleneceğinden CSS sınıfı birden çok kez değiştirilecektir. Sonuçta bu, tarayıcının işleyicisinin çok fazla gereksiz iş yapmasına neden olur. Yeniden çizimleri her zaman minimumda tutmak en iyisidir. Herhangi bir nedenle dragover olayını kullanmanız gerekiyorsa, olay dinleyicisini sınırlamayı veya kaldırmayı düşünün.
Yerleştirmeyi tamamlama
Gerçek yerleştirme işlemini gerçekleştirmek için, bırakma olayına bir olay dinleyicisi ekleyin. Düşürme işleyicisinde, tarayıcının varsayılan yerleştirme davranışını durdurmanız gerekir; bu genellikle bir tür can sıkıcı yeniden yönlendirmedir. Olayın DOM'u tetiklemesini önlemek için e.stopPropagation() işlevini çağırabilirsiniz.
Yeni işleyiciyi diğer işleyicilere kaydettiğinizden emin olun:
Kodu bu noktada çalıştırırsanız, öğe yeni konuma yerleştirilmeyecektir. Bunu başarmak için DataTransfer nesnesini kullanmanız gerekir.
DataTransfer özelliği, tüm DnD sihrinin gerçekleştiği yerdir. Sürükleme işlemi sırasında gönderilen veri parçalarını tutar. dataTransfer dragstart olayında ayarlanır ve drop olayında okunur/işlenir. e.dataTransfer.setData(mimeType, dataPayload) çağrısı nesnenin MIME türünü ve veri yükünü ayarlar.
Aşağıdaki örnekte, kullanıcının sütunları yeniden sıralamasına izin vereceğiz. Bunu yapmak için, öncelikle kaynak öğenin HTML'sini sürüklemenin başlangıcında saklamanız gerekir:
Kaynak sütunun HTML'sini yerleştirilecek hedef sütunun HTML'sine ayarlayarak ve ilk olarak kullanıcı tarafından sürüklenip bırakılan hedef sütunun kaynak sütunla aynı olup olmadığını kontrol ederek bırakma olayında sütun yerleştirme işlemini gerçekleştirin.
Daha Fazla Sürükleme Özelliği
DataTransfer nesnesi, sürükleme sırasında kullanıcıya görsel geri bildirim sağlamak için kullanılan özellikleri ortaya çıkarır. Bu özellikler, her bir yerleştirme hedefinin belirli veri türlerine nasıl tepki vereceğini kontrol etmek için de kullanılabilir.
- dataTransfer.effectAllowed kullanıcının öğe üzerinde gerçekleştirebileceği "sürükleme türünü" kısıtlar. Sürükle ve bırak işleme modelinde, dragenter ve dragover olayları sırasında dropEffect'i başlatmak için kullanılır Özellik şu değerlere ayarlanabilir: none, copy, copyLink, copyMove, link, linkMove, move, all ve uninitialized.
- dataTransfer.dropEffect, dragenter ve dragover olayları sırasında kullanıcıya sağlanan geri bildirimi kontrol eder. Kullanıcı hedef öğenin üzerine geldiğinde, tarayıcının imleci gerçekleştirilecek eylemin türünü gösterir (örn. kopyalama, taşıma vb.).
- Etki ş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 bildirimini kullanmak yerine, isteğe bağlı olarak sürükleme simgesini ayarlayabileceğinizi belirtir Tarayıcının varsayılan "hayalet görüntü" geri bildirimini kullanmak yerine, sürükleme simgesini ayarlamayı seçebilirsiniz.
Sürükle ve bırak yoluyla dosya yükleme
Aşağıdaki basit örnek, bir sütunu sürükleme kaynağı ve sürükleme hedefi olarak kullanır. Bu, kullanıcıdan öğeleri yeniden düzenlemesi istendiğinde kullanıcı arayüzünde görülebilir. Bazı durumlarda, sürükle hedefi ve sürükle kaynağı farklı olabilir, örneğin kullanıcının seçili resmi hedefe sürükleyerek bir ürünün ana resmi olacak bir resmi seçmesi gereken bir arayüzde olduğu gibi.
Sürükle ve bırak genellikle kullanıcının öğeleri masaüstünden bir uygulamaya sürüklemesine izin vermek için kullanılır. Temel fark, bırakma işleyicisidir. Dosyaya erişmek için dataTransfer.getData() kullanmak yerine, dosyanın verileri dataTransfer.files özelliğinde yer alacaktır:
Orijinal makalenin bağlantısı: https: //web.dev/i18n/zh/drag-and-drop/
|
Önceki: Rufus istemi dosyayı indiremedi hata çözümüSonraki: HTML div öğesini keyfi sürükleme efekti ayarlama
|
f 