React bileşenlerinize hiç sürükle ve bırak işlevi eklemek istediniz mi? Düşündüğün kadar zor değil.
Sürükle ve bırak, bir fare veya dokunmatik yüzey kullanarak bir 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 üçüncü taraf modül.
React’te Sürükle ve Bırak’ı Uygulamanın Farklı Yolları
React’te sürükle ve bırak uygulamasının iki yolu vardır: React’in yerleşik özelliklerini kullanmak veya üçüncü taraf bir modül kullanmak. Bir React uygulaması oluşturarak başlayın , 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ıklarını izlemek için onDrop olayını kullanabilirsiniz. Sürüklemenin ne zaman başlayıp ne zaman durduğunu izlemek için onDragStart ve onDragEnd olaylarını da kullanabilirsiniz.
Bir öğeyi sürüklenebilir yapmak için, sürüklenebilir özniteliği true olarak ayarlayabilirsiniz. Örneğin:
import React, { Component } from ‘react’;
class MyComponent extends Component {
render() {
return (
<div
draggable
onDragStart={this.handleDragStart}
onDrag={this.handleDrag}
onDragEnd={this.handleDragEnd}
>
Drag me!
</div>
);
}
}
export default MyComponent;
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:
import React, { Component } from ‘react’;
class MyComponent extends Component {
handleDragStart(event) {
// This method runs when the dragging starts
console.log(“Started”)
}
handleDrag(event) {
// This method runs when the component is being dragged
console.log(“Dragging…”)
}
handleDragEnd(event) {
// This method runs when the dragging stops
console.log(“Ended”)
}
render() {
return (
<div
draggable
onDragStart={this.handleDragStart}
onDrag={this.handleDrag}
onDragEnd={this.handleDragEnd}
>
Drag me!
</div>
);
}
}
export default MyComponent;
Yukarıdaki kodda, bir öğenin sürüklenmesini işlemek için üç yöntem vardır: handleDragStart, handleDrag ve handleDragEnd. Div, sürüklenebilir bir özniteliğe sahiptir ve onDragStart, onDrag ve onDragEnd özelliklerini karşılık gelen işlevlerine ayarlar.
Öğeyi sürüklediğinizde, önce handleDragStart yöntemi çalışacaktır. Aktarılacak verileri ayarlamak gibi yapmanız gereken herhangi bir kurulumu burada yapabilirsiniz.
Ardından, siz öğeyi sürüklerken handleDrag yöntemi tekrar tekrar çalışır. Bu, öğenin konumunu ayarlamak gibi herhangi bir güncellemeyi yapabileceğiniz yerdir.
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 buradan yapabilirsiniz.
Bileşeni ayrıca onDragEnd() içinde ekranın etrafında da hareket ettirebilirsiniz. Bunu yapmak için, bileşenin stil özelliğini ayarlamanız gerekecektir. Örneğin:
import React, { Component, useState } from ‘react’;
function MyComponent() {
const [x, setX] = useState(0);
const [y, setY] = useState(0);
const handleDragEnd = (event) => {
setX(event.clientX);
setY(event.clientY);
};
return (
<div
draggable
onDragEnd={handleDragEnd}
style={{
position: “absolute”,
left: x,
top: y
}}
>
Drag me!
</div>
);
}
export default MyComponent;
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 stil özelliğini yeni x ve y konumlarında konumlandırmak için ayarlayabilirsiniz.
Yöntem 2: Üçüncü Taraf Modül Kullanma
React’in yerleşik özelliklerini kullanmak istemiyorsanız, tepki-sürükle-bırak gibi üçüncü taraf bir modül kullanabilirsiniz . Bu modül, HTML5 sürükle ve bırak API’sinin etrafında React’e özel bir sarmalayıcı sağlar.
Bu modülü kullanmak için önce npm kullanarak kurmanız gerekir:
npm install react-drag-and-drop –save
Ardından, React bileşenlerinizde kullanabilirsiniz:
import React, { Component } from ‘react’;
import { Draggable, Droppable } from ‘react-drag-and-drop’;
class MyComponent extends Component {
render() {
return (
<div>
<Draggable type=”foo” data=”bar”>
<div>Drag me!</div>
</Draggable>
<Droppable types={[‘foo’]} onDrop={this.handleDrop}>
<div>Drop here!</div>
</Droppable>
</div>
);
}
handleDrop(data, event) {
// This method runs when the data drops
console.log(data); // ‘bar’
}
}
export default MyComponent;
Tepki-sürükle ve 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.
Sürüklenebilir bileşen, bileşenin temsil ettiği veri türünü belirten bir prop tipini ve aktarılacak verileri belirten bir data prop’unu kabul eder. Türün, çok bileşenli bir arabirimde 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 olan geri çağırma işlevini belirten bir onDrop desteğine sahiptir.
Sürüklenebilir bileşeni bırakılabilir öğeye 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 React uygulamanızda normal CSS veya arkadan rüzgar CSS kullanabilirsiniz .
İ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, kabul edeceği bileşen türlerini belirten type özniteliğini öğeye ekleyebilirsiniz .
Üçü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 ile 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.