DataTransfer API'yi kullanarak bariyerleri ortadan kaldırma

Kullanıcının tarayıcı penceresinin dışında veri paylaşmasına izin ver.

Jorik Tangelder

Thomas Steiner

Muhtemelen DataTransfer API bir kısmını HTML5 Sürükle ve Bırak API'sı ve Pano etkinlikleri. O da Kaynak ve alıcı hedefler arasında veri aktarmak için kullanılır.

Sürükleme ve kopyalayıp yapıştırma etkileşimleri genellikle sayfa içindeki etkileşimler için kullanılır basit metni A'dan B'ye aktarmak için kullanılır. Ancak çoğu zaman göz ardı edilen, doğru zamanda bu etkileşimlerin tarayıcı penceresinin ötesine geçmesini sağlar.

Tarayıcının yerleşik sürükleyip bırakma ve kopyalayıp yapıştırma etkileşimleri, ve herhangi bir kaynağa bağlı olmayan içeriklerdir. API birden fazla verilerin aktarıldığı yere bağlı olarak farklı davranışlara sahip veri girişleri. Sizin gelen etkinlikleri dinlerken aktarılan verileri gönderip alabilir.

Bu özellik, web'de paylaşım ve birlikte çalışabilirlik hakkındaki düşünme biçimimizi değiştirebilir Google Drive'dan yararlanmaktır. Uygulamalar arasında veri aktarımında artık sıkı sıkıya bağlı entegrasyonlar yok. Bunun yerine, kullanıcılara tüm satın alma işlemlerinde istedikleri yere götürebiliyor.

Veri aktarma

Başlamak için, sürükleyip bırakma veya kopyalayıp yapıştırma uygulamanız gerekir. Örnekler aşağıda sürükle bırak etkileşimleri gösterilmiştir. Ancak kopyalayıp yapıştırma işlemi benzerdir. Eğer hakkında bilginiz yoksa Sürükle ve Bırak API'si hakkında HTML5 Sürükle ve Bırak açıklaması başlıklı makaleye göz atın.

MIME türü anahtarlı veriler sağlayarak harici uygulamalarla serbestçe etkileşimde bulunabilirsiniz. Çoğu WYSIWYG düzenleyicisi, metin düzenleyici ve tarayıcı "temel" kullanılan MIME türlerini aşağıdaki örneğe bakın.

document.querySelector('#dragSource')
.addEventListener('dragstart', (event) => {
  event.dataTransfer.setData('text/plain', 'Foo bar');
  event.dataTransfer.setData('text/html', '<h1>Foo bar</h1>');
  event.dataTransfer.setData('text/uri-list', 'https://example.com');
});

event.dataTransfer özelliğine dikkat edin. Bu, DataTransfer. Farklı gördüğünüz gibi, bu nesne bazen başka adlara sahip mülkler tarafından döndürülür.

Veri aktarımını alma ile hemen hemen aynı şekilde işlem yapılır. Alıcı etkinlikleri dinleyin (drop veya paste) ve anahtarları okuyun. Bir öğenin üzerine sürüklendiğinde tarayıcının yalnızca verilerin type anahtarları arasında geçiş yapın. Verilere ancak bir düşüşle erişim sağlanıyorsa.

document.querySelector('#dropTarget')
.addEventListener('dragover', (event) => {
  console.log(event.dataTransfer.types);
  // Without this, the drop event won't fire.
  event.preventDefault();
});

document.querySelector('#dropTarget')
.addEventListener('drop', (event) => {
  // Log all the transferred data items to the console.
  for (let type of event.dataTransfer.types) {
    console.log({ type, data: event.dataTransfer.getData(type) });
  }
  event.preventDefault();
});

Uygulamalar arasında yaygın olarak desteklenen üç MIME türü vardır:

• text/html: HTML yükünü contentEditable öğelerinde ve zengin öğelerde oluşturur Google Dokümanlar, Microsoft Word ve diğerleri gibi metin (WYSIWYG) düzenleyicileri.
• text/plain: Giriş öğelerinin, kod düzenleyicilerin içeriğini ve yedeğin değerini ayarlar text/html başlangıç fiyatıyla.
• text/uri-list: URL çubuğunda veya tarayıcı sayfasında bırakma sırasında URL'ye gider. Bir URL bir dizin veya masaüstüne bırakıldığında oluşturulur.

text/html ürününün WYSIWYG editörleri tarafından yaygın şekilde benimsenmesi bu uygulamayı son derece faydalı hale getiriyor. HTML'de olduğu gibi dokümanları, öğeleri ve öğeleri Veri URL'leri veya herkese açık olarak erişilebilir URL'leri içerir. Bu, görsellerin (örneğin bir tuvalden) şu düzenleyicilere dışa aktarılmasında iyi sonuç verir: Google Dokümanlar.

const redPixel = 'data:image/gif;base64,R0lGODdhAQABAPAAAP8AAAAAACwAAAAAAQABAAACAkQBADs=';
const html = '<img src="' + redPixel + '" width="100" height="100" alt="" />';
event.dataTransfer.setData('text/html', html);

Kopyalama ve yapıştırma kullanarak aktar

Kopyalama ve yapıştırma etkileşimleriyle DataTransfer API'nin kullanılması aşağıda gösterilmiştir. Not: DataTransfer nesnesi, pano etkinlikleri için clipboardData adlı bir özellik tarafından döndürülür.

// Listen to copy-paste events on the document.
document.addEventListener('copy', (event) => {
  const copySource = document.querySelector('#copySource');
  // Only copy when the `activeElement` (i.e., focused element) is,
  // or is within, the `copySource` element.
  if (copySource.contains(document.activeElement)) {
    event.clipboardData.setData('text/plain', 'Foo bar');
    event.preventDefault();
  }
});

document.addEventListener('paste', (event) => {
  const pasteTarget = document.querySelector('#pasteTarget');
  if (pasteTarget.contains(document.activeElement)) {
    const data = event.clipboardData.getData('text/plain');
    console.log(data);
  }
});

Özel veri biçimleri

Temel MIME türleriyle sınırlı değilsiniz, ancak aktarılan dosyayı tanımlamak için herhangi bir anahtarı kullanabilirsiniz dışı verilerdir. Bu, uygulamanızdaki tarayıcılar arası etkileşimler için yararlı olabilir. Aşağıda gösterildiği gibi, JSON.stringify() ve JSON.parse() işlevlerini kullanarak daha karmaşık veriler aktarabilir.

document.querySelector('#dragSource')
.addEventListener('dragstart', (event) => {
  const data = { foo: 'bar' };
  event.dataTransfer.setData('my-custom-type', JSON.stringify(data));
});

document.querySelector('#dropTarget')
.addEventListener('dragover', (event) => {
  // Only allow dropping when our custom data is available.
  if (event.dataTransfer.types.includes('my-custom-type')) {
    event.preventDefault();
  }
});

document.querySelector('#dropTarget')
.addEventListener('drop', (event) => {
  if (event.dataTransfer.types.includes('my-custom-type')) {
    event.preventDefault();
    const dataString = event.dataTransfer.getData('my-custom-type');
    const data = JSON.parse(dataString);
    console.log(data);
  }
});

Web'e bağlanma

Özel biçimler kontrolünüzdeki uygulamalar arasında iletişim için mükemmel olsa da Ayrıca, biçiminizi kullanmayan uygulamalara veri aktarırken de kullanıcıyı sınırlar. Şunu istiyorsanız: bağlantı kurmak için evrensel bir veri biçimine ihtiyacınız vardır.

JSON-LD (Bağlı Veriler) standardı bunun için mükemmel bir adaydır. Evet hafif ve JavaScript ile kolayca okunup oluşturulabilir. Schema.org önceden tanımlanmış türleri ve özel şema tanımları da bir seçenek olarak sunulmaktadır.

const data = {
  '@context': 'https://schema.org',
  '@type': 'ImageObject',
  contentLocation: 'Venice, Italy',
  contentUrl: 'venice.jpg',
  datePublished: '2010-08-08',
  description: 'I took this picture during our honey moon.',
  name: 'Canal in Venice',
};
event.dataTransfer.setData('application/ld+json', JSON.stringify(data));

Schema.org türlerini kullanırken genel Thing türüyle başlayabilirsiniz. veya kullanım alanınıza (ör. Etkinlik, Kişi) daha yakın bir ifade kullanın. MediaObject, Yer ve hatta son derece spesifik türler (örneğin, Gerekirse MedicalEntity. TypeScript kullanırken, schema-dts türü tanımlarındaki arayüz tanımları.

JSON-LD verilerini gönderip alarak, daha bağlı ve açık bir web'i desteklersiniz. Entegre konuşulduğunda, harici kaynaklarla kapsamlı entegrasyonlar oluşturabilirsiniz. izin verir. Karmaşık API entegrasyonlarına gerek yoktur. gereken tüm bilgiler dahil edilir.

Herhangi bir (web) uygulaması arasında herhangi bir veri aktarma işlemi olmadan kısıtlamalar: bir takvimden favori Yapılacaklar uygulamanız ile etkinlik paylaşma, e-postalar, kişileri paylaşma. Çok iyi olurdu, değil mi? Bu süreç sizinle başlıyor. 🙌

Endişeler

DataTransfer API şu anda kullanılabilir olsa da entegrasyondan önce bilinmesi gereken bazı noktalar vardır.

Tarayıcı uyumluluğu

Masaüstü tarayıcıların tümü yukarıda açıklanan teknik için mükemmel destek sağlar, mobil cihazlar ise değil. Bu teknik, tüm önemli tarayıcılarda (Chrome, Edge, Firefox, Safari) ve işletim sistemleri (Android, ChromeOS, iOS, macOS, Ubuntu Linux ve Windows) olmak üzere, ve iOS testi geçemedi. Tarayıcılar gelişmeye devam etse de teknik şimdilik yalnızca masaüstü tarayıcılar için geçerlidir.

Keşfedilebilirlik

Sürükleme ve kopyalayıp yapıştırma işlemleri, masaüstü bilgisayarlarda çalışırken sistem düzeyindeki etkileşimlerdir. kökleri 40 yıldan eski ilk GUI'lere dayanır. Daha önce kaç defa bu etkileşimleri dosyaları düzenlemek için kullandı. Bu, web'de henüz çok yaygın değildir.

Kullanıcıları bu yeni etkileşim hakkında eğitmeniz ve bunu mümkün kılmak için kullanıcı deneyimi kalıpları oluşturmanız gerekir. Özellikle de şu ana kadar bilgisayar deneyimlerini yalnızca mobil cihazlarla sınırlı tutan kullanıcılar için son derece faydalıdır.

Erişilebilirlik

Sürükleyip bırakma işlevi çok erişilebilir bir etkileşim değildir ancak DataTransfer API'yi kopyalayıp yapıştırma işleviyle de çalışır. Kopyalayıp yapıştırma etkinliklerini dinlediğinizden emin olun. Fazladan bir işlem gerektirmez ve kullanıcılarınız, bunu eklediğiniz için teşekkür ederiz.

Güvenlik ve gizlilik

Tekniği kullanırken dikkat etmeniz gereken bazı güvenlik ve gizlilik konuları vardır.

• Pano verileri, kullanıcının cihazındaki diğer uygulamalar tarafından kullanılabilir.
• Üzerine sürüklediğiniz web uygulamaları, verilere değil, yazma tuşlarına erişebilir. Yalnızca veriler bırakma veya yapıştırma sırasında kullanılabilir hale gelir.
• Alınan veriler diğer kullanıcı girişleri gibi ele alınmalıdır; kullanmadan önce dezenfekte edip doğrulayın.

Transmat yardımcı kitaplığını kullanmaya başlama

Uygulamanızda DataTransfer API'yi kullanmak sizi heyecanlandırıyor mu? Buradan, GitHub'daki Transmat kitaplığı'nı tıklayın. Bu açık kaynak kitaplık, tarayıcıyı uyumlu hale getirir farklılıklar, JSON-LD yardımcı programları sağlar, bırakma alanlarını vurgular ve veri aktarımı işlemlerini mevcut sürükleyip bırakma işlemleri arasında entegre etmenizi sağlar hakkında bilgi edindiniz.

import { Transmat, TransmatObserver, addListeners } from 'transmat';

// Send data on drag/copy.
addListeners(myElement, 'transmit', (event) => {
  const transmat = new Transmat(event);
  transmat.setData({
    'text/plain': 'Foobar',
    'application/json': { foo: 'bar' },
  });
});

// Receive data on drop/paste.
addListeners(myElement, 'receive', (event) => {
  const transmat = new Transmat(event);
  if (transmat.hasType('application/json') && transmat.accept()) {
    const data = JSON.parse(transmat.getData('application/json'));
  }
});

// Observe transfer events and highlight drop areas.
const obs = new TransmatObserver((entries) => {
  for (const entry of entries) {
    const transmat = new Transmat(entry.event);
    if (transmat.hasMimeType('application/json')) {
      entry.target.classList.toggle('drag-over', entry.isTarget);
      entry.target.classList.toggle('drag-active', entry.isActive);
    }
  }
});
obs.observe(myElement);

Teşekkür

Luba Ertel'in sunduğu hero resim Lansmanı kaldırın.