Есть три блока: блок изображения пазла, блок изображения пазла разбитого на 25 частей и такой же блок только полупрозрачный (50% прозрачности). Мне нужно чтобы с блока изображения пазла разбитого на 25 частей можно было перетаскивать одну из этих частей на второй такой же, полупрозрачный блок.
Нужно использовать для реализации перестаскивания элементов пазла с одного блока на другой технологию Drag'N'Drop. Вот ссылка на весь программный код реализации пазла:
https://codepen.io/nightofpromises/pen/ZPXVva.
Я прошу вас не использовать JQuery, Ajax, а использовать чистый JavaScript.
Блок слайдера предназначен для выбора случайного изображения. Для получения другого изображения необходима кнопка «>» («Next»). Кнопка «Puzzlify», находящаяся под изображением, подтверждает выбор пользователем. В двух блоках сбора пазлов ниже отображается выбранное изображение. Правый блок представляет из себя подложку для сборки паззла –контейнер с «разрезанными», но не «перемешанными» частями выбранного изображения, прозрачность 50%. Левый блок представляет из себя контейнер с «разрезанными» и «перемешанными» частями выбранного изображения. Бэкграунд веб-приложения должен иметь линейный градиент.
Во всех блоках приложения пропорции изображения не должны быть изменены. Курсор в блоке сбора пазлов должен иметь вид «руки» (grab,grabbing). Изображение в блоке сборки пазла должно «разрезаться» на 25 частей (5 отрезков по вертикали и 5 –по горизонтали). Предусмотреть анимацию элементов управления.
Реализовать надо логику блока слайдера, воспользовавшись API сервера unsplash.com (
https://unsplash.it/600/600/?random) для получения случайных изображений. При открытии в блоке слайдера отображается первое рандомное изображение, последующие генерации при нажатии кнопки «>» («Next»). При длительной загрузке вместо изображения должен отображаться лоадер (
https://www.artmajeur.com/img/ajax-loader.gif). После успешной загрузки изображения должна стать активной кнопка «Puzzlify».
Надо реализовать функции «разрезания» на части изображения и «перемешивания» их для блока сбора пазлов. Создать обработчик кнопки «Puzzlify». По нажатию кнопки «Puzzlify» в двух блоках сбора пазлов ниже должно отображаться выбранное изображение, в правом только разрезанное, в левом –разрезанное и перемешанное.
Также необходимо реализовать функцию сборки пазла, включающую в себя:
− перетаскивание частей изображения с левого блока в правый;
− при верной локализации перетаскиваемой части реализация запрета дальнейшего движения;
− вывод сообщения в случае окончания сборки пазлов.
В целом функциональные возможности приложения следующими должны быть:
— предоставление выбора изображения в виде слайдера
— предоставление выбора изображения указанием ссылки
— задавать количество частей разбивки изображения
— разбивание выбранного или указанного изображения на заданное количество частей и генерация пазла
— предоставление возможности пользователю собирать сгенерированный пазл
— проверка статуса компоновки пазла, в случае если пазл собран, выдавать пользователю сообщение об успехе (и затраченном времени)
— реализация в приложении счетчика для хранения и отображения количества успешных сборов пазла
1) Так должен выглядеть интерфейс
2) Так выглядит интерфейс который был реализован.
Перемешивание пазлов сделано, но я понятия не имею как реализовать перетаскивание частей пазла на другую прозрачную часть.
И еще у меня проблема следующего характера. Дело в том что когда я нажимаю на кнопку Next, пазл не должен разбиваться на части, а картинка пазла должна сама обновляться.
Как сделать так чтобы с блока пазла который разбивается на 25 частей можно было переносить на полупрозрачный блок как делается здесь:
https://codepen.io/kiyutink/pen/NNrBxy, но с использованием чистого JavaScript, а не Ajax, Jquery. Как реализовать это?!
Помогите мне срочно, кто-нибудь, пожалуйста
Мне нужна помощь того кто разбирается в Drag'N'Drop на чистом JavaScript без использования Ajax, Jquery. Просто я понятия не имею как все то что я выше перечислила реализовать.