Опубликовано admin - вт, 05/01/2018 - 23:02
sortable(options) → jQuery

Плагин jQuery UI Sortable позволяет сортировать выбранные элементы с помощью притаскивания их курсором мыши.
Все функции возвращают два аргумента: исходное событие браузера и обработанный ui объект, ниже указано их описание (если в качестве второго аргумента указано 'ui'):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link href="http://test-drupal.ru/themes/slyweb/css/jquery-ui-1.7.2.custom.css" 
rel="stylesheet" type="text/css"/>
<script src="http://test-drupal.ru/themes/slyweb/js/jquery-1.3.2.min.js"></script>
<script src="http://test-drupal.ru/themes/slyweb/js/jquery-ui-1.7.2.custom.min.js"></script>  
<script>
  $(document).ready(function(){

$(function() {
		$("#sortable").sortable();
		$("#sortable").disableSelection();
		});

  });
</script>

</head>
<body class="iframe">


<div class="demo">

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

</div><!-- End demo -->

<div style="display: none;" class="demo-description">

<p>
	Enable a group of DOM elements to be sortable. Click on and drag an
	element to a new spot within the list, and the other items will adjust to
	fit. By default, sortable items share <code>draggable</code> properties.
</p>

</div><!-- End demo-description -->


</body>
</html>


<style>

#sortable 
{ list-style-type: none; margin: 0; padding: 0; width: 60%; }
#sortable li 
{ margin: 0 3px 3px 3px; padding: 0.4em; 
padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#sortable li span 
{ position: absolute; margin-left: -1.3em; }

</style>

ui.helper
ui.position
ui.offset
ui.item
ui.placeholder
ui.sender

Опция: appendTo


Опция: axis


Опция: cancel


Опция: connectWith


Опция: containment


Опция: cursor


Опция: cursorAt


Опция: delay


Опция: distance


Опция: dropOnEmpty


Опция: forceHelperSize


Опция: forcePlaceholderSize


Опция: grid


Опция: handle


Опция: helper


Опция: items


Опция: opacity


Опция: placeholder


Опция: revert


Опция: scroll


Опция: scrollSensitivity


Опция: scrollSpeed


Опция: tolerance


Опция: zIndex


Событие: start

Событие: sort

Событие: change

Событие: beforeStop

Событие: stop

Событие: update

Событие: receive

Событие: remove

Событие: over

Событие: out

Событие: activate

Событие: deactivate

Метод: destroy

Метод: disable

Метод: enable

Метод: option

Метод: serialize

Метод: toArray

Метод: refresh

Метод: refreshPositions

Метод: cancel

Используемая тема jQuery UI

Плагин jQuery UI Sortable использует jQuery UI CSS структуру для придания стиля, включающую цвета и фоновые текстуры. Мы рекомендуем использовать инструмент ThemeRoller для создания и загрузки тем, которые легко встраиваются и поддерживаются. Если нуждается более глубокий уровень настройки, существует особый виджет классов ссылающийся на ui.draggable.css лист стилей, который может быть модифицирован. Данный класс подчеркнут жирным ниже.

Образец разметки jQuery UI CSS струтктуры классов

<ul class="ui-sortable">
   <li></li>
   <li></li>
   <li></li>
</ul> 
Примечание: Данный образец разметки создан посредством плагина sortable, это не разметка для того чтобы сортировать элементы. Для этого достаточно следующей разметки <ul> <li></li> <li></li> <li></li> </ul>

На разработку сайта! Скидки до 20%!