{"blocks":[{"type":"paragraph","data":{"text":"В этой статье рассмотрим создание drag-and-drop элементов на React с помощью библиотеки react-beautiful-dnd от Atlassian. Статья рассчитана на людей, знакомых с React."}},{"type":"embed","data":{"link":"https://tproger.ru/translations/9-useful-tips-react"}},{"type":"paragraph","data":{"text":"Вы научитесь создавать drag-and-drop элементы на React и сможете создать игру, наподобие такой:"}},{"type":"image","data":{"file":{"id":24619,"url":"https://media.tproger.ru/user-uploads/34561/2023-12-28/f0b1c8de-96c0-4553-ab68-fe30b57a8821.gif"},"alt":"","title":"","caption":"Простая игра с drag-and-drop на React","stretched":false,"withBackground":false,"withBorder":false}},{"type":"header2","data":{"level":2,"text":"Основные концепции"}},{"type":"paragraph","data":{"text":"DragDropContext: место (поле), где фактически осуществляется drag-and-drop. Этот компонент вызывает onDragEnd после того, как перетаскиваемый объект был отпущен. Также можно определить onDragStart и onDragUpdate для вызова после начала перетаскивания и по какому-нибудь событию во время перетаскивания соответственно."}},{"type":"paragraph","data":{"text":"Droppable: компонент, откуда и куда перетаскивается элемент. Этому компоненту нужны несколько свойств, которые будут описаны далее."}},{"type":"paragraph","data":{"text":"Draggable: элемент, который будет перемещаться. Как и droppable, ему нужны некоторые свойства, чтобы сделать компонент перемещаемым."}},{"type":"paragraph","data":{"text":""}},{"type":"header2","data":{"level":2,"text":"Создание игры"}},{"type":"paragraph","data":{"text":"Определим начальные настройки, которые нужны для создания игры:"}},{"type":"code","data":{"code":"const initialData = {\n column: {\n id: 'column-1',\n numberIds: ['four', 'one', 'five', 'three', 'two'],\n },\n numbers: {\n 'five': { id: 'five', content: '5' },\n 'four': { id: 'four', content: '4' },\n 'one': { id: 'one', content: '1' },\n 'three': { id: 'three', content: '3' },\n 'two': { id: 'two', content: '2' },\n }\n};\n\nexport default initialData;","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Теперь можно перейти к созданию первого компонента. Он будет содержать только один метод render. Собственно, вот он:"}},{"type":"code","data":{"code":"class NumbersGame extends React.Component{\n \n public constructor(props: any) {\n super(props);\n this.onDragEnd = this.onDragEnd.bind(this);\n this.state = {...initialData};\n }\n\n public onDragEnd(result: any) {\n // Элемент отпущен!\n }\n \n public render() {\n const numbers = this.state.column.numberIds.map((numberId: string) => this.state.numbers[numberId]);\n\n return (\n \n \n \n )\n }\n}","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"NumbersGameContext: это просто обёртка для DragDropContext.
VerticalColumn: это столбец, содержащий перетаскиваемые элементы."}},{"type":"code","data":{"code":"export default (props: IVerticalColumnProps) =>","language":"javascript lazy-code"}},{"type":"header3","data":{"level":3,"text":"Droppable"}},{"type":"paragraph","data":{"text":"DroppableWrapper — это компонент, который реализует droppable-контейнер. У него есть необходимые свойства, которые определяются так:"}},{"type":"code","data":{"code":"export default (props: any) =>\n \n {(provided: any) => (\n \n {props.children}\n \n )}","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Здесь нужен droppableId, который должен быть уникальным в рамках DragDropContext. Он также ожидает функцию в качестве дочернего элемента и использует паттерн render props, который позволяет избежать внешнего вмешательства в DOM."}},{"type":"paragraph","data":{"text":"Первый аргумент этой функции — provided. У этого аргумента есть droppableProps и они важны для определения компонента как droppable. Здесь можно применить некоторые или все из возможных свойств с помощью spread-синтаксиса. Для более подробной информации можно посмотреть документацию."}},{"id":"33f89c39-5090-4ad6-be95-9aafa0bb6ff9","type":"banner-blank","data":{}},{"type":"paragraph","data":{"text":"Второе свойство — это innerRef, функция, которая передаёт необходимый DOM-элемент библиотеке.
Последнее свойство — placeholder. Этот элемент при необходимости используется для увеличения пространства в droppable-области во время перетаскивания. Placeholder нужно сделать дочерним элементом droppable-компонента. На этом этапе настройка компонента закончена."}},{"type":"header3","data":{"level":3,"text":"Draggable"}},{"type":"paragraph","data":{"text":"Теперь можно перейти к написанию DraggableListItems. Этот компонент создаёт NumberBox (перетаскиваемые объекты)."}},{"type":"code","data":{"code":"export default (props: IDraggableListItems) =>\n {props.items.map(toNumberBox)} \n\nfunction toNumberBox(item: INumberItemProps, position: number) {\n return \n}","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"NumberBox определяет обёртку для draggable:"}},{"type":"code","data":{"code":"export default (props: IDraggableItem) => {\n const className = `dnd-number size-${props.value}`;\n \n return (\n \n {props.content}\n \n )\n}","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"DraggableItemWrapper реализует draggable, потому что как и в случае droppable у него есть нужные свойства."}},{"type":"code","data":{"code":"export default (props: any) =>\n \n {(provided: any) => (\n \n {props.children}\n \n )}","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"В этом коде реализуется уже упомянутый выше паттерн render props. В данном случае у draggable есть два свойства: draggableId и index. DraggableId должен быть уникален в рамках DragDropContext. Он также принимает функцию как дочерний элемент. Первый аргумент функции — provided (как и в droppable). Второй аргумент — dragHandleProps. Это свойство определяет компонент как draggable."}},{"type":"paragraph","data":{"text":"Теперь вы можете использовать DraggableItemWrapper и забыть про низкоуровневые свойства."}},{"type":"header3","data":{"level":3,"text":"onDragEnd"}},{"type":"paragraph","data":{"text":"Вот что уже реализовано:"}},{"type":"list","data":{"items":["NumberGameContext: реализация DragDropContext.","DroppableWrapper: реализация droppable.","DraggableItemWrapper: реализация draggable."],"style":"unordered"}},{"type":"paragraph","data":{"text":"А вот те компоненты, которые являются частью игры:"}},{"type":"list","data":{"items":["VerticalColumn: компонент, который инкапсулирует droppable-столбцы и draggable-элементы.","DraggableListItems: компонент, инкапсулирующий все NumberBox-элементы.","NumberBox: собственно, переносимый элемент."],"style":"unordered"}},{"type":"paragraph","data":{"text":"Но пока onDragEnd остаётся пустым. Исправим это.
Первым делом пройдёмся по аргументам метода:"}},{"type":"code","data":{"code":"result: {\n destination: {\n droppableId: \"column-1\"\n index: 2\n }\n draggableId: \"four\"\n reason: \"DROP\"\n source: {\n droppableId: \"column-1\"\n index: 0\n }\n type: \"DEFAULT\"\n}","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Аргумент содержит данные об элементе, который перетаскивают (из какого столбца и позиции) и о месте, куда перетаскивают элемент (в какой столбец и позицию), а также какое действие сейчас происходит: «drag» или «drop»."}},{"type":"paragraph","data":{"text":"Первым делом сохраним destination, draggableId и source в переменные:"}},{"id":"17a0ae38-7202-430e-a43e-357d67f0931d","type":"banner-blank","data":{}},{"type":"paragraph","data":{"text":"const { destination, source, draggableId } = result;"}},{"type":"paragraph","data":{"text":"Теперь создадим новый список отсортированных элементов:"}},{"type":"code","data":{"code":"const column = this.state.column;\nconst numberIds = Array.from(column.numberIds);\nnumberIds.splice(source.index, 1);\nnumberIds.splice(destination.index, 0, draggableId);\nconst numbers = numberIds.map((numberId: string) =>\nparseInt(this.state.numbers[numberId].content, 10));","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"И обновим состояние:"}},{"type":"code","data":{"code":"const newColumn = {\n ...column,\n numberIds\n};\nthis.setState({\n ...this.state,\n column: newColumn\n});","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"И изюминка игры: как только пользователь перетаскивает элемент или же выигрывает, то воспроизводится соответствующая мелодия из папки assets:"}},{"type":"code","data":{"code":"public playSound(numbers: number[]) {\n const sound = isSortedAsc(numbers) ? ClapsSound : MoveSound;\n new Audio(sound).play();\n}","language":"javascript lazy-code"}},{"type":"paragraph","data":{"text":"Вот так выглядит весь метод:"}},{"type":"code","data":{"code":"public onDragEnd(result: any) {\n const { destination, source, draggableId } = result;\n if (!destination) { return }\n \n const column = this.state.column;\n const numberIds = Array.from(column.numberIds);\n numberIds.splice(source.index, 1);\n numberIds.splice(destination.index, 0, draggableId);\n const numbers = numberIds.map((numberId: string) => \n parseInt(this.state.numbers[numberId].content, 10));\n \n this.playSound(numbers);\n this.updateState(column, numberIds);\n}","language":"javascript lazy-code"}},{"type":"header2","data":{"level":2,"text":"Заключение"}},{"type":"paragraph","data":{"text":"Тех компонентов, которые были описаны выше, хватит для создание группы элементов с возможностью их перетаскивания в рамках одного столбца. Если в игру добавить CSS и дополнительные звуки, то это сделает её более приятной."}},{"type":"header2","data":{"level":2,"text":"Ресурсы"}},{"type":"list","data":{"items":["react-beautiful-dnd на GitHub.","Статьи по этой библиотеке.","Исходный код к этой игре."],"style":"unordered"}},{"type":"embed","data":{"link":"https://tproger.ru/translations/concepts-to-become-an-advanced-react-developer"}}]}

Ошибка в настройках сайта