Главная   Новости   Поиск   
Азбука программиста




Яндекс.Метрика

Двигаем блоки скриптами

Двигаем блоки скриптами

Когда появляется задача по перемещению блоков на html страничке, первое, сто сразу приходит в голову – это трезвая мысль о том, что нужно  использовать готовые плагины. К примеру, jQuery Sortable. Решение достаточно комфортное, от Вас требуется только взять неподъёмную компьютерную мышь и перетащить объект с её помошью.

Но не всё так просто. Если размеры блоков, которые необходимо перемещать внушительные (к примеру, более половины высоты окна браузера), то воспользоваться такими плагинами становится не комфортно.

В таковой ситуации, лучше добавить к каждому блоку ссылки «Вверх» и «Вниз» при помощи которых и будет производиться перемещение блоков. Вот об этом мы сейчас и поговорим.

Разметка страницы

Чтоб сделать блоки довольно большенными можно разместить в них рисунки, поточнее в этом случае любая картина представляет собой отдельный блок.

Перемещение блоков при помощи JS

Разметка максимально обычная. На страничке находятся три рисунки и подключены два JS файла (библиотека jQuery и наш скрипт main.js, с кодом для перемещения блоков).

Здесь не будут использоваться ссылки «Вверх», «Вниз». Перемещение блоков производится при помощи JavaScript и если у пользователя отключена поддержка JS, то и ссылки видеть ему не надо.

Посмотрим, каким образом осуществляется перемещение блоков

Скрипт main.js.

$(function() {
  var images = $('img');
  images.wrap(' ');
  $('Вниз').insertAfter(images);
  $('Вверх').insertAfter(images);
  $('.up').click(function() {
    var currentImgBlock = $(this).parent();
    var prevImgBlock = currentImgBlock.prev();
    swap(currentImgBlock, prevImgBlock);
    return false;
  });
  $('.down').click(function() {
    var currentImgBlock = $(this).parent();
    var nextImgBlock = currentImgBlock.next();
    swap(nextImgBlock, currentImgBlock);
    return false;
  });
});

function swap(a, b) {
  if (a.size() > 0 && b.size() > 0) {
    a.insertBefore(b);
  }
}

Сначала, нужно добавить ссылки. И, чтоб было удобнее делать перемещение, вокруг каждого изображения сделаем div и ссылки будем добавлять в него. Все эти операции производятся при помощи нескольких строк кода.

Далее назначаем обработчики для ссылок «Вверх» и «Вниз».

Код этих обработчиков фактически схож, кроме того, что при клике по ссылке «Вверх» мы должны получить текущий блок (в каком находится ссылка) и предшествующий, а при клике по ссылке «Вниз» - текущий и последующий.

После чего, передаём эти блоки функции swap, которая и делает их перемещение. Порядок в каком передаются блоки важен. Функция употребляет способ insertBefore, потому первым нужно передавать блок, который должен оказаться выше.

Наверняка, имеет смысл при клике по ссылке запускать какую-нибудь анимацию, чтоб было видно направление перемещения, но это совершенно другая история...



Безопасность

В этой статье приводятся методы борьбы с вирусами. Опишем типовую ситуацию, которая знакома многим пользователям ПК: установлен новый антивирус, раз в день обновляются базы, все подозрительные файлы сразу удаляются. В один ясный, солнечный день вы приходите к другу и чтобы показать новые фотки, подключаете свою флешку к его компу. Но антивирус начинает вам говорить, сколько вирусов он отыскал на вашей флешке...

Читать далее