Прилипающие блоки
764 UAH1) На основе готового проекта - перемещаемый блок
2) На листе 5 блоков (до 10).
3) При нажатии на область с буквой Д в объект JS добавляется указатель (добавляется свойство) на этот блок.
4) объект JS запоминает указатели на блоки на которых нажали Д и забывает те на которых нажали У
5) блоки можно переносить - те указатели на которые есть в объекте JS
6) блокам можно изменять размер - те указатели на которые есть в объекте JS
7) Если при отпускании кнопки мыши при переносе или изменении размера, рядом (до 20 px) оказался другой блок то переносимый (изменяемый блок) прилипает к ближайшему соседнему.
8) Ширину зоны прилипания можно изменять - передать параметр в объект JS - единое значение по вертикали и горизонтали
9) При необходимости - код для перемещаемого блока можно менять
готовый проект - перемещаемый блок
1) элемент помеченный буквой Ф - активная зона для перемещения блока, нажали мышкой и понесли
2) элемент помеченный буквой О - активная зона изменения размера по высоте и ширине, нажали мышкой и изменяем размер.
3) минимальные размеры блока 300х200px
4) блок не может выходить за размеры экрана
5) если при переноске блок достигает границы, то он сначала уменьшается в размере до минимальной величины в этом направлении, а потом перемещение останавливается.
Поясняющие рисунки во вложении
Логика и обработка событий реализованы в одном объекте JS (функции)
сам готовый проект - архив проекта
Результаты работы
Отзыв заказчика о сотрудничестве с Mark Kompanets
Прилипающие блокиПроект сдан с первого предъявления, отличная и точная работа.
В проекте реализовано сложное взаимодействие множества объектов.
Отзыв фрилансера о сотрудничестве с заказчиком
Прилипающие блокиСпасибо за проект! Рад сотрудничеству!
-
Победившая ставка2 дня764 UAH
709 21 2 1 Победившая ставка2 дня764 UAH
Доброго времени суток. Предлагаю Вам свои услуги по разработке.
Работаю с:
* WordPress
* Laravel, Yii/Yii2
* HTML, JS, CSS, jQuery
* Node.js, Express.js, EJS
* Vue.js
* Data Parsing
Сделаю в срок, как положено, соблюдая стандарты систем программирования.
Актуальные фриланс-проекты в категории Javascript и Typescript
Full-stack разработка — Amazon PPC Dashboard (Stage 1)Нужен full-stack разработчик с опытом работы с Amazon API для реализации Stage 1 внутреннего PPC-дашборда. Проект реальный, данные живые, всё готово к старту. Прототип фронтенда (5 страниц, React + TypeScript): ЧТО УЖЕ ГОТОВО — Фронтенд-прототип на React 18 + TypeScript + Vite… Javascript и Typescript, Веб-программирование ∙ 1 день 9 часов назад ∙ 25 ставок |
Разработка сайта-конструктора фотокниг и фоторамокЦель проекта Необходимо разработать современный веб-сайт для заказа фотокниг, фоторамок и другой персонализированной фотопродукции. Главная задача проекта — предоставить клиенту возможность самостоятельно создать готовый макет изделия непосредственно на сайте без участия… Javascript и Typescript, Веб-программирование ∙ 3 дня 1 час назад ∙ 95 ставок |
Команда для самописного маркетплейса ритуальных услуг.Ищем команду для запуска и развития самописного национального маркетплейса ритуальных услуг. Сразу: не ищем одиночек, джунов и “сборщиков сайтов”. Нужна сильная продуктовая команда уровня middle+/senior с реальными кейсами маркетплейсов/сложных SaaS. Просьба не откликаться,… Javascript и Typescript, Веб-программирование ∙ 3 дня 19 часов назад ∙ 26 ставок |
Доработка существующего Next.js/Supabase проекта: офферы, CRM, аналитика, AI-чатЕсть действующий проект WatchGenius — платформа аналитики люксовых часов с каталогом моделей, ценовой аналитикой, внешними офферами, формами заявок и AI-чатом. Проект уже разработан частично. Нужен не сайт с нуля, а опытный full-stack разработчик, который сможет разобраться в… Javascript и Typescript, Веб-программирование ∙ 5 дней 21 час назад ∙ 55 ставок |
Ищу Senior Full-Stack разработчика (Payload CMS) — миграция 2 сайтов гостиничной сетиСеть курортных отелей переходит с Webflow на собственный headless-стек. Два корпоративных сайта (~140 страниц вместе), multi-tenant архитектура — один код обслуживает несколько отелей на разных доменах. Проект уже стартовал: инфраструктура развернута, tenants настроены, базовые… CMS, Javascript и Typescript ∙ 9 дней 18 часов назад ∙ 19 ставок |