Sizin gibi okuyucular MUO'yu desteklemeye yardımcı oluyor. Sitemizdeki bağlantıları kullanarak bir satın alma işlemi gerçekleştirdiğinizde, bir ortaklık komisyonu kazanabiliriz.
Hiç React bileşenlerinize sürükle ve bırak işlevi eklemek istediniz mi? Düşündüğünüz kadar zor değil.
Sürükle ve bırak, bir fare veya dokunmatik yüzey kullanarak ekrandaki öğeleri taşımanın veya değiştirmenin bir yoludur. Bir öğe listesini yeniden sıralamak veya öğeleri bir listeden diğerine taşımak için mükemmeldir.
React'te iki yöntemden birini kullanarak sürükle ve bırak bileşenleri oluşturabilirsiniz: yerleşik özellikler veya bir üçüncü taraf modülü.
React'te Sürükle ve Bırak'ı Gerçekleştirmenin Farklı Yolları
React'te sürükle ve bırak özelliğini uygulamanın iki yolu vardır: React'in yerleşik özelliklerini kullanmak veya üçüncü taraf bir modül kullanmak. La başlamak React uygulaması oluşturma, ardından tercih ettiğiniz yöntemi seçin.
Yöntem 1: Yerleşik Özellikleri Kullanma
React'te, kullanıcının bir öğeyi ne zaman sürüklediğini izlemek için onDrag olayını ve ne zaman bıraktığını izlemek için onDrop olayını kullanabilirsiniz. Sürüklemenin ne zaman başladığını ve durduğunu izlemek için onDragStart ve onDragEnd olaylarını da kullanabilirsiniz.
Bir öğeyi sürüklenebilir yapmak için sürüklenebilir özelliğini true olarak ayarlayabilirsiniz. Örneğin:
içe aktarmak Tepki, { Bileşen } itibaren 'tepki';sınıfBileşenimuzanırBileşen{
render() {
geri dönmek (
<div
sürüklenebilir
onDragStart={Bu.handleDragStart}
onDrag={Bu.handleDrag}
onDragEnd={Bu.handleDragEnd}
>
Beni sürükle!
</div>
);
}
}
ihracatvarsayılan Bileşenim;
Bir öğeyi bırakılabilir yapmak için handleDragStart, handleDrag ve handleDragEnd yöntemlerini oluşturabilirsiniz. Bu yöntemler, bir kullanıcı öğeyi sürüklediğinde ve bıraktığında çalışır. Örneğin:
içe aktarmak Tepki, { Bileşen } itibaren 'tepki';sınıfBileşenimuzanırBileşen{
handleDragStart (olay) {
// Bu metod sürükleme başladığında çalışır
konsol.log("başladı")
}handleDrag (olay) {
// Bu metod bileşen sürüklenirken çalışır
konsol.log("Sürükleniyor...")
}handleDragEnd (olay) {
// Bu metod sürükleme durduğunda çalışır
konsol.log("Bitti")
}render() {
geri dönmek (
<div
sürüklenebilir
onDragStart={Bu.handleDragStart}
onDrag={Bu.handleDrag}
onDragEnd={Bu.handleDragEnd}
>
Beni sürükle!
</div>
);
}
}
ihracatvarsayılan Bileşenim;
Yukarıdaki kodda, bir öğenin sürüklenmesini işlemek için üç yöntem vardır: handleDragStart, handleDrag ve handleDragEnd. Div'in sürüklenebilir bir özniteliği vardır ve onDragStart, onDrag ve onDragEnd özelliklerini karşılık gelen işlevlerine ayarlar.
Öğeyi sürüklediğinizde, önce handleDragStart yöntemi çalışır. Aktarılacak verileri ayarlamak gibi yapmanız gereken tüm ayarları burada yapabilirsiniz.
Ardından, siz öğeyi sürüklerken handleDrag yöntemi art arda çalışır. Öğenin konumunu ayarlamak gibi güncellemeleri yapabileceğiniz yer burasıdır.
Son olarak, öğeyi bıraktığınızda, handleDragEnd yöntemi çalışır. Aktardığınız verileri sıfırlamak gibi yapmanız gereken tüm temizleme işlemlerini burada yapabilirsiniz.
Bileşeni ekranda onDragEnd() ile de hareket ettirebilirsiniz. Bunu yapmak için, bileşenin style özelliğini ayarlamanız gerekecektir. Örneğin:
içe aktarmak React, { Bileşen, useState } itibaren 'tepki';işlevBileşenim() {
sabit [x, setX] = kullanımDevlet(0);
sabit [y, setY] = kullanımDevlet(0);sabit handleDragEnd = (olay) => {
setX(etkinlik.clientX);
setY(etkinlik.clientY);
};geri dönmek (
<div
sürüklenebilir
onDragEnd={handleDragEnd}
stil={{
konum: "mutlak",
sol: x,
üst: y
}}
>
Beni sürükle!
</div>
);
}
ihracatvarsayılan Bileşenim;
Kod, bileşenin x ve y konumunu izlemek için useState kancasını çağırır. Ardından, handleDragEnd yönteminde x ve y konumunu günceller. Son olarak, bileşenin style özelliğini onu yeni x ve y konumlarında konumlandıracak şekilde ayarlayabilirsiniz.
Yöntem 2: Üçüncü Taraf Modülü Kullanma
React'in yerleşik özelliklerini kullanmak istemiyorsanız, üçüncü taraf bir modül kullanabilirsiniz. tepki-sürükle-bırak. Bu modül, HTML5 sürükle ve bırak API'si çevresinde React'e özgü bir sarıcı sağlar.
Bu modülü kullanmak için önce npm kullanarak kurmanız gerekir:
npm düzenlemek tepki-sürükle-Ve-düşürmek--kaydetmekArdından, React bileşenlerinizde kullanabilirsiniz:
içe aktarmak Tepki, { Bileşen } itibaren 'tepki';
içe aktarmak { Sürüklenebilir, Bırakılabilir } itibaren 'tepki-sürükle-bırak';sınıfBileşenimuzanırBileşen{
render() {
geri dönmek (
<div>
<Sürüklenebilir tip="foo" veri="çubuk">
<div>Beni sürükle!</div>
</Draggable><Bırakılabilir türler={['foo']} onDrop={this.handleDrop}>
<div>Buraya bırak!</div>
</Droppable>
</div>
);
}handleDrop (veri, olay) {
// Bu metod veri düştüğünde çalışır
konsol.log (veri); // 'çubuk'
}
}
ihracatvarsayılan Bileşenim;
Tepki-sürükle-bırak modülünden Sürüklenebilir ve Bırakılabilir bileşenleri içe aktararak başlayın. Ardından, sürüklenebilir bir öğe ve bırakılabilir bir öğe oluşturmak için bu bileşenleri kullanın.
Draggable bileşeni, bileşenin temsil ettiği veri tipini belirten bir tip prop'u ve aktarılacak veriyi belirten bir data prop'u kabul eder. Türün, çok bileşenli bir arayüzde hangi bileşenin hangisi olduğunu takip etmek için seçebileceğiniz özel bir ad olduğunu unutmayın.
Droppable bileşeni, üzerine bırakabileceğiniz veri türlerini belirtmek için bir type prop kullanır. Ayrıca, üzerine bir bileşen bıraktığınızda çalışacak geri arama işlevini belirten bir onDrop desteğine sahiptir.
Sürüklenebilir bileşeni droppable üzerine bıraktığınızda, handleDrop yöntemi çalışacaktır. Bu, verilerle yapmanız gereken herhangi bir işlemi yapabileceğiniz yerdir.
Kullanıcı Dostu DnD Bileşenleri Oluşturmak İçin İpuçları
Sürükle ve bırak bileşenlerinizi daha kullanıcı dostu hale getirmek için yapabileceğiniz birkaç şey var.
İlk olarak, bir öğe sürüklenirken görsel geri bildirim sağlamalısınız. Örneğin, öğenin opaklığını değiştirebilir veya bir kenarlık ekleyebilirsiniz. Görsel efektler eklemek için normal CSS veya React uygulamanızda tailwind CSS.
İkinci olarak, kullanıcılarınızın öğeyi yalnızca geçerli bir bırakma hedefine sürükleyebildiğinden emin olmalısınız. Örneğin, türleri kabul edeceği bileşen türlerini belirten öğeye öznitelik.
Üçüncüsü, kullanıcının sürükle ve bırak işlemini iptal etmesi için bir yol sağlamalısınız. Örneğin, kullanıcının işlemi iptal etmesine izin veren bir düğme ekleyebilirsiniz.
Sürükle ve Bırak İle Kullanıcı Deneyimini İyileştirin
Sürükle ve bırak özelliği yalnızca kullanıcı deneyimini iyileştirmeye yardımcı olmakla kalmaz, aynı zamanda web uygulamanızın genel performansına da yardımcı olabilir. Bir kullanıcı artık sayfayı yenilemek veya birden fazla adım atmak zorunda kalmadan bazı verilerin sırasını kolayca yeniden düzenleyebilir.
Sürükle ve bırak özelliğini daha etkileşimli ve kullanıcı dostu hale getirmek için React uygulamanıza başka animasyonlar da ekleyebilirsiniz.
