Все современные браузеры имеют поддержку функций "перетащи и брось". Значит мы можем использовать их в своих проектах и код будет достаточно простым. А в качестве практической реализации сделаем фотоальбом с возможностью раскладки фотографий по разным разделам.Такая функция достаточно часто используется на различных сайтах с набором изображений.

Разметка 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>Альбом 2</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;
});

Добавлено: 23 Апреля 2018 20:26:23 Добавил: Андрей Ковальчук Нравится 0

Добавить