diff --git a/FRONT/DEV/src/components/settings/Test.tsx b/FRONT/DEV/src/components/settings/Test.tsx deleted file mode 100644 index 3d6d654..0000000 --- a/FRONT/DEV/src/components/settings/Test.tsx +++ /dev/null @@ -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 ( - - {items.map((item, index) => ( - handleDragStart(index)} - onDragOver={(e) => { - e.preventDefault(); // Останавливаем стандартное поведение - handleDragOver(index); - }} - onDragEnd={handleDrop} - > - {item} - - ))} - - ); -}; - -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; - } -`; \ No newline at end of file