HTML Sürükle ve Bırak API'si Nasıl Kullanılır?

Sürükle ve bırak, kullanıcı etkileşimini geliştiren ve kusursuz bir kullanıcı deneyimini kolaylaştıran önemli bir özelliktir. İster bir dosya yükleyici, sıralanabilir bir liste veya etkileşimli bir oyun oluşturmak istiyor olun, Bu API'nin yeteneklerinden nasıl yararlanılacağını anlamak, web sitenizde sahip olmanız gereken çok önemli bir beceridir geliştirme araç seti.

HTML'de Sürükle ve Bırakmanın Temelleri

Tipik bir sürükle ve bırak sisteminde iki tür öğe vardır: ilk tür, kullanıcıların sürükleyebileceği öğelerden oluşur. fareyle hareket edebilir ve ikinci tür, genellikle kullanıcıların bir nesneyi nereye yerleştirebileceğini belirten bırakılabilir öğeler içerir. eleman.

Sürükle ve bırak özelliğini uygulamak için tarayıcıya hangi öğelerin sürüklenebilir olmasını istediğinizi söylemeniz gerekir. Bir öğenin kullanıcı tarafından sürüklenebilmesi için o öğenin bir sürüklenebilirHTML özelliği ayarlanır doğru, bunun gibi:

<divdraggable="true">This element is draggablediv>

Kullanıcı bir sürükleme olayını başlatmaya başladığında, tarayıcı genellikle sürüklenen öğeye ilişkin geri bildirim sağlayan varsayılan bir "hayalet" görüntü sağlar.

Bunun yerine kendi görselinizi sağlayarak bu görseli özelleştirebilirsiniz. Bunu yapmak için DOM'dan sürüklenebilir öğeyi seçin, özel geri bildirim resmini temsil edecek yeni bir resim oluşturun ve sürükleyerek başlat olay dinleyicisini şu şekilde sürükleyin:

let img = new Image();
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/90/Twemoji_1f600.svg/220px-Twemoji_1f600.svg.png';
document.querySelector('div').addEventListener('dragstart', (event)=>{
 event.dataTransfer.setDragImage(img, 10, 10);
})

Yukarıdaki kod bloğunda, setDragImage Yöntemin üç parametresi vardır. İlk parametre görüntüye referans verir. Diğer parametreler sırasıyla görüntünün yatay ve dikey uzaklıklarını temsil eder. Kodu tarayıcıda çalıştırdığınızda ve bir öğeyi sürüklemeye başladığınızda, özel sürükleme görüntüsünün daha önce ayarlanan özel görüntüyle değiştirildiğini fark edeceksiniz.

Bir düşüşe izin vermek istiyorsanız, her ikisini de iptal ederek varsayılan davranışı önlemelisiniz. dragenter Ve ejderha olaylar şöyle:

const dropElement = document.querySelector("drop-target");
dropElement.addEventListener("dragenter", (ev) => {
 ev.preventDefault();
});
dropElement.addEventListener("dragover", (ev) => {
 ev.preventDefault();
});

DragEvent Arayüzünü Anlamak

JavaScript özellikleri DragEvent Kullanıcının sürükle ve bırak etkileşimini temsil eden arayüz. Aşağıda olası etkinlik türlerinin bir listesi bulunmaktadır. DragEvent arayüz.

• sürüklemek: Kullanıcı bir öğeyi sürüklerken bu olayı başlatır.
• ejderha: Bu olay, sürükleme işlemi sona erdiğinde veya kullanıcı işlemi durdurduğunda tetiklenir. Tipik bir sürükleme işlemi, fare düğmesinin bırakılmasıyla veya kaçış tuşuna basılmasıyla sonlandırılabilir.
• dragenter: Sürüklenen bir öğe, geçerli bir bırakma hedefine girdiğinde bu olayı tetikler.
• sürükleme izni: Sürüklenen öğe bir bırakma hedefinden ayrıldığında bu olay tetiklenir.
• ejderha: Kullanıcı sürüklenebilir bir öğeyi bırakma hedefinin üzerine sürüklediğinde etkinlik tetiklenir.
• sürükleyerek başlat: Olay, bir sürükleme işleminin başlangıcında tetiklenir.
• düşürmek: Kullanıcı, bir öğeyi bırakma hedefine bıraktığında bu olayı tetikler.

Tarayıcı dışındaki bir ortamdan (örneğin, işletim sistemi dosya yöneticisi) tarayıcıya bir dosya sürüklerken, tarayıcı, sürükleyerek başlat veya ejderha olaylar.

DragEvent programlı olarak özel bir sürükleme olayı göndermek istiyorsanız kullanışlı olabilir. Örneğin, eğer bir div sayfa yüklemesinde özel sürükleme olaylarını başlatmak için bunu nasıl yapacağınız aşağıda açıklanmıştır. İlk önce yeni bir özel oluşturun DragEvent() bunun gibi:

const customDragStartEvent = new DragEvent('dragstart', {
 dataTransfer: new DataTransfer(),
})
const customDragEndEvent = new DragEvent('dragend');

Yukarıdaki kod bloğunda, özelDragStartEvent bir örneğini temsil eder DragEvent(). İçinde özelDragStartEventiki yapıcı argümanı vardır. Birincisi, daha önce bahsedilen yedi olay türünden biri olabilen sürükleme olay türünü temsil eder.

İkinci argüman ise bir nesnedir. veri aktarımı örneğini temsil eden anahtar Veri aktarımıBu kılavuzda daha sonra hakkında daha fazla bilgi edineceksiniz. Ardından, olayı tetiklemek istediğiniz öğeyi şuradan alın: Belge Nesne Modeli (DOM).

const draggableElement = document.querySelector("#draggable");

Ardından olay dinleyicilerinin şunu beğendiğini ekleyin:

 draggableElement.addEventListener('dragstart', (event) => {
console.log('Drag started!');
 event.dataTransfer.setData('text/plain', 'Hello, world!'); 
 });
 draggableElement.addEventListener('dragend', () => {
console.log('Drag ended!');
 });

Yukarıdaki ilk olay dinleyicisinde, geri arama işlevi özelliği "Sürükle başlatıldı!" metnini günlüğe kaydeder. ve şunu çağırır: setData konusundaki yöntem veri aktarımı üzerindeki mülk etkinlik nesne. Artık özel etkinlikleri şu şekilde tetikleyebilirsiniz:

draggableElement.dispatchEvent(customDragStartEvent);
draggableElement.dispatchEvent(customDragEndEvent);

dataTransfer ile Veri Aktarma

veri aktarımı Nesne, sürükle ve bırak işlemi sırasında kaynak öğe (sürüklenebilir öğe) ile hedef öğe (bırakılabilir alan) arasında bir köprü görevi görür. Bu öğeler arasında paylaşmak istediğiniz veriler için geçici bir depolama kabı görevi görür.

Bu veriler metin, URL'ler veya özel veri türleri gibi çeşitli biçimlerde olabilir; bu da onu çok çeşitli sürükle ve bırak işlevini uygulamak için çok yönlü bir araç haline getirir.

Verileri Paketlemek için setData() işlevini kullanma

Verileri sürüklenebilir bir öğeden bırakılabilir bir öğeye aktarmak için setData() tarafından sağlanan yöntem veri aktarımı nesne. Bu yöntem, aktarmak istediğiniz verileri paketlemenize ve veri türünü belirtmenize olanak tanır. İşte temel bir örnek:

element.addEventListener('dragstart', (event) => {
 event.dataTransfer.setData('text/plain', 'Hello, world!');
});

Kullanıcı belirtilen öğeyi sürüklemeye başladığında, setData() "Merhaba dünya!" metnini paketler. veri türüyle metin/düz. Bu veriler artık sürükleme olayıyla ilişkilendirilmiştir ve bırakma işlemi sırasında bırakılabilir hedef tarafından erişilebilir.

getData() ile Veri Alma

Alıcı tarafta, bırakılabilir bir öğenin olay dinleyicisi içinde, aktarılan verileri aşağıdaki komutu kullanarak alabilirsiniz: getData() yöntem:

element.addEventListener('drop', (event) => {
const transferredData = event.dataTransfer.getData('text/plain');
console.log(`Received data: ${transferredData}`);
});

Yukarıdaki kod bloğu aynı veri tipine sahip verileri alır (metin/düz) kullanılarak ayarlandı setData() yöntem daha erken. Bu, bırakılabilir öğenin bağlamı dahilinde aktarılan verilere gerektiği gibi erişmenize ve bunları değiştirmenize olanak tanır.

Sürükle ve Bırak Arayüzlerine İlişkin Kullanım Örnekleri

Sürükle ve bırak işlevini web uygulamalarınıza entegre etmek güçlü bir gelişme olabilir, ancak bunu ne zaman ve neden uygulamanız gerektiğini anlamak önemlidir.

• Dosya Yükleyiciler: Kullanıcıların dosyaları doğrudan masaüstünden veya dosya yöneticisinden belirlenmiş bir bırakma alanına sürüklemesine izin vermek, yükleme işlemini basitleştirir.
• Sıralanabilir Listeler: Uygulamanız görev listeleri, çalma listeleri veya resim galerileri gibi öğe listeleri içeriyorsa, kullanıcılar öğeleri sürükleyip bırakma yoluyla yeniden sıralama yeteneğinden memnun kalacaklardır.
• İnteraktif Kontrol Panelleri: İçin veri görselleştirme ve raporlama araçlarıSürükle ve bırak, kullanıcıların widget'ları ve grafikleri yeniden düzenleyerek kontrol panellerini özelleştirmeleri için güçlü bir yol olabilir.

Erişilebilirliği Akılda Tutmak

Sürükle ve bırak görsel olarak çekici olsa ve kullanıcı deneyimini geliştirse de, uygulamanızın engelli olanlar da dahil olmak üzere tüm kullanıcılar tarafından erişilebilir kalmasını sağlamak çok önemlidir. Uygulamanızı kapsayıcı hale getirmek için klavye kontrolleri gibi alternatif etkileşim yöntemleri sağlayın.