Сортировка альбома с помощью 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

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

Сортировка альбома с помощью HTML5 | | 2012-06-19 11:58:44 | | Статьи Web-мастеру | | Все современные браузеры имеют поддержку функций перетащи и брось. Значит мы можем использовать их в своих проектах и код будет достаточно простым. А в качестве практической реализации сделаем | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: