Bu sayfa, Cloud Translation API ile çevrilmiştir.

HTML5 Sürükle ve Bırak API'sı

Bu yayın, sürükle ve bırak özelliğiyle ilgili temel bilgileri açıklar.

Eric Bidelman

Rachel Andrew

Sürüklenebilir içerikler oluşturun

Çoğu tarayıcıda metin seçimleri, resimler ve bağlantılar varsayılan olarak sürüklenebilir. Örneğin, web sayfasındaki bir bağlantıyı sürüklerseniz üzerinde oluşturmak için adres çubuğuna veya masaüstüne sürükleyip bırakabileceğiniz kısayolunu kullanabilir veya bağlantıya gidin. Diğer içerik türlerini sürüklenebilir hale getirmek için kullanmanız gerekiyorsa HTML5 Sürükle ve Bırak API'lerini kullanmanız gerekir.

Bir nesneyi sürüklenebilir hale getirmek için söz konusu öğede draggable=true değerini ayarlayın. Yaklaşık resim, dosya, bağlantı, dosya gibi her şey sürüklenebilir ve işareti görürsünüz.

Aşağıdaki örnekte, varsayılan olarak ayarlanmış sütunları CSS Izgarası ile oluşturulur. Sütunların temel işaretlemesi şöyle görünür: her sütun için draggable özelliği true olarak ayarlanmış olmalıdır:

<div class="container">
  <div draggable="true" class="box">A</div>
  <div draggable="true" class="box">B</div>
  <div draggable="true" class="box">C</div>
</div>

Kapsayıcı ve kutu öğeleri için CSS'yi burada görebilirsiniz. Bu sayfayla ilgili tek CSS sürükleme özelliği cursor: move'dır. Kodun geri kalanı kapsayıcının düzenini ve stilini kontrol eder ve kutu öğeleri gibi öğeler de kullanabilirsiniz.

.container {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.box {
  border: 3px solid #666;
  background-color: #ddd;
  border-radius: .5em;
  padding: 10px;
  cursor: move;
}

Bu noktada öğeleri sürükleyebilirsiniz, ancak başka bir şey olmaz. Eklemek istediğiniz JavaScript API'yi kullanmanız gerekir.

Etkinlikleri sürüklemeyi dinleyin

Sürükleme işlemini izlemek için aşağıdaki etkinliklerin herhangi birini dinleyebilirsiniz:

Sürükleme akışını işlemek için bir tür kaynak öğeye ihtiyacınız vardır (sürüklenme veri yükü (sürüklenen öğe) ve hedef (genişletilmiş bir alan) bırakın). Kaynak öğe, neredeyse her türden öğe olabilir. İlgili içeriği oluşturmak için kullanılan Hedef, kullanıcının verilerini kabul eden azalma bölgesi veya lansman bölgeleri grubudur düşünmeye başladım. Tüm öğeler hedef olamaz. Örneğin, hedefiniz bir resim olmalıdır.

Sürükleme dizisini başlatma ve sonlandırma

İçeriğinizde draggable="true" özelliklerini tanımladıktan sonra Her sütunda sürükleme sırasını başlatmak için dragstart etkinlik işleyicisi.

Bu kod, kullanıcı sütunu sürüklemeye başladığında sütunun opaklığını% 40'a ayarlar. daha sonra, sürükleme etkinliği sona erdiğinde bunu% 100'e döndürün.

function handleDragStart(e) {
  this.style.opacity = '0.4';
}

function handleDragEnd(e) {
  this.style.opacity = '1';
}

let items = document.querySelectorAll('.container .box');
items.forEach(function (item) {
  item.addEventListener('dragstart', handleDragStart);
  item.addEventListener('dragend', handleDragEnd);
});

Sonuç, aşağıdaki Glitch demosunda görülebilir. Bir öğeyi sürükleyin ve opaklık değişikliklerine yol açabilir. Kaynak öğe dragstart etkinliğine sahip olduğu için ayar this.style.opacity% 40'ı, kullanıcıya ilgili öğenin mükemmel olduğuna dair görsel geri bildirim verir taşınmakta olan mevcut seçim. Öğeyi bıraktığınızda kaynak öğe değeri, düşüş davranışını henüz tanımlamamış olsanız bile% 100 opaklığa döner.

Daha fazla görsel ipucu ekleyin

Kullanıcının arayüzünizle nasıl etkileşimde bulunacağını anlamasına yardımcı olmak için dragenter, dragover ve dragleave etkinlik işleyiciler. Bu örnekte sütunları, sürüklenebilir olmanın yanı sıra bırakma hedefleridir. Kullanıcıya yardımcı olma bir öğenin üzerine sürüklenmiş bir öğeyi tuttuğunda kenarlığı kesik çizgi sütununa girin. Örneğin, CSS'nizde over sınıfı oluşturabilirsiniz: öğedir:

.box.over {
  border: 3px dotted #666;
}

Ardından, JavaScript'inizde etkinlik işleyicileri ayarlayın,over sütunun üzerine sürüklendiğini ve sürüklenen öğe ayrıldığında kaldırın. İçinde ayrıca dragend işleyicisini sondaki sınıfları da sürükle.

document.addEventListener('DOMContentLoaded', (event) => {

  function handleDragStart(e) {
    this.style.opacity = '0.4';
  }

  function handleDragEnd(e) {
    this.style.opacity = '1';

    items.forEach(function (item) {
      item.classList.remove('over');
    });
  }

  function handleDragOver(e) {
    e.preventDefault();
    return false;
  }

  function handleDragEnter(e) {
    this.classList.add('over');
  }

  function handleDragLeave(e) {
    this.classList.remove('over');
  }

  let items = document.querySelectorAll('.container .box');
  items.forEach(function(item) {
    item.addEventListener('dragstart', handleDragStart);
    item.addEventListener('dragover', handleDragOver);
    item.addEventListener('dragenter', handleDragEnter);
    item.addEventListener('dragleave', handleDragLeave);
    item.addEventListener('dragend', handleDragEnd);
    item.addEventListener('drop', handleDrop);
  });
});

Bu kodda ele alınacak birkaç nokta vardır:

Varsayılan işlem dragover etkinliği için dataTransfer.dropEffect özelliğinin "none". dropEffect özelliği bu sayfanın sonraki kısımlarında ele alınmıştır. Şimdilik, ancak drop etkinliğinin tetiklenmesini engellediğini unutmayın. Bunu geçersiz kılmak için e.preventDefault() işlevini çağırın. Diğer bir iyi uygulama da Aynı işleyicide false.
dragenter etkinlik işleyici, over sınıfını değiştirmek için kullanılır dragover. dragover kullanırsanız kullanıcı çalışırken etkinlik tekrar tekrar tetiklenir sürüklenen öğeyi bir sütun üzerinde tutarak CSS sınıfının tekrar tekrar. Bu da tarayıcının çok fazla gereksiz oluşturma işlemi yapmasına neden olur. Bu da kullanıcı deneyimini etkileyebilir. Şunu en aza indirmenizi kesinlikle öneririz: kullanın. dragover kullanmanız gerekiyorsa etkinlik işleyicinizi kısıtlama veya kesintiden çıkarma hakkında daha fazla bilgi edinin.

Lansmanı tamamlayın

Düşüşü işlemek için drop etkinliği için bir etkinlik işleyici ekleyin. drop içinde işleyicisi yoksa tarayıcının düşüşlerle ilgili varsayılan davranışını engellemeniz can sıkıcı bir yönlendirmedir. Bunun için e.stopPropagation() numaralı telefonu arayın.

function handleDrop(e) {
  e.stopPropagation(); // stops the browser from redirecting.
  return false;
}

Yeni işleyiciyi diğer işleyicilerle birlikte kaydettiğinizden emin olun:

  let items = document.querySelectorAll('.container .box');
  items.forEach(function(item) {
    item.addEventListener('dragstart', handleDragStart);
    item.addEventListener('dragover', handleDragOver);
    item.addEventListener('dragenter', handleDragEnter);
    item.addEventListener('dragleave', handleDragLeave);
    item.addEventListener('dragend', handleDragEnd);
    item.addEventListener('drop', handleDrop);
  });

Kodu bu noktada çalıştırırsanız öğe yeni konuma düşmez. Alıcı: Bunun için DataTransfer nesnesini tanımlayın.

dataTransfer özelliği, sürükleme işleminde gönderilen verileri tutar. dataTransfer. değeri dragstart etkinliğinde ayarlanır ve bırakma etkinliğinde okunur veya işlenir. Telefon etme e.dataTransfer.setData(mimeType, dataPayload), nesnenin MIME'sini ayarlamanıza olanak tanır ve veri yükünü gösterir.

Bu örnekte, kullanıcıların sütunların sırasını değiştirmesine izin vereceğiz. Bunu yapmak için öncelikle sürüklenirken kaynak öğenin HTML'sini başlangıç:

function handleDragStart(e) {
  this.style.opacity = '0.4';

  dragSrcEl = this;

  e.dataTransfer.effectAllowed = 'move';
  e.dataTransfer.setData('text/html', this.innerHTML);
}

drop etkinliğinde kaynak sütunun HTML'yi, veriyi bıraktığınız hedef sütunun HTML'sine bağlayın. Bu kullanıcının bulunduğu sütuna geri dönmediğinden emin olmak da buradan sürükleyebilirsiniz.

function handleDrop(e) {
  e.stopPropagation();

  if (dragSrcEl !== this) {
    dragSrcEl.innerHTML = this.innerHTML;
    this.innerHTML = e.dataTransfer.getData('text/html');
  }

  return false;
}

Sonucu aşağıdaki demoda görebilirsiniz. Bunun işe yaraması için bir kullanın. Sürükle ve Bırak API'si mobil cihazlarda desteklenmez. Sürükleyin ve B sütununun üst kısmına A sütununu bırakın ve bunların yerlerini nasıl değiştirdiklerine bakın:

Diğer sürükleme özellikleri

dataTransfer nesnesi, hedefe görsel geri bildirim sağlamak için özellikleri gösterir ve her bırakma hedefinin belirli bir fonksiyona nasıl tepki verdiğini kontrol ederek veri türünü de kullanabilirsiniz.

dataTransfer.effectAllowed "sürükleme türünü" sınırlandırır. gerçekleştirebileceği işlemlerdir. Kullanılıyor sırasında dropEffect öğesini başlatmak için sürükle ve bırak işleme modelini dragenter ve dragover etkinlikleri. Mülk, şu değerler: none, copy, copyLink, copyMove, link, linkMove, move, all ve uninitialized.
dataTransfer.dropEffect kullanıcının dragenter ve dragover sırasında aldığı geri bildirimleri kontrol eder etkinlikler. Kullanıcı, işaretçisini bir hedef öğenin üzerinde tuttuğunda, tarayıcının imleç ne tür bir işlemin gerçekleştirileceğini gösterir (ör. bir kopya olabilir. Efekt şu değerlerden birini alabilir: none, copy, link, move.
e.dataTransfer.setDragImage(imgElement, x, y) tarayıcının varsayılan 'hayalet resmini' kullanmak yerine geri bildirim, sürükleme simgesi ayarlayabilirsiniz.

Dosya yükleme

Bu basit örnekte, bir sütunu hem sürükleme kaynağı hem de sürükleme hedefi olarak kullanılmaktadır. Bu kullanıcıdan öğeleri yeniden düzenlemesini isteyen bir kullanıcı arayüzünde olabilir. Bazı durumlarda, sürükleme hedefi ve kaynağı, arayüzde olduğu gibi farklı öğe türlerinde olabilir Kullanıcının bir ürünün ana resmi olarak bir resim seçmesi bir hedefe sürükleyebilirsiniz.

Sürükle ve Bırak, kullanıcıların masaüstünden öğeleri sürükleyip bırakmalarına olanak sağlamak için kullanılır. bir uygulamadır. Temel fark drop işleyicinizdedir. Bunun yerine dataTransfer.getData() kullanarak dosyalara erişebilirsiniz. Bu uygulamaların verileri dataTransfer.files özelliği:

function handleDrop(e) {
  e.stopPropagation(); // Stops some browsers from redirecting.
  e.preventDefault();

  var files = e.dataTransfer.files;
  for (var i = 0, f; (f = files[i]); i++) {
    // Read the File objects in this FileList.
  }
}

Bu konuyla ilgili daha fazla bilgiyi şurada bulabilirsiniz: Özel sürükleme ve bırakma.