React’te sürükle ve bırak bileşenleri oluşturmak için, genellikle birkaç adımda izlenecek bir yaklaşım vardır. Bu adımlar şu şekilde özetlenebilir:
İlk olarak, sürükleme işlemini başlatacak bileşenin belirlenmesi gerekir. Bu bileşen genellikle bir “sürükleme tutamaçsı” (drag handle) olarak adlandırılan bir bölge veya öğe olacaktır. Bu tutamaç, kullanıcının sürüklemek istediği öğenin etrafında yer alan bir alan olabilir.
Sürüklenen bileşenin bir gölgesinin oluşturulması gerekir. Bu gölge, kullanıcının öğenin nereye bırakılacağını görmesine yardımcı olur. Gölge genellikle bir “gölge bileşeni” (shadow component) olarak adlandırılır ve sürükleme işlemi sırasında fare konumuna göre güncellenir.
Sürüklenen bileşenin konumunun güncellenmesi gerekir. Bu işlem, sürükleme işlemi sırasında öğenin tutamaçtan ne kadar uzak olduğuna bağlı olarak gerçekleştirilir.
Bileşenin bırakılması işlemi gerçekleştirilir. Bu işlem, kullanıcının öğeyi nereye bıraktığını belirlemek için fare konumunu kullanır ve öğenin yeni konumunu günceller.
React’te sürükle ve bırak bileşenleri oluşturmak için birçok kütüphane ve araç bulunmaktadır. Bunlardan en popüler olanlarından biri “react-dnd” kütüphanesidir. Bu kütüphane, sürükleme ve bırakma işlevselliği sağlar ve kullanımı kolaydır.
“react-dnd” kütüphanesi kullanarak bir örnek bileşen oluşturmak için aşağıdaki adımları izleyebilirsiniz:
“react-dnd” kütüphanesini yükleyin.
npm install react-dnd react-dnd-html5-backend
import React, { Component } from 'react';
import { DragSource, DropTarget } from 'react-dnd';
import ItemTypes from './ItemTypes';
const cardSource = {
beginDrag(props) {
return {
id: props.id,
index: props.index,
};
},
};
const cardTarget = {
hover(props, monitor) {
const dragIndex = monitor.getItem().index;
const hoverIndex = props.index;
if (dragIndex === hoverIndex) {
return;
}
const hoverBoundingRect = findDOMNode(component).getBoundingClientRect();
const hoverMiddleY = (hoverBoundingRect.bottom -
// hoverBoundingRect.top) / 2;
const clientOffset = monitor.getClientOffset();
const hoverClientY = clientOffset.y - hoverBoundingRect.top;
kotlin
if (dragIndex < hoverIndex && hoverClientY < hoverMiddleY) {
return;
}
if (dragIndex > hoverIndex && hoverClientY > hoverMiddleY) {
return;
}
props.moveCard(dragIndex, hoverIndex);
monitor.getItem().index = hoverIndex;
},
};
class Card extends Component {
render() {
const { connectDragSource, connectDropTarget } = this.props;
kotlin
return connectDragSource(
connectDropTarget(
<div>
{this.props.text}
</div>
)
);
}
}
export default flow(
DragSource(ItemTypes.CARD, cardSource, (connect, monitor) => ({
connectDragSource: connect.dragSource(),
isDragging: monitor.isDragging(),
})),
DropTarget(ItemTypes.CARD, cardTarget, (connect) => ({
connectDropTarget: connect.dropTarget(),
})),
)(Card);
objectivec
3. "ItemTypes" adlı bir sabit dosyası oluşturarak, sürükleme işleminde kullanılacak öğe türlerini tanımlayın.
```javascript
const ItemTypes = {
CARD: 'card',
};
export default ItemTypes;
import React, { Component } from 'react';
import Card from './Card';
import ItemTypes from './ItemTypes';
import { DragDropContext, Droppable } from 'react-beautiful-dnd';
const cards = [
{ id: 1, text: 'Card 1' },
{ id: 2, text: 'Card 2' },
{ id: 3, text: 'Card 3' },
];
class CardList extends Component {
constructor(props) {
super(props);
this.moveCard = this.moveCard.bind(this);
}
moveCard(dragIndex, hoverIndex) {
const { cards } = this.props;
const dragCard = cards[dragIndex];
this.props.setCards(
update(cards, {
$splice: [
[dragIndex, 1],
[hoverIndex, 0, dragCard],
],
}),
);
}
render() {
return (
<DragDropContext onDragEnd={this.onDragEnd}>
<Droppable droppableId="cardList" type={ItemTypes.CARD}>
{(provided) => (
<div {...provided.droppableProps} ref={provided.innerRef}>
{cards.map((card, index) => (
<Card
key={card.id}
id={card.id}
index={index}
text={card.text}
moveCard={this.moveCard}
/>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
);
}
}
export default CardList;