This commit is contained in:
parent
ba9c586b32
commit
0fd883b7cf
1 changed files with 0 additions and 87 deletions
|
|
@ -1,87 +0,0 @@
|
|||
import React, { useState } from 'react';
|
||||
import styled from 'styled-components';
|
||||
|
||||
const DraggableList = () => {
|
||||
const [items, setItems] = useState([
|
||||
'Item 1',
|
||||
'Item 2',
|
||||
'Item 3',
|
||||
'Item 4',
|
||||
'Item 5',
|
||||
]);
|
||||
const [draggingIndex, setDraggingIndex] = useState(null);
|
||||
|
||||
const handleDragStart = (index) => {
|
||||
setDraggingIndex(index);
|
||||
};
|
||||
|
||||
const handleDragOver = (index) => {
|
||||
// Останавливаем стандартное поведение браузера
|
||||
if (index !== draggingIndex) {
|
||||
setItems((prevItems) => {
|
||||
const newItems = [...prevItems];
|
||||
const [movedItem] = newItems.splice(draggingIndex, 1); // Удаляем перетаскиваемый элемент
|
||||
newItems.splice(index, 0, movedItem); // Вставляем его в новое место
|
||||
return newItems;
|
||||
});
|
||||
setDraggingIndex(index); // Обновляем индекс для перетаскивания
|
||||
}
|
||||
};
|
||||
|
||||
const handleDrop = () => {
|
||||
setDraggingIndex(null); // Сбрасываем состояние перетаскивания
|
||||
};
|
||||
|
||||
return (
|
||||
<StyledList>
|
||||
{items.map((item, index) => (
|
||||
<StyledItem
|
||||
key={index}
|
||||
className={draggingIndex === index ? 'dragging' : ''}
|
||||
draggable
|
||||
onDragStart={() => handleDragStart(index)}
|
||||
onDragOver={(e) => {
|
||||
e.preventDefault(); // Останавливаем стандартное поведение
|
||||
handleDragOver(index);
|
||||
}}
|
||||
onDragEnd={handleDrop}
|
||||
>
|
||||
{item}
|
||||
</StyledItem>
|
||||
))}
|
||||
</StyledList>
|
||||
);
|
||||
};
|
||||
|
||||
export default DraggableList;
|
||||
|
||||
// Стилизация с помощью styled-components
|
||||
|
||||
const StyledList = styled.ul`
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
`;
|
||||
|
||||
const StyledItem = styled.li`
|
||||
background-color: #f4f4f9;
|
||||
margin: 8px 0;
|
||||
padding: 16px;
|
||||
border-radius: 4px;
|
||||
cursor: grab;
|
||||
transition: transform 0.2s ease, background-color 0.3s ease;
|
||||
|
||||
&:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
&.dragging {
|
||||
background-color: #d0e1f9;
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: #e0e0e0;
|
||||
}
|
||||
`;
|
||||
Loading…
Add table
Add a link
Reference in a new issue