Простая drag'n'drop галерея на JQuery

Для нормальной работы drag'n'drop галереи нужно помимо JQuery подключить еще и JQuery UI

HTML разметка

В HTML-разметке данной галереи нет ничего лишнего. Есть контейнер с классом img-panel и, расположенные в нем изображения.

 
<div class="img-panel">
  <img src="images/slide01.jpg" alt="">
  <img src="images/slide02.jpg" alt="">
  <img src="images/slide03.jpg" alt="">
  <img src="images/slide04.jpg" alt="">
  <img src="images/slide05.jpg" alt="">
</div>

CSS стили

В стилевом оформлении drag'n'drop галереи тоже нет ничего необычного. Картинки абсолютно спозиционированы внутри контейнера. Вся основная работа по расположению изображений внутри блока будет проделана скриптом.

.img-panel{
  position: relative;
  width:800px;
  height:600px;
  margin:0 auto;
  background:#eee;
}
.img-panel img{
  position: absolute;
  border:solid 5px #fff;
}

Скрипт

Для каждого изображения задается случайное значение для позиционирования слева, сверху и случайный угол поворота от -30 до 30 градусов. При нажатии на изображение, ему задается самый большой z-index. Благодаря этому оно помещается над остальными изображениями.

$(function(){
 
  var width = $('.img-panel').width(),    // Ширина галереи
    height = $('.img-panel').height();  //Высота галереи
  $('.img-panel img').draggable({containment: 'parent'});  // Картинки делаются перетаскиваемыми внутри контейнера
 
  // Картинки размещаются в случайном порядке
    $('.img-panel img').each(function() {      // В цикле перебираются все изображения
        var posLeft = Math.floor(Math.random() * 480);    // Для каждого случайно задается left  
        var posTop = Math.floor(Math.random() * 390);    // top
        var angle = Math.floor(Math.random() * 60 - 30);  // и угол поворота от -30 до 30 градусов
        $(this).css({
            left: posLeft,
            top: posTop,
            transform: 'rotate(' + angle + 'deg)'
        });
    });
 
  // Обработка нажатия мыши по картинке
  $('.img-panel img').mousedown(function() {
        var posZMax = 0;                  // Тут будет храниться максимальное значение z-index
        $('.img-panel img').each(function() {       
            var posZ = parseInt($(this).css('zIndex'))  // Значение z-index текущего элемента
            posZMax = (posZ > posZMax) ? posZ : posZMax;  // Если текущее значение больше, то posZMax = текущему
        });
        $(this).css({                     // Выбранная картинка помещается наверх
            zIndex: posZMax + 1
        });
    });
 
 
})

Комментарии  

0 #1 profile 02.11.2018 20:00
Need cheap hosting? Try webhosting1st, just $10 for an year.

Цитировать

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


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