—»     —»   Малоизвестное искусство «Drag and Drop»: Как хватать и перетаскивать объекты?
  Раздел: Руководства   Комментариев: 2  

Малоизвестное искусство «Drag and Drop»: Как хватать и перетаскивать объекты?

Совсем недавно веб-сайты не могли похвастаться такой функцией, но сегодня каждый из нас может хватать различные объекты или блоки на странице, и перетаскивать их, расставлять так, как им хочется. Если вы знакомы с админ-панелью движка WordPress, например, то вам наверняка известно, насколько просто установить нужный виджет на страницу. Данный метод значительно упрощает задачу, более того, все становится интуитивно понятным. В данной статье мы научимся создавать подобную систему при помощи jQuery. Заинтригованы? Тогда читайте до конца!

Малоизвестное искусство «Drag and Drop»: Как хватать и перетаскивать объекты?

Пользовательские интерфейсы jQuery: ошеломительный неиссякаемый источник

Пользовательские интерфейсы (User Interfaces – UI) – это коллекция цельных расширений, которые помогают решить наиболее постоянные проблемы. Например, мы можем (посредством строчки кода) установить элемент с возможностью выбора даты (небольшие такие календарики, которые появляются на формах для выбора текущей или нужной даты), причем, достаточно насыщенные функциями и опциями настройки.

Сегодня мы собираемся подробно ознакомиться с такими методами, как draggable() и droppable():

Перед тем, как мы начнем, посмотрите на страницу с примером. Как видно, страница состоит из 5 элементов:

* Контейнер (с правой стороны), который представляет собой область, в которую мы будем перетаскивать объекты.
* Объекты, которые нельзя перетащить.
* Объекты, которые мы без труда можем перетащить в контейнер.
* Перетаскиваемый объект (только по горизонтали), область перемещения которого ограничена.
* Перетаскиваемый объект, который тускнеет при перетаскивании, чья область перемещения ограничена, и который остается приуроченным к контейнеру. Как вы, возможно, заметили, область перемещения предыдущего объекта ограничена, но позже его можно будет переместить даже за пределы контейнера.

То, что вы только увидели – это то, что мы сейчас будем делать вместе. Как и всегда, начнем с разработки кода HTML.

Подготовка страницы

<!DOCTYPE  HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html;  charset=iso-8859-1">
    <script  type="text/javascript">
        $(document).ready(function(){
            // here we are going to write the jQuery code
        });
    </script>
</head>
<body>

</body>
</html>

Теперь давайте внесем в тело документа 4 элемента по левой стороне, и справа создадим область для перетаскивания.

<div  id="container">
    <div id="left_block">
        <div class="un_draggable box">
            <p>UN DRAGGABLE</p>
        </div>
        <div  class="draggable box">
            <p>DRAGGABLE</p>
        </div>
        <div  class="draggable_droppable droppable box">
            <p>DRAGGABLE AND DROPPABLE</p>
        </div>
        <div  class="non_reversible droppable box">
            <p>DRAGGABLE DROPPABLE AND NON REVERSIBLE</p>
        </div>
    </div>
    <div id="right_block">
    </div>
</div>

Как вы видите, мы установили все 4 элемента внутрь элемента #left_block. Пожалуйста, учтите классы, примененные к каждому элементу. Класс box определяет соотношение, а другие служат для определения параметров (ниже это будет показано) перетаскивания.

Теперь давайте впишем код CSS в файл screen.css

#container{
    margin: 0 auto;
    width: 960px;
}

#left_block{
    float: left;
}

#right_block{
    float: right;
    width:300px;
    height: 300px;
    border: 10px solid  gray;
}

.box{
    background-color: #00AAFF;
    width:  200px;
    padding: 15px;
    text-align: center;
    margin-bottom:  10px;
}

.hover{
    background-color: #FFFFD4;
}

Кроме центрирования содержимого внутри контейнера, мы также разместим элементы и зададим им минимальные параметры стилизации.

Позже мы увидим, что определяет класс hover.

В шапке документа нам нужно вызвать jQuery и расширения, которые представляют собой пользовательские интерфейсы, содержащиеся в файле jquery-ui-1.7.2.custom.min.js.

Вдобавок мы внесем ранее созданный документ каскадных таблиц стилей - screen.css.

<link  href="screen.css" rel="stylesheet" type="text/css" />
<script  type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script  type="text/javascript"  src="js/jquery-ui-1.7.2.custom.min.js"></script>

Давайте посмотрим на документ, который должен выглядеть примерно так.

<!DOCTYPE  HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="content-type" content="text/html;  charset=iso-8859-1">
    <link href="screen.css"  rel="stylesheet" type="text/css" />
    <script type="text/javascript"  src="js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript"  src="js/jquery-ui-1.7.2.custom.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
        });
    </script>
</head>

<body>
<div  id="container">
    <div id="left_block">
        <div class="un_draggable box">
            <p>UN DRAGGABLE</p>
        </div>
        <div class="draggable box">
            <p>draggable</p>
        </div>
        <div class="draggable_droppable draggable box">
            <p>DRAGGABLE AND DROPPABLE</p>
        </div>
        <div class="non_reversible draggable box">
            <p>DRAGGABLE DROPPABLE AND NON REVERSIBLE</p>
        </div>
    </div>
    <div id="right_block">
    </div>
</div>
</body>
</html>

На данном этапе страница должна выглядеть как в этом примере.

Итак, мы закончили с приготовлениями, давайте перейдем к этапу реализации кода для активации функции перетаскивания.

Как создать элемент «droppable»

Первое, что нужно сделать, это создать блок по правую сторону с областью, на которую можно перетаскивать объект посредством метода droppable().

Весь код блока, который мы сейчас внесем, написан внутри основной функции.

$("#right_block").droppable({
    accept: '.droppable',
    hoverClass: 'hover',
    tolerance: 'fit',
    drop: function(event, ui){
        ui.draggable.find('p').html('dropped!');
    }
});

Теперь давайте разберемся в значении кода:

* в первой строке мы генерируем элемент с Id right_block droppable.
* после этого мы вносим несколько параметров первого элемента, который нужно принять. В нашем случае, значение этого элемента .droppable, что означает возможность перетаскивания отдельных элементов посредством класса droppable.
* второй параметр – hoverClass. Он определяет класс CSS, который нужно принять, если перетаскиваемый элемент обнаружен в пределах области. В этом случае класс при наведении курсора мыши определен достаточно точно – он изменяет цвет фона. Это даёт нам понять, что элемент находится в зоне, доступной к перетаскиванию. Простой индикатор, который повышает удобство использования.
* Третий параметр отвечает за условия, в которых элемент должен расцениваться, будучи в области для перетаскивания. У нас есть 4 возможных варианта:
• Fit: когда весь элемент находится внутри области для перемещения
• Pointer: когда курсор мыши находится в области для перемещения
• Touch: когда перетаскиваемый элемент заходит на границы области для перемещения
• Intersect: когда хотя бы половина элемента находится внутри области для перемещения;
* И наконец, значениями параметра drop, мы можем определить функцию, которая должна быть выполнена в момент, когда перетаскиваемый элемент остается в области. В этой функции параметр, который мы определили посредством UI, станет объектом, который позволит нам управлять и иметь доступ к перемешенному элементу, или к которому мы как минимум можем обратиться посредством ui.draggable. Мы просто ограничиваем самих себя в замещении скрипта, содержащегося в элементе.

ui.draggable.find('p').html('dropped!');

Строка кода, отображенная выше: в только что перемещенном элементе найдите тэг «p» и замените содержимое этого тэга скриптом «dropped!».

Как создать элементы «draggable»

Для того чтобы сгенерировать объект draggable, нам не нужно делать ничего, кроме применения метода draggable(), который мы только что обсуждали. В этот раз мы начнем с применения метода draggable() к элементу с классом «draggable» (второй элемент):

$(".draggable").draggable();

Если вы пробуете воспользоваться скриптом, то вы заметите, что этот элемент стал перетаскиваемым (или draggable), и теперь вы можете расположить его где угодно. Но ничего не происходит, если вы переместите его на область, которую мы создали для перемещения объектов. Почему так происходит?

Мы установили, что только элементы с классом droppable могут быть перемещены и зафиксированы в этой области.

Как создать draggable-объект с перемещением, ограниченным одной линией?

Давайте рассмотрим также и третий элемент.

$(".draggable_droppable").draggable({
    axis: 'x'
});

Опять же нужно создать объект с параметром draggable, но прибавить к нему параметр перемещения по оси Х. Это означает, что данный элемент может быть перемешен только в горизонтальном направлении. Нам не нужно добавлять этот параметр, мы сделали это сейчас только ради того, чтобы показать вам, насколько просто это делается.

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

Тем не менее, в данном случае, если вы попробуете перетащить элемент за пределы этой области, то на удивление данная операция может быть выполнена.

Но что делать, если нам надо, чтобы элемент был привязан к определенному контейнеру?

Как перетащить элемент и зафиксировать его в контейнере после того, как кнопка будет отпущена?

Нам нужно добавить данный параметр последнему элементу:

$(".non_reversible").draggable({
    opacity: 0.5,
    revert: 'invalid'
});

Мы установили параметр уровня прозрачности на 0.5. Это означает, что в момент перемещения объект становится тусклым. Даже в этом случае данный параметр используется для зрительного опыта.

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

Вот законченная функция:

$(document).ready(function(){
    $(".draggable").draggable();
    $(".draggable_droppable").draggable({
        axis:  'x'
    });

    $(".non_reversible").draggable({
        opacity: 0.5,
        revert: 'invalid'
     });

    $("#right_block").droppable({
        accept:  '.droppable',
        hoverClass: 'hover',
        tolerance: 'fit',
        drop: function(event, ui){
            ui.draggable.find('p').html('dropped!');
        }
    });
});

В заключение

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

С другой стороны, основным приложением для данной техники является корзина (shopping cart) интернет-магазинов. В нем вы можете увидеть наглядный пример применения данной технологии.

Используете ли вы данный метод в своих проектах? Есть ли у вас реальные примеры применения данной технологии? Поделитесь с нами и нашими читателями в комментариях!
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Ключевые тэги: jQuery
Опубликовал Mysterious Master   Прочитано (раз): 12780   |   Оставлено комментариев: 2
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 28 апреля 2011 @ 08:01
Написал: Alex — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
что то не работает, может быть из за jquery-1.3.2.min.js и jquery-ui-1.7.2.custom.min.js файлов ? Если да то подскажить что делать
Комментарий #2: 10 февраля 2014 @ 16:02
Написал: Андрей — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Здравствуйте! Уважаемый автор данной статьи, пожалуйста не могли бы Вы пожалуйста скинуть файлы исходники о которых описывается в этой статье на мою почту?
Спасибо большое!
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Национальная денежная единица России
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Октябрь 2019    »
ПнВтСрЧтПтСбВс
 123456
78910111213
14151617181920
21222324252627
28293031