Параметры
appendTo
По умолчанию: "parent"
Определяет, куда будет добавлен помощник, который перемещается вместе с мышкой во время перетаскивания (например, для решения проблем с перекрытием/zIndex).
Поддерживаются несколько типов: - jQuery: Объект jQuery, содержащий элемент, в который необходимо добавить помощника.
- Элемент: Элемент, в который необходимо добавить помощника.
- Селектор: Селектор, определяющий элемент, в который нужно добавить помощника.
- Строка: Строка
"parent" приведет к тому, что помощник станет соседним элементом сортируемого элемента.
Примеры кода:Инициализируйте сортируемый элемент с указанным параметром appendTo:
$( ".selector" ).sortable({
appendTo: document.body
}); Получите или установите параметр appendTo, после инициализации:
// Getter
var appendTo = $( ".selector" ).sortable( "option", "appendTo" );
// Setter
$( ".selector" ).sortable( "option", "appendTo", document.body );
axis
По умолчанию: false
Если определено, элементы можно перетаскивать только по горизонтали или вертикали. Возможные значения: "x", "y".
Примеры кода:Инициализируйте сортируемый элемент с указанным параметром axis:
$( ".selector" ).sortable({
axis: "x"
}); Получите или установите параметр axis, после инициализации:
// Getter
var axis = $( ".selector" ).sortable( "option", "axis" );
// Setter
$( ".selector" ).sortable( "option", "axis", "x" );
cancel
По умолчанию: "input,textarea,button,select,option"
Препятствует сортировке, если вы начинаете с элементов, соответствующих селектору.
Примеры кода:Инициализируйте сортируемый элемент с указанным параметром cancel:
$( ".selector" ).sortable({
cancel: "a,button"
}); Получите или установите параметр cancel, после инициализации:
// Getter
var cancel = $( ".selector" ).sortable( "option", "cancel" );
// Setter
$( ".selector" ).sortable( "option", "cancel", "a,button" );
classes
По умолчанию: {}
Укажите дополнительные классы для добавления к элементам виджета. Любые классы, указанные в разделе Стиль, могут использоваться в качестве ключей для переопределения их значения. Чтобы узнать больше об этом параметре, ознакомьтесь со статьей по параметру classes.
Примеры кода: Инициализируйте сортируемый элемент с указанным параметром classes, изменив тему для класса ui-sortable:
$( ".selector" ).sortable({
classes: {
"ui-sortable": "highlight"
}
}); Получите или установите свойство параметра classes, после инициализации, здесь читается и изменяется тема для класса ui-sortable:
// Getter
var themeClass = $( ".selector" ).sortable( "option", "classes.ui-sortable" );
// Setter
$( ".selector" ).sortable( "option", "classes.ui-sortable", "highlight" );
connectWith
По умолчанию: false
Селектор других сортируемых элементов, к которым должны быть подключены элементы из этого списка. Это односторонние отношения; если вы хотите, чтобы элементы подключались в обоих направлениях, параметр connectWith должен быть установлен на обоих сортируемых элементах.
Примеры кода:Инициализируйте сортируемый элемент с указанным параметром connectWith:
$( ".selector" ).sortable({
connectWith: "#shopping-cart"
}); Получите или установите параметр connectWith, после инициализации:
// Getter
var connectWith = $( ".selector" ).sortable( "option", "connectWith" );
// Setter
$( ".selector" ).sortable( "option", "connectWith", "#shopping-cart" );
containment
По умолчанию: false
Определяет ограничивающую область, в которой сортируемые элементы ограничены во время перетаскивания.
Примечание: Элемент, указанный для ограничения, должен иметь вычисленный размер ширины и высоты (хотя он не обязательно должен быть явным). Например, если у вас есть float: left сортируемые дочерние элементы и вы указываете containment: "parent", убедитесь, что у сортируемого/родительского контейнера также есть float: left, иначе будет height: 0, что приведет к неопределенному поведению.
Поддерживаются несколько типов: - Элемент: Элемент, который нужно использовать в качестве контейнера.
- Селектор: Селектор, указывающий элемент, который нужно использовать в качестве контейнера.
- Строка: Строка, определяющая элемент, который нужно использовать в качестве контейнера. Возможные значения:
"parent", "document", "window".
Примеры кода:Инициализируйте сортируемый элемент с указанным параметром containment:
$( ".selector" ).sortable({
containment: "parent"
}); Получите или установите параметр containment, после инициализации:
// Getter
var containment = $( ".selector" ).sortable( "option", "containment" );
// Setter
$( ".selector" ).sortable( "option", "containment", "parent" );
cursor
По умолчанию: "auto"
Определяет курсор, который отображается во время сортировки.
Примеры кода:Инициализируйте сортируемый элемент с указанным параметром cursor:
$( ".selector" ).sortable({
cursor: "move"
}); Получите или установите параметр cursor, после инициализации:
// Getter
var cursor = $( ".selector" ).sortable( "option", "cursor" );
// Setter
$( ".selector" ).sortable( "option", "cursor", "move" );
cursorAt
По умолчанию: false
Перемещает сортируемый элемент или помощника, чтобы курсор всегда отображался с той же позиции. Координаты могут быть заданы как хеш с использованием комбинации одного или двух ключей: { top, left, right, bottom }.
Примеры кода:Инициализируйте сортируемый элемент с указанным параметром cursorAt:
$( ".selector" ).sortable({
cursorAt: { left: 5 }
}); Получите или установите параметр cursorAt, после инициализации:
// Getter
var cursorAt = $( ".selector" ).sortable( "option", "cursorAt" );
// Setter
$( ".selector" ).sortable( "option", "cursorAt", { left: 5 } ); delay
По умолчанию: 0
Время в миллисекундах, определяющее, когда должна начаться сортировка. Добавление задержки помогает предотвратить нежелательные перетаскивания при нажатии на элемент. (версия устаревшая: 1.12)
Примеры кода:Инициализируйте сортируемый элемент с указанным параметром delay:
$( ".selector" ).sortable({
delay: 150
}); Получите или установите параметр delay, после инициализации:
// Getter
var delay = $( ".selector" ).sortable( "option", "delay" );
// Setter
$( ".selector" ).sortable( "option", "delay", 150 );
disabled
По умолчанию: false
Отключает сортировку, если установлено в true.
Примеры кода:Инициализируйте сортируемый элемент с указанным параметром disabled:
$( ".selector" ).sortable({
disabled: true
}); Получите или установите параметр disabled, после инициализации:
// Getter
var disabled = $( ".selector" ).sortable( "option", "disabled" );
// Setter
$( ".selector" ).sortable( "option", "disabled", true );
distance
По умолчанию: 1
Допуск в пикселях для начала сортировки. Если задано, сортировка не начнется, пока мышь не будет перетянута за пределы расстояния. Может использоваться для разрешения щелчков по элементам в пределах обработчика. (версия устаревшая: 1.12)
Примеры кода:Инициализируйте сортируемый элемент с указанным параметром distance:
$( ".selector" ).sortable({
distance: 5
}); Получите или установите параметр distance, после инициализации:
// Getter
var distance = $( ".selector" ).sortable( "option", "distance" );
// Setter
$( ".selector" ).sortable( "option", "distance", 5 );
dropOnEmpty
По умолчанию: true
Если
false, элементы из этого сортируемого элемента не могут быть помещены в пустой сортируемый элемент соединения (см. параметр
connectWith).
Инициализируйте сортируемый элемент с указанным параметром dropOnEmpty:
$( ".selector" ).sortable({
dropOnEmpty: false
}); Получите или установите параметр dropOnEmpty, после инициализации:
// Getter
var dropOnEmpty = $( ".selector" ).sortable( "option", "dropOnEmpty" );
// Setter
$( ".selector" ).sortable( "option", "dropOnEmpty", false );
forceHelperSize
По умолчанию: false
Если true, принудительно задает размер помощника.
Примеры кода:Инициализируйте сортируемый элемент с указанным параметром forceHelperSize:
$( ".selector" ).sortable({
forceHelperSize: true
}); Получите или установите параметр forceHelperSize, после инициализации:
// Getter
var forceHelperSize = $( ".selector" ).sortable( "option", "forceHelperSize" );
// Setter
$( ".selector" ).sortable( "option", "forceHelperSize", true );
forcePlaceholderSize
По умолчанию: false
Если true, принудительно задаёт размер placeholder.
Примеры кода:Инициализируйте сортируемый элемент с указанным параметром forcePlaceholderSize:
$( ".selector" ).sortable({
forcePlaceholderSize: true
}); Получите или установите параметр forcePlaceholderSize, после инициализации:
// Getter
var forcePlaceholderSize = $( ".selector" ).sortable( "option", "forcePlaceholderSize" );
// Setter
$( ".selector" ).sortable( "option", "forcePlaceholderSize", true );
