Техника Drag-n-Drop с использованием jQuery

Методы работы с техникой "перетащи и брось" складывались в течение многих лет. Неудивительно, что с увеличением числа программистов, разрабатывающих плагины с открытым исходным кодом (например, для jQuery) вновь возрождаются старые методы. Библиотека для JavaScript весьма адаптивна и предлагает множество улучшений в нашу эпоху веб технологий.

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

demosourse

 

Подготавливаем контент

Первым делом подготовим небольшой сайт для проекта. В папке проекта нужно создать два каталога с примечательными именами"js" и "css" и пустой файл  index.html. Код будет очень простой, чтобы сложилось четкое представление о работе, и появилась точка для дальнейшего развития.

Ниже приводится код нашего HTML файла. В разделе head мы включаем 3 скрипта. Основной скрипт jQuery будет подгружаться с сервера Google Code. также подключается наш файл стилей style.css, который содержит основные свойства для формирования внешнего вида нашего документа.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Демонстрация техники "Перетащи и брось" | Материалы сайта RUSELLER.COM</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery.dragndrop.js"></script>
    <script type="text/javascript" src="js/fn.js"></script>
    <link type="text/css" rel="stylesheet" href="css/style.css" />
</head>

<body>
<div class="dv1">
    <h2 class="handler">Перетащи меня</h2>
    <div class="content">Да-да. Именно меня.</div>
</div>

<div class="dv2"><div class="gb">
    <h2 class="handler2">Меня тоже можно перетащить</h2>
    <div class="content2">{ zIndex: 200, opacity: .9 }<br /><br /><small><strong>P.S.: меня можно бросить где угодно!</strong></small></div>
</div></div>

</body>
</html>

Внутри раздела body помещены только два блока div, которые содержат оба прямоугольника. Код достаточно простой и понятный. Внутри каждого прямоугольника размещены заголовки с классами handler и handler2. Это важно, так как при перетаскивании каждый прямоугольник ведет себя по-своему.

Google server

 

Устанавливаем CSS

Код HTML очень прост. Если вам понятна основная разметка, то и стили CSS также не будут представлять сложности. В основном определяются поля, отступы и цвета.

body,html { font-family:Calibri, sans-serif; background:#eaf3fb; font-size:12px; height:1000px; line-height:18px; }
p { height:30px; }

Селекторы body,html используются только для демонстрационной страницы. А весь контент размещается в двух перетаскиваемых прямоугольниках.

.dv1 { width:200px; background-color:#eff7ff; border:1px solid #96c2f1; position:absolute; left:100px; top:100px; }
.dv1 h2 { background-color:#b2d3f5; padding:5px; font-family:Georgia, "Times New Roman", Times, serif; font-size:1.0em; text-transform:uppercase; font-weight:bold; color:#3a424a; margin:1px; cursor:move; }
.dv1 div { padding:5px; margin-bottom:10px; }
.dv2 { background-color:#f6ebfb; border:1px solid #a36fde; width:550px; position:absolute; cursor:move; left:400px; top:230px; }
.dv2 h2 { background-color:#eacfe9; letter-spacing:-0.09em; font-size:1.8em; font-weight: bold; padding:15px; margin:1px; color:#241f24; cursor:move; }
.dv2 .content2 { padding:5px; margin-bottom:10px; }

Для обоих классов .dv1 и .dv2 мы используем абсолютное позиционирование. В этом нет необходимости и, вероятно, это не самый лучший способ для позиционирования перетаскиваемых прямоугольников. Однако для нашего примера такое позиционирование имеет смысл, так как при каждом обновлении страницы прямоугольники устанавливаются в определенные места.

Также шрифты и цвета различаются для прямоугольников, чтобы легче было увидеть разницу.

В остальном заголовки и содержание блоков почти идентично. Если вы будете копировать стили в свой проект, поменяйте имена перед запуском. В некоторых случаях логичнее будет использовать ID вместо классов, например при использовании техники "перетащи и брось" для одного определенного блока.

Разбираем JavaScript

Два файла JavaScript содержат весь необходимый для работы код. Опустим детали работы с jQuery, так как это выходит за рамки урока. Обратим внимание на файл  jquery.dragndrop.js.

На строке 22 происходит определение функции Drags.

$.fn.Drags = function(opts) {
    var ps = $.extend({
        zIndex: 20,
        opacity: .7,
        handler: null,
        onMove: function() { },
        onDrop: function() { }
    }, opts);

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

jQuery.extend

Следующая часть кода включает обработчики событий для переменной dragndrop. Оба события drag и drop вызывают функции с передачей параметров события в них. Данные события происходят, когда вы нажимаете кнопку мыши, чтобы перетащить объект, а затем отпускаете ее.

var dragndrop = {
    drag: function(e) {
        var dragData = e.data.dragData;
        dragData.target.css({
            left: dragData.left + e.pageX - dragData.offLeft,
            top: dragData.top + e.pageY - dragData.offTop
        });
        dragData.handler.css({ cursor: 'move' });
        dragData.target.css ({ cursor: 'move' });
        dragData.onMove(e);
    },
    drop: function(e) {
        var dragData = e.data.dragData;
        dragData.target.css(dragData.oldCss); //.css({ 'opacity': '' });
        dragData.handler.css('cursor', dragData.oldCss.cursor);
        dragData.onDrop(e);
        $().unbind('mousemove', dragndrop.drag)
            .unbind('mouseup', dragndrop.drop);
    }
}

Наши функции манипулируют CSS позиционированием каждого объекта. Если изменить абсолютное позиционирование ваших объектов, то это не повлияет на работу кода, так как каждая функция JavaScript изменяет любой стиль, который определен для объекта.

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

 

Функции Drag/Drop

Во втором файле fn.js содержится совсем простой код. Мы дожидаемся полной загрузки документа, после чего вызываем наши функции. Определяются два экземпляра функции Drags, которая разбиралась ранее.

У нас есть два перемещаемых блока с классами .dv1 и .dv2 . Если нужно оставить один перемещаемый блок, то нужно просто удалить вторую часть кода. Добавление еще одного перемещаемого блока также осуществляется просто. Нужно только добавить новую функцию в данном файле.

Первым делом нужно установить опции при вызове функции. Обязательно надо установить имя обработчика. C его помощью мы сообщаем jQuery, какой обработчик использовать при нажатии кнопки мыши в определенной области документа. В качестве имени обработчика может быть класс или атрибут ID.

В нашей первой функции есть два обработчика событий onMove и onDrop. Оба вызывают новые функции,  передаваемые в текущее событие как переменные. Здесь выполняется манипулирование кодом HTML в прямоугольнике для обновления при каждом движении. Это замечательный эффект для демонстрации того, как можно осуществлять управление процессом с помощью простых событий jQuery.

Во второй функции мы используем параметры z-Index и opacity. Можно добавить и другие свойства CSS? но для этого потребуется переработать код JavaScript, чтобы осуществлялась проверка установок. Например, можно передавать другой стиль шрифта или значения для высоты и ширины для перемещаемого прямоугольника – получится очень интересный трюк!

 

Заключение

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

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

Так что изучайте документацию jQuery для использования библиотечных функций.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.onextrapixel.com/2011/02/16/master-drag-and-drop-technique-using-jquery/
Перевел: Сергей Фастунов
Урок создан: 19 Февраля 2011
Просмотров: 58111
Правила перепечатки


5 последних уроков рубрики "jQuery"

или авторизуйтесь, чтобы добавлять комментарии, оценивать уроки и сохранять их в личном кабинете
  • 19 Февраля 2011 16:40
    Bandyy
    Посмотрим
  • 19 Февраля 2011 16:52
    Zedamin
    Посмотрели) Хорошая вещь...
  • 19 Февраля 2011 17:11
    ushim
    не вкурил. в чём разница между двумя блоками? Они перетаскиваются одинаково, за исключением того, что в первом пишется положение блока, это и есть разница?
    • 19 Февраля 2011 17:16
      eko24ive
      просто два разных примера
    • 19 Февраля 2011 18:30
      m_hamlet
      Первый блок можно перетаскивать только с помощью заголовка, где написано "Перетащи меня". Во-втором случае, это не обязательно - можно и с помощью тела.
      • 19 Февраля 2011 18:41
        ushim
        Спасибо :)
        • 19 Февраля 2011 23:17
          m_hamlet
          Пожалуйста :)
      • 26 Апреля 2011 20:59
        mikfake
        Когда во второй блок кидаешь изображение и тянешь от него, то на мозилле 3.6 не очень хорошая штука получается...
  • 19 Февраля 2011 17:17
    eko24ive
    Полный бред.Jquery UI вышел уже очень давно.Вы-бы еще дали функцию hide().
  • 19 Февраля 2011 17:59
    notbot
    Поддерживаю eko24. Баянище, я уже давно изучил.
  • 19 Февраля 2011 18:00
    notbot
    Заметил также, что техники Drop здесь нет вообще.
  • 19 Февраля 2011 18:45
    wakosto
    Что то похожее использовано на сайте uCoz. За урок спасибо
  • 19 Февраля 2011 18:55
    MopuC
    Слишком просто. Если бы урок чуть посложнее, например, сортировка блоков или строк таблицы мышкой - это было бы круто. А так - баян :)
  • 19 Февраля 2011 20:15
    ushim
    Было бы куда полезнее записывать данные в кэш (если такое возможно) и от туда уже брать координаты каждого блока, чтобы при перезагрузке страницы или переходе на другую страницу того же домена, блоки не возвращались в свои исходные точки. Тогда был бы смысл использовать это в построении сайтов.
    • 19 Февраля 2011 21:24
      notbot
      Не в кэш, а в куки. Элементарно.
      • 20 Февраля 2011 10:03
        ushim
        Я в этом не до конца разбираюсь, поэтому поверю на слово
        • 20 Февраля 2011 11:34
          notbot
          Если нужно, то тебе к jQuery cookie plugin.
  • 19 Февраля 2011 20:26
    genixxx
    Кое где пригодится. Но где же drop?
  • 19 Февраля 2011 23:09
    BenLaden
    Во-первых, если есть drag, то есть и drop. Во-вторых, хорош из себя всезнаек строить, ведь на этот сайт и новички заходят... По тексту урока видно, что он рассчитан на новичков.
    • 20 Февраля 2011 11:52
      eko24ive
      Дропа здесь нет , так как он не обрабатывается !
  • 20 Февраля 2011 09:40
    Overlord888
    Еще бы как то убрать выделение текста при ведении, а то когда одну около другой перетаскиваешь текст на ней выделяется. Но я думаю это не проблема... Спасибо за урок!
  • 20 Февраля 2011 09:43
    Руслан Димитриев
    Зачет!
  • 20 Февраля 2011 13:34
    ppaull
    Я использую такой drag&drop: http://demosites.simplecoding.org/jquery_ui_drag_drop/
  • 20 Февраля 2011 15:01
    turin
    http://jqueryui.com/demos/draggable/ и http://jqueryui.com/demos/droppable/
  • 22 Февраля 2011 13:16
    twins
    А как разрешить перетаскивание только по горизонтальной оси? Может для этого есть, что-то другое?
  • 24 Февраля 2011 20:51
    eugeny007
    http://javascript.ru/ui/draganddrop
  • 2 Марта 2011 09:41
    Андрей Хоркин
    спасибо
  • 13 Марта 2011 16:41
    Ygreec
    Еще хорошо бы чтобы запоминалось положение и при следующей загрузке сайта открывался с таким расположением блоков, как определил для себя посетитель. Где-то можно ли прописать такое?
    • 22 Марта 2011 11:40
      mikfake
      Позицию слоя передать можно через JQuery. Сам ищу.
      • 24 Марта 2011 23:16
        Ygreec
        найдете - плюс в Вашу копилку!
        • 31 Марта 2011 11:11
          mikfake
          Манипулятор стилями: .css( propertyName, value )BlockID – ID нашего div блока: Например мы хотим поменять цвет фона на белый. "$("#BlockID").css("background-color","#010101");" Такой принцип можно применять с любым правилом css. Еще у этого манипулятора есть возможность не только менять стили css но и узнать их текущее значение. http://www.linkexchanger.su/2008/58.html ну или еще можно погуглить, там много такого
          • 31 Марта 2011 16:44
            Ygreec
            не знаю, возможно что пример драгдропа на ПХП, где инфа остается на сервере, более подходит... там все четко фиксируется... правда там блоки - это неупорядоченный список, надо подумать, как их превратить в блоки...
^ Наверх ^