Сортировка альбома с помощью HTML5
Все современные браузеры имеют поддержку функций "перетащи и брось". Значит мы можем использовать их в своих проектах и код будет достаточно простым. А в качестве практической реализации сделаем фотоальбом с возможностью раскладки фотографий по разным разделам.Такая функция достаточно часто используется на различных сайтах с набором изображений.
Разметка HTML
<div class="albums"> <div class="album" id="drop_1" droppable="true"><h2>Альбом 1</h2></div> <div class="album" id="drop_2" droppable="true"><h2>Альбом 1</h2></div> <div class="album" id="drop_3" droppable="true"><h2>Альбом 3</h2></div> </div> <div style="clear:both"></div> <div class="gallery"> <a id="1" draggable="true"><img src="/images/1.jpg"></a> <a id="2" draggable="true"><img src="/images/2.jpg"></a> <a id="3" draggable="true"><img src="/images/3.jpg"></a> <a id="4" draggable="true"><img src="/images/4.jpg"></a> <a id="5" draggable="true"><img src="/images/5.jpg"></a> <a id="6" draggable="true"><img src="/images/6.jpg"></a> <a id="7" draggable="true"><img src="/images/7.jpg"></a> <a id="8" draggable="true"><img src="/images/8.jpg"></a> <a id="9" draggable="true"><img src="/images/9.jpg"></a> <a id="10" draggable="true"><img src="/images/10.jpg"></a> <a id="11" draggable="true"><img src="/images/11.jpg"></a> <a id="12" draggable="true"><img src="/images/12.jpg"></a> </div>
Здесь определяются три объекта (виртуальные альбомы) и 12 изображений. Альбомы для сброса изображений имеют атрибут ‘droppable’ и перетаскиваемые объекты - атрибут ‘draggable’.
CSS
/* Стили фотогалереи */ .gallery { margin: 50px auto 0; width: 840px; } .gallery a { display: inline-block; height: 135px; margin: 10px; opacity: 1; position: relative; width: 180px; -khtml-user-drag: element; /* Предотвращаем выделение */ -moz-user-select: none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; /* Правила переходов */ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .gallery a img { border: 8px solid #fff; border-bottom: 20px solid #fff; cursor: pointer; display: block; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; z-index: 1; /* Свойства рамки */ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; /* Правила переходов */ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; /* Тени*/ -moz-box-shadow: 2px 2px 4px #444; -webkit-box-shadow: 2px 2px 4px #444; -o-box-shadow: 2px 2px 4px #444; box-shadow: 2px 2px 4px #444; } /* Вращение */ .gallery a:nth-child(1) img { -moz-transform: rotate(-25deg); -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } .gallery a:nth-child(2) img { -moz-transform: rotate(-20deg); -webkit-transform: rotate(-20deg); transform: rotate(-20deg); } .gallery a:nth-child(3) img { -moz-transform: rotate(-15deg); -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } .gallery a:nth-child(4) img { -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } .gallery a:nth-child(5) img { -moz-transform: rotate(-5deg); -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } .gallery a:nth-child(6) img { -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } .gallery a:nth-child(7) img { -moz-transform: rotate(5deg); -webkit-transform: rotate(5deg); transform: rotate(5deg); } .gallery a:nth-child(8) img { -moz-transform: rotate(10deg); -webkit-transform: rotate(10deg); transform: rotate(10deg); } .gallery a:nth-child(9) img { -moz-transform: rotate(15deg); -webkit-transform: rotate(15deg); transform: rotate(15deg); } .gallery a:nth-child(10) img { -moz-transform: rotate(20deg); -webkit-transform: rotate(20deg); transform: rotate(20deg); } .gallery a:nth-child(11) img { -moz-transform: rotate(25deg); -webkit-transform: rotate(25deg); transform: rotate(25deg); } .gallery a:nth-child(12) img { -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); transform: rotate(30deg); } .gallery a:hover img { z-index: 5; /* Правила переходов */ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; /* Правила трансформации */ -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); } .gallery a.hidden { height: 0; margin: 0; opacity: 0; width: 0; } .albums { margin: 40px auto 0; overflow: hidden; width: 840px; } .album { border: 3px dashed #ccc; float: left; margin: 10px; min-height: 100px; padding: 10px; width: 220px; /* Правила переходов */ -webkit-transition: all 1.0s ease; -moz-transition: all 1.0s ease; -o-transition: all 1.0s ease; transition: all 1.0s ease; } .album a { display: inline-block; height: 56px; margin: 15px; opacity: 1; position: relative; width: 75px; -khtml-user-drag: element; -webkit-user-drag: element; -khtml-user-select: none; -webkit-user-select: none; /* Предотвращаем выделение */ -moz-user-select: none; -webkit-user-select: none; -khtml-user-select: none; user-select: none; /* Правила переходов */ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; } .album a img { border: 4px solid #fff; border-bottom: 10px solid #fff; cursor: pointer; display: block; height: 100%; left: 0px; position: absolute; top: 0px; width: 100%; z-index: 1; /* Свойства рамки */ -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; /* Правила переходов */ -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; /* Тени */ -moz-box-shadow: 2px 2px 4px #444; -webkit-box-shadow: 2px 2px 4px #444; -o-box-shadow: 2px 2px 4px #444; box-shadow: 2px 2px 4px #444; }
JavaScript
Код достаточно простой. Сначала скрипт выбирает все перетаскиваемые объекты и элементы для сброса изображений. Событие ‘dragstart’ привязывается ко всем перетаскиваемым объектам. А ко всем объектам для сброса изображений привязываются события ‘dragover’, ‘dragleave’ и ‘drop’. Для первых двух событий скрипт выполняет небольшие настройки CSS для активной области сброса. Когда объект сбрасывается в области, скрипт делает его копию и размещает ее в области, и исходный объект удаляется, а затем обновляются обработчики событий (для новых объектов).
// Добавляем обработчики событий var addEvent = (function () { if (document.addEventListener) { return function (el, type, fn) { if (el && el.nodeName || el === window) { el.addEventListener(type, fn, false); } else if (el && el.length) { for (var i = 0; i < el.length; i++) { addEvent(el[i], type, fn); } } }; } else { return function (el, type, fn) { if (el && el.nodeName || el === window) { el.attachEvent('on' + type, function () { return fn.call(el, window.event); }); } else if (el && el.length) { for (var i = 0; i < el.length; i++) { addEvent(el[i], type, fn); } } }; } })(); // Внутренние переменные var dragItems; updateDataTransfer(); var dropAreas = document.querySelectorAll('[droppable=true]'); // preventDefault (останавливаем браузер при перенаправлении на текст) function cancel(e) { if (e.preventDefault) { e.preventDefault(); } return false; } // Обновляем обработчики событий function updateDataTransfer() { dragItems = document.querySelectorAll('[draggable=true]'); for (var i = 0; i < dragItems.length; i++) { addEvent(dragItems[i], 'dragstart', function (event) { event.dataTransfer.setData('obj_id', this.id); return false; }); } } // Обработчик события dragover addEvent(dropAreas, 'dragover', function (event) { if (event.preventDefault) event.preventDefault(); // Небольшая настройка this.style.borderColor = "#000"; return false; }); // Обработчик события dragleave addEvent(dropAreas, 'dragleave', function (event) { if (event.preventDefault) event.preventDefault(); // Небольшая настройка this.style.borderColor = "#ccc"; return false; }); // Обработчик события dragenter addEvent(dropAreas, 'dragenter', cancel); // Обработчик события drop addEvent(dropAreas, 'drop', function (event) { if (event.preventDefault) event.preventDefault(); // Получаем сбрасываемый объект var iObj = event.dataTransfer.getData('obj_id'); var oldObj = document.getElementById(iObj); // Получаем источник изображения var oldSrc = oldObj.childNodes[0].src; oldObj.className += 'hidden'; var oldThis = this; setTimeout(function() { oldObj.parentNode.removeChild(oldObj); // Удаляем объект из DOM // Добавялем похожий объект в другое место oldThis.innerHTML += '<a id="'+iObj+'" draggable="true"><img src="'+oldSrc+'" /></a>'; // и обновляем обработчики событий updateDataTransfer(); // Небольшая настройка oldThis.style.borderColor = "#ccc"; }, 500); return false; });
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/fg2wxqTO8Z4/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
- 2024-01-18 » Мифический человеко-DevOps
- 2023-12-28 » Google подвел итоги 2023 года в поиске
- 2023-12-28 » 5 ошибок отдела продаж, из-за которых вы теряете клиентов
- 2023-12-28 » Американский суд признал монополию Google на рынках дистрибуции Android-приложений
- 2023-12-28 » Хостинг-провайдер GoDaddy перестанет оказывать услуги пользователям из России
Бог тянет за одну руку, а черт - за обе ноги Буш Вильгельм - (1832-1908) - немецкий поэт и художник |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.