Bu yayın, sürükle ve bırak özelliğiyle ilgili temel bilgileri açıklar.
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çindataTransfer.dropEffect
özelliğinin"none"
.dropEffect
özelliği bu sayfanın sonraki kısımlarında ele alınmıştır. Şimdilik, ancakdrop
etkinliğinin tetiklenmesini engellediğini unutmayın. Bunu geçersiz kılmak içine.preventDefault()
işlevini çağırın. Diğer bir iyi uygulama da Aynı işleyicidefalse
.dragenter
etkinlik işleyici,over
sınıfını değiştirmek için kullanılırdragover
.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ındadropEffect
öğesini başlatmak için sürükle ve bırak işleme modelinidragenter
vedragover
etkinlikleri. Mülk, şu değerler:none
,copy
,copyLink
,copyMove
,link
,linkMove
,move
,all
veuninitialized
.dataTransfer.dropEffect
kullanıcınındragenter
vedragover
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.