Когда я имел дело с клиентами моего проекта, я получил задание создать компоненты для перетаскивания загрузчика изображений и сортировки изображений. Здесь я его набросал как простой проект. Я использовал React для создания этого, и если вы новичок, лучше изучить основные концепции React, прежде чем начинать это.
Это поведение компонента
Здесь я набросал функциональность компонента.
Приступим!
Прежде всего, создайте приложение для реагирования
npx create-response-app перетаскивание
перетаскивание с компакт-диска
npm start
И установи font awesome. Потому что мы используем значок font awesome для кнопки удаления изображения
npm install - save @ fortawesome / fontawesome-svg-core
npm install - save @ fortawesome / free-solid-svg-icons
npm install - save @ fortawesome / react-fontawesome
Вот мой компонент приложения
Есть два дочерних компонента и импортированный файл App.css.
Компонент загрузчика
Сначала реализуйте загрузчик HTML-файла для загрузки компонента и добавьте функцию onChange. После этого прочтите загруженный файл в функции и передайте изображения одно за другим в компонент приложения (используя опору imagesPreviewUrls).
А функция checkMimeType используется для проверки типа изображения. Если вы хотите проверить размер файла и максимальное количество файлов загружаемых изображений, вы можете создать новые функции.
Предварительный просмотр компонента
Здесь мы сохраняем все загруженные изображения в состоянии previewImages. Мы используем onDrop, onDragStart, onDragOver для сортировки изображений. В onDragOver мы распознаем dragId и dropId, после чего мы можем изменить положение изображения с помощью метода splice (). (проверьте handleDrop () и moveItem ())
При удалении изображения найдите идентификатор изображения, который передается компоненту приложения с помощью свойства deleteImage. Компонент приложения может фильтровать массив, используя идентификатор удаленного изображения.
В консоли мы видим отсортированный массив изображений.
App.css
Вы можете изменить CSS по своему желанию.
