Главная > Руководства > Интерфейс перетаскивания на jQuery UI Sortable

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


10 апреля 2013, 14:10. Разместил: Design FactoRy
Сегодня мы хотим показать вам принцип работы с 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;
}

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

Демо | Скачать исходный код
Внимание! У вас нет прав для просмотра скрытого текста.

Вернуться назад