—»     —»   Интерфейс перетаскивания на jQuery UI Sortable
  Раздел: Руководства   Нет комментариев  

Интерфейс перетаскивания на jQuery UI Sortable



Сегодня мы хотим показать вам принцип работы с jQuery UI Sortable. Этот плагин позволит вам группировать DOM для дальнейшей сортировки, что означает, что у вас будет возможность перемещать объект с одной позиции на другую. Таким должен быть наш результат.

Интерфейс перетаскивания на jQuery UI Sortable

Если вы готовы, то давайте приступать.

* Демо

Этап 1: Подготовка необходимых файлов

Перед тем, как начать работу над кодом, нам нужно подготовить несколько необходимых файлов, включая jQuery, библиотеку jQuery UI, и FontAwesome, чтобы у нас была возможность добавить иконку, которая нам понадобится позже.

Что касается jQuery и jQuery UI, то их не обязательно размещать у себя на сервере – лучше сослаться на них в CDN следующим образом:

<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

Поместите эти скрипты в 'head' или после закрывающего тега body, чтобы это не сильно влияло на производительность.

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

<link rel="stylesheet" href="style.css" />

Следующий этап опционален, поэтому вы можете его не делать, если вам не хочется. Но мы предпочитаем все-таки нормализировать все стандартные DOM-стили при помощи noremalize.css, либо вы также можете воспользоваться css-сбросом от Эрика Мейера.

Поместите эту строку кода в головную часть вашего документа, перед style.css, который мы создали ранее.

<link rel="stylesheet" href="http://necolas.github.com/normalize.css/2.0.1/normalize.css">

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

<link rel="stylesheet" href="http://necolas.github.com/normalize.css/2.0.1/normalize.css">
<link rel="stylesheet" href="style.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>

Этап 2: HTML-структура

HTML-структура jQuery UI Sortable довольно гибкая. Мы можем использовать 'div' или 'dt', так как мы оборачиваем их в родительский элемент с указанными атрибутом id.

И в нашем случае, мы воспользуемся тегом 'li'. Поместите весь HTML-код, отображенный ниже, в тег 'body'.

<ul id="sortable">
<li class="ui-state-default">Item 1</li>
<li class="ui-state-default">Item 2</li>
<li class="ui-state-default">Item 3</li>
<li class="ui-state-default">Item 4</li>
<li class="ui-state-default">Item 5</li>
<li class="ui-state-default">Item 6</li>
<li class="ui-state-default">Item 7</li>
</ul>

Этап 3: Активируем UI Sortable

Атрибут id, примененный к нашему родительскому элементу, как показано в вышеприведенном отрывке кода, очень важен. Этот id используется для активации DOM-элемента в jQuery UI. Чтобы сделать это, поместите следующий отрывок кода внутрь головного раздела нашего документа, 'head', сразу после остальных скриптов.

<script>
$(function() {
$( "#sortable" ).sortable({
placeholder: "ui-sortable-placeholder"
});
});
</script>

На данный момент UI Sortable уже должен работать. Вы можете кликнуть, задержать кнопку, и перетащить элемент в самый низ, или наоборот. Тем не менее, внешний вид ничего собой не представляет на данный момент.

Этап 4: Определяем новые шрифты

Как мы уже отметили выше, нам нужно будет использовать FontAwesome, чтобы иметь возможность поместить в оформление иконку. Отсюда скачайте архив, распакуйте его, и поместите все шрифты в папку под названием font. А затем поместите эти строки кода внутрь документа style.css, чтобы определить новый шрифт в нашем веб-документе (FontAwesome).

@font-face {  
font-family: "FontAwesome";
src: url('font/fontawesome-webfont.eot');
src: url('font/fontawesome-webfont.eot?#iefix') format('eot'),
url('font/fontawesome-webfont.woff') format('woff'),
url('font/fontawesome-webfont.ttf') format('truetype'),
url('font/fontawesome-webfont.svg#FontAwesome') format('svg');
font-weight: normal;
font-style: normal;
}

Этап 5: Оформляем UI Sortable

В данном этапе мы начинаем оформление UI Sortable, добавив цвет фона в тег body:

body {
background-color: #333;
}

Затем мы указываем фиксированную ширину UI Sortable, располагаем элемент по центру окна браузера, а также добавляем небольшую хитрость:

.ui-sortable {
width: 350px;
margin: 50px auto;
background-color: #ccc;
-webkit-box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .1);
box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .1);
list-style-type: none;
padding: 0;
}

На данном этапе, UI Sortable будет выглядеть, как показано на скриншоте ниже.

Интерфейс перетаскивания на jQuery UI Sortable

Стандартное положение интерфейса

Далее мы добавляем исходные стили для элементов 'li'. Эти стили содержат в себе градационные цвета фона, длину элементов, границы, стили текста, и исключают границу у первого и последнего дочерних элементов 'li'.

.ui-sortable li.ui-state-default { 
margin: 0;
height: 45px;
line-height: 48px;
font-size: 1.4em;
color: #fff;
outline: 0;
padding: 0;
margin: 0;
text-indent: 15px;
background: rgb(78,82,91);
background: -moz-linear-gradient(top, rgb(78,82,91) 0%, rgb(57,61,68) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(78,82,91)), color-stop(100%,rgb(57,61,68)));
background: -webkit-linear-gradient(top, rgb(78,82,91) 0%,rgb(57,61,68) 100%);
background: -o-linear-gradient(top, rgb(78,82,91) 0%,rgb(57,61,68) 100%);
background: -ms-linear-gradient(top, rgb(78,82,91) 0%,rgb(57,61,68) 100%);
background: linear-gradient(to bottom, rgb(78,82,91) 0%,rgb(57,61,68) 100%);
border-top: 1px solid rgba(255,255,255,.2);
border-bottom: 1px solid rgba(0,0,0,.5);
text-shadow: -1px -1px 0px rgba(0,0,0,.5);
font-size: 1.1em;
position: relative;
cursor: pointer;
}
.ui-sortable li.ui-state-default:first-child {
border-top: 0;
}
.ui-sortable li.ui-state-default:last-child {
border-bottom: 0;
}

После того, как мы добавили эти цвета, наш интерфейс уже выглядит гораздо лучше. Смотрите на скриншот ниже.

Интерфейс перетаскивания на jQuery UI Sortable

Placeholder

Нет-нет, это не атрибут Placeholder из HTML5. Это так jQuery UI называет пустое пространство, куда можно поместить DOM-элемент. В данном случае, мы добавим область с серым фоном и пунктирной границей.

.ui-sortable-placeholder {
border: 3px dashed #aaa;
height: 45px;
width: 344px;
background: #ccc;
}

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

Интерфейс перетаскивания на jQuery UI Sortable

Иконка «movable»

Наконец, в 'li' мы добавляем иконку, чтобы показать, что здесь что-то можно перемещать. Чтобы сделать это, мы добавим эту иконку при помощи псевдо-элемента :after, и зададим шрифт FontAwesome.

.ui-sortable li.ui-state-default:after {
content: "\f0c9";
display: inline-block;
font-family: "FontAwesome";
position: absolute;
right: 18px;
top: 9px;
text-align: center;
line-height: 35px;
color: rgba(255,255,255,.2);
text-shadow: 0px 0px 0px rgba(0,0,0,0);
cursor: move;
}

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

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

Ключевые тэги: jQuery
Опубликовал Design FactoRy   Прочитано (раз): 6720   |   Нет комментариев
Автор перевода — CoolWebmasters.Com ©   |   Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

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

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


Популярные публикации


















Свежие шаблоны сайтов каждый день
С миру по нитке
«    Сентябрь 2017    »
ПнВтСрЧтПтСбВс
 123
45678910
11121314151617
18192021222324
252627282930