jQuery UI API - Sortable Widget

Категория

Взаимодействия

Использование

Описание:Используйте мышь, чтобы изменить порядок элементов в списке или сетке.

Добавлено в версии:1.0

Зависимости:

Примечания:Плагин jQuery UI Sortable делает выбранные элементы сортируемыми с помощью перетаскивания мышью.

Примечания:Чтобы сортировать строки таблицы,tbodyдолжен быть сортируемым, а неtable。

Быстрая навигация

Параметры Методы Events

Параметры Type Описание Значение по умолчанию
appendTo jQuery, Element, Selector или String При перетаскивании: куда должен быть добавлен helper, перемещаемый мышью (например, чтобы устранить проблемы с перекрытием/zIndex).

Поддерживает несколько типов:

  • jQuery: объект jQuery, содержащий элемент, к которому должен быть добавлен helper.
  • Element: элемент, к которому должен быть добавлен helper.
  • Selector: селектор, указывающий, к какому элементу должен добавляться helper.
  • String: String"parent"Приведёт к тому, что helper станет соседним элементом сортируемых элементов.

Примеры кода:

Инициализировать sortable с указаннымappendTooption:

$( ".selector" ).sortable({ appendTo: document.body });
    

После инициализации получите или задайтеappendTooption:

// getter
var appendTo = $( ".selector" ).sortable( "option", "appendTo" );
 
// setter
$( ".selector" ).sortable( "option", "appendTo", document.body );
    
 "parent"
axis String Если определено, элементы можно перетаскивать только горизонтально или вертикально. Возможные значения:"x", "y"。

Примеры кода:

Инициализировать sortable с указаннымaxisoption:

$( ".selector" ).sortable({ axis: "x" });
    

После инициализации получите или задайтеaxisoption:

// getter
var axis = $( ".selector" ).sortable( "option", "axis" );
 
// setter
$( ".selector" ).sortable( "option", "axis", "x" );
    
 false
отмена Селектор Запрещает начало сортировки на элементах, соответствующих селектору.

Примеры кода:

Инициализировать sortable с указаннымcanceloption:

$( ".selector" ).sortable({ cancel: "a,button" });
    

После инициализации получите или задайтеcanceloption:

// getter
var cancel = $( ".selector" ).sortable( "option", "cancel" );
 
// setter
$( ".selector" ).sortable( "option", "cancel", "a,button" );
    
 "input, textarea, button, select, option"
connectWith Селектор Селектор других сортируемых элементов, с которыми должны быть соединены элементы этого списка. Это односторонняя связь, и если вы хотите, чтобы элементы были соединены в обоих направлениях, необходимо установитьconnectWithопцию на обоих сортируемых элементах.

Примеры кода:

Инициализировать sortable с указаннымconnectWithoption:

$( ".selector" ).sortable({ connectWith: "#shopping-cart" });
    

После инициализации получите или задайтеconnectWithoption:

// getter
var connectWith = $( ".selector" ).sortable( "option", "connectWith" );
 
// setter
$( ".selector" ).sortable( "option", "connectWith", "#shopping-cart" );
    
 false
containment Элемент, селектор или строка Определяет границы, в которых сортируемые элементы ограничены при перетаскивании.

Примечание: элемент, указанный для containment, должен иметь вычисленные ширину и высоту (хотя они не обязательно должны быть явно заданы). Например, если у вас естьfloat: leftсортируемые дочерние элементы и указываетеcontainment: "parent", убедитесь, что на сортируемом/родительском контейнере у вас естьfloat: left, иначе у него будетheight: 0, что приведет к неопределенному поведению.

Поддерживает несколько типов:

  • Элемент: элемент, который будет использоваться в качестве контейнера.
  • Selector: Селектор, указывающий элемент, который будет использоваться в качестве контейнера.
  • String: Строка, идентифицирующая элемент, который будет использоваться в качестве контейнера. Возможные значения:"parent"、"document"、"window"。

Примеры кода:

Инициализировать sortable с указаннымcontainmentoption:

$( ".selector" ).sortable({ containment: "parent" });
    

После инициализации получите или задайтеcontainmentoption:

// getter
var containment = $( ".selector" ).sortable( "option", "containment" );
 
// setter
$( ".selector" ).sortable( "option", "containment", "parent" );
    
 false
cursor String Определяет курсор, отображаемый во время сортировки.

Примеры кода:

Инициализировать sortable с указаннымcursoroption:

$( ".selector" ).sortable({ cursor: "move" });
    

После инициализации получите или задайтеcursoroption:

// getter
var cursor = $( ".selector" ).sortable( "option", "cursor" );
 
// setter
$( ".selector" ).sortable( "option", "cursor", "move" );
    
 "auto"
cursorAt Object Перемещает сортируемый элемент или helper так, чтобы курсор всегда выглядел так, будто перетаскивание происходит из одной и той же позиции. Координаты можно задать в виде хэша с одним или двумя ключами:{ top, left, right, bottom }。

Примеры кода:

Инициализировать sortable с указаннымcursorAtoption:

$( ".selector" ).sortable({ cursorAt: { left: 5 } });
    

После инициализации получите или задайтеcursorAtoption:

// getter
var cursorAt = $( ".selector" ).sortable( "option", "cursorAt" );
 
// setter
$( ".selector" ).sortable( "option", "cursorAt", { left: 5 } );
    
 false
delay Integer Время в миллисекундах после mousedown до начала сортировки. Эта опция может предотвратить нежелательное перетаскивание при щелчке по элементу.

Примеры кода:

Инициализировать sortable с указаннымdelayoption:

$( ".selector" ).sortable({ delay: 150 });
    

После инициализации получите или задайтеdelayoption:

// getter
var delay = $( ".selector" ).sortable( "option", "delay" );
 
// setter
$( ".selector" ).sortable( "option", "delay", 150 );
    
 0
disabled Boolean Если установлено значениеtrue, отключает sortable.

Примеры кода:

Инициализировать sortable с указаннымdisabledoption:

$( ".selector" ).sortable({ disabled: true });
    

После инициализации получите или задайтеdisabledoption:

// getter
var disabled = $( ".selector" ).sortable( "option", "disabled" );
 
// setter
$( ".selector" ).sortable( "option", "disabled", true );
    
 false
distance Number Расстояние в пикселях, на которое мышь должна переместиться после mousedown до начала сортировки. Если указано, сортировка начнётся, когда мышь будет перетащена на расстояние, превышающее указанное. Эту опцию можно использовать, чтобы разрешить щелчки по элементам внутри handle.

Примеры кода:

Инициализировать sortable с указаннымdistanceoption:

$( ".selector" ).sortable({ distance: 5 });
    

После инициализации получите или задайтеdistanceoption:

// getter
var distance = $( ".selector" ).sortable( "option", "distance" );
 
// setter
$( ".selector" ).sortable( "option", "distance", 5 );
    
 1
dropOnEmpty Boolean Если установлено значениеfalse, элементы из этого sortable не могут являться пустым связанным sortable (см.connectWithопцией).

Примеры кода:

Инициализировать sortable с указаннымdropOnEmptyoption:

$( ".selector" ).sortable({ dropOnEmpty: false });
    

После инициализации получите или задайтеdropOnEmptyoption:

// getter
var dropOnEmpty = $( ".selector" ).sortable( "option", "dropOnEmpty" );
 
// setter
$( ".selector" ).sortable( "option", "dropOnEmpty", false );
    
 истина
forceHelperSize Boolean Если установлено значениеtrue, принудительно задаёт размер для helper.

Примеры кода:

Инициализировать sortable с указаннымforceHelperSizeoption:

$( ".selector" ).sortable({ forceHelperSize: true });
    

После инициализации получите или задайтеforceHelperSizeoption:

// getter
var forceHelperSize = $( ".selector" ).sortable( "option", "forceHelperSize" );
 
// setter
$( ".selector" ).sortable( "option", "forceHelperSize", true );
    
 false
forcePlaceholderSize Boolean Если установлено значениеtrue, принудительно задаёт размер для placeholder.

Примеры кода:

Инициализировать sortable с указаннымforcePlaceholderSizeoption:

$( ".selector" ).sortable({ forcePlaceholderSize: true });
    

После инициализации получите или задайтеforcePlaceholderSizeoption:

// getter
var forcePlaceholderSize = $( ".selector" ).sortable( "option", "forcePlaceholderSize" );
 
// setter
$( ".selector" ).sortable( "option", "forcePlaceholderSize", true );
    
 false
grid Массив Привязывает сортируемый элемент или helper к сетке с шагом x и y пикселей. Массив должен иметь вид[ x, y ]。

Примеры кода:

Инициализировать sortable с указаннымgridoption:

$( ".selector" ).sortable({ grid: [ 20, 10 ] });
    

После инициализации получите или задайтеgridoption:

// getter
var grid = $( ".selector" ).sortable( "option", "grid" );
 
// setter
$( ".selector" ).sortable( "option", "grid", [ 20, 10 ] );
    
 false
handle Selector или Element Если указано, ограничивает начало сортировки указанным элементом.

Примеры кода:

Инициализировать sortable с указаннымhandleoption:

$( ".selector" ).sortable({ handle: ".handle" });
    

После инициализации получите или задайтеhandleoption:

// getter
var handle = $( ".selector" ).sortable( "option", "handle" );
 
// setter
$( ".selector" ).sortable( "option", "handle", ".handle" );
    
 false
helper String или Function() Позволяет использовать вспомогательный элемент для отображения при перетаскивании.

Поддерживает несколько типов:

  • String: Если установлено в"clone", элемент будет клонирован, и клон будет перетаскиваться.
  • Функция: функция, которая возвращает DOMElement для использования при перетаскивании. Функция получает событие и сортируемый элемент.

Примеры кода:

Инициализировать sortable с указаннымhelperoption:

$( ".selector" ).sortable({ helper: "clone" });
    

После инициализации получите или задайтеhelperoption:

// getter
var helper = $( ".selector" ).sortable( "option", "helper" );
 
// setter
$( ".selector" ).sortable( "option", "helper", "clone" );
    
 "original"
items Селектор Какие элементы внутри данного элемента должны быть сортируемыми.

Примеры кода:

Инициализировать sortable с указаннымitemsoption:

$( ".selector" ).sortable({ items: "> li" });
    

После инициализации получите или задайтеitemsoption:

// getter
var items = $( ".selector" ).sortable( "option", "items" );
 
// setter
$( ".selector" ).sortable( "option", "items", "> li" );
    
 "> *"
opacity Number Прозрачность вспомогательного элемента при сортировке. От0.01в1。

Примеры кода:

Инициализировать sortable с указаннымopacityoption:

$( ".selector" ).sortable({ opacity: 0.5 });
    

После инициализации получите или задайтеopacityoption:

// getter
var opacity = $( ".selector" ).sortable( "option", "opacity" );
 
// setter
$( ".selector" ).sortable( "option", "opacity", 0.5 );
    
 false
placeholder String Имя класса для применения, иначе — белый пустой.

Пример кода:

Инициализировать с указаннымиplaceholderопции для сортируемого:

$( ".selector" ).sortable({ placeholder: "sortable-placeholder" });
    

После инициализации получите или задайтеplaceholderoption:

// getter
var placeholder = $( ".selector" ).sortable( "option", "placeholder" );
 
// setter
$( ".selector" ).sortable( "option", "placeholder", "sortable-placeholder" );
    
 false
revert Boolean или Number Используют ли сортируемые элементы плавную анимацию для возврата на новую позицию.

Поддерживает несколько типов:

  • Логическое значениеЕсли установлено вtrue, элемент будет использовать анимацию с длительностью по умолчанию.
  • Число: Длительность анимации в миллисекундах.

Пример кода:

Инициализировать с указаннымиrevertопции для сортируемого:

$( ".selector" ).sortable({ revert: true });
    

После инициализации получите или задайтеrevertoption:

// getter
var revert = $( ".selector" ).sortable( "option", "revert" );
 
// setter
$( ".selector" ).sortable( "option", "revert", true );
    
 false
scroll Boolean Если установлено значениеtrue, страница будет прокручиваться при достижении края.

Пример кода:

Инициализировать с указаннымиscrollопции для сортируемого:

$( ".selector" ).sortable({ scroll: false });
    

После инициализации получите или задайтеscrolloption:

// getter
var scroll = $( ".selector" ).sortable( "option", "scroll" );
 
// setter
$( ".selector" ).sortable( "option", "scroll", false );
    
 истина
scrollSensitivity Number Определяет, на каком расстоянии от края должна находиться мышь, чтобы началась прокрутка.

Пример кода:

Инициализировать с указаннымиscrollSensitivityопции для сортируемого:

$( ".selector" ).sortable({ scrollSensitivity: 10 });
    

После инициализации получите или задайтеscrollSensitivityoption:

// getter
var scrollSensitivity = $( ".selector" ).sortable( "option", "scrollSensitivity" );
 
// setter
$( ".selector" ).sortable( "option", "scrollSensitivity", 10 );
    
 20
scrollSpeed Number Когда указатель мыши находится в пределахscrollSensitivityрасстояния, скорость, с которой прокручивается окно. Еслиscrollопция равнаfalseто оно игнорируется.

Пример кода:

Инициализировать с указаннымиscrollSpeedопции для сортируемого:

$( ".selector" ).sortable({ scrollSpeed: 40 });
    

После инициализации получите или задайтеscrollSpeedoption:

// getter
var scrollSpeed = $( ".selector" ).sortable( "option", "scrollSpeed" );
 
// setter
$( ".selector" ).sortable( "option", "scrollSpeed", 40 );
    
 20
tolerance String Задаёт режим, используемый для проверки того, перекрывает ли перемещаемый элемент другой элемент. Возможные значения:
  • "intersect": элемент перекрывает другой элемент как минимум на 50%.
  • "pointer": указатель мыши перекрывает другой элемент.

Пример кода:

Инициализировать с указаннымиtoleranceопции для сортируемого:

$( ".selector" ).sortable({ tolerance: "pointer" });
    

После инициализации получите или задайтеtoleranceoption:

// getter
var tolerance = $( ".selector" ).sortable( "option", "tolerance" );
 
// setter
$( ".selector" ).sortable( "option", "tolerance", "pointer" );
    
 "intersect"
zIndex Integer Z-index элемента/вспомогательного элемента во время сортировки.

Пример кода:

Инициализировать с указаннымиzIndexопции для сортируемого:

$( ".selector" ).sortable({ zIndex: 9999 });
    

После инициализации получите или задайтеzIndexoption:

// getter
var zIndex = $( ".selector" ).sortable( "option", "zIndex" );
 
// setter
$( ".selector" ).sortable( "option", "zIndex", 9999 );
    
 1000

Методы Возвращает Описание
cancel() jQuery (только плагин) Отменяет изменение в текущем sortable во время текущей сортировки и возвращает к предыдущему состоянию. Полезно в колбэках stop и receive.
  • Этот метод не принимает аргументов.

Пример кода:

Вызов метода cancel:

$( ".selector" ).sortable( "cancel" );
    
destroy() jQuery (только плагин) Полностью удаляет функциональность sortable. Возвращает элемент в состояние до инициализации.
  • Этот метод не принимает аргументов.

Пример кода:

Вызов метода destroy:

$( ".selector" ).sortable( "destroy" );
    
disable() jQuery (только плагин) Отключить sortable.
  • Этот метод не принимает аргументов.

Пример кода:

Вызов метода disable:

$( ".selector" ).sortable( "disable" );
    
enable() jQuery (только плагин) Включить sortable.
  • Этот метод не принимает аргументов.

Пример кода:

Вызов метода enable:

$( ".selector" ).sortable( "enable" );
    
option( optionName ) Object Получить значение, в данный момент связанное с указаннымoptionName.
  • optionName
    Тип: String
    Описание: Имя опции, которую нужно получить.

Пример кода:

Вызов этого метода:

var isDisabled = $( ".selector" ).sortable( "option", "disabled" );
    
option() PlainObject Получить объект, содержащий пары ключ/значение, представляющие текущий хэш параметров draggable.
  • Этот метод не принимает аргументов.

Пример кода:

Вызов этого метода:

var options = $( ".selector" ).sortable( "option" );
    
option( optionName, value ) jQuery (только плагин) Установить значение параметра sortable, связанное с указаннымoptionName.
  • optionName
    Тип: String
    Описание: Имя опции, которую нужно установить.
  • value
    Тип: Object
    Описание: Значение, задаваемое для параметра.

Пример кода:

Вызов этого метода:

$( ".selector" ).sortable( "option", "disabled", true );
    
option( options ) jQuery (только плагин) Установить один или несколько параметров для sortable.
  • options
    Тип: Object
    Описание: Пары «параметр — значение» для установки.

Пример кода:

Вызов этого метода:

$( ".selector" ).sortable( "option", { disabled: true } );
    
refresh() jQuery (только плагин) Обновить элементы sortable. Запускает перезагрузку всех элементов sortable, что приводит к распознаванию новых элементов.
  • Этот метод не принимает аргументов.

Пример кода:

Вызов метода refresh:

$( ".selector" ).sortable( "refresh" );
    
refreshPositions() jQuery (только плагин) Обновляет кэшированные позиции сортируемых элементов. Вызов этого метода обновляет кэшированные позиции всех сортируемых элементов.
  • Этот метод не принимает аргументов.

Пример кода:

Вызов метода refreshPositions:

$( ".selector" ).sortable( "refreshPositions" );
    
serialize( options ) String Сериализует сортируемые элементыidв строку, пригодную для отправки через форму или ajax. Вызов этого метода создаёт хеш, который можно добавить к любому URL, чтобы легко отправить новый порядок элементов обратно на сервер.

По умолчанию это работает черезidатрибут каждого элемента, в формате"setname_number", и создаёт хеш вида"setname[]=number&setname[]=number".

Примечание: если сериализация возвращает пустую строку, убедитесь, чтоidатрибут содержит символ подчёркивания (_). Формат должен быть"set_number". Например,idатрибут со значением"foo_1"、"foo_5"、"foo_2"с 3 элементами будет сериализовано как"foo[]=1&foo[]=5&foo[]=2". Вы можете использовать знаки подчеркивания (_), знаки равенства (=) или дефисы (-) для разделения набора и числа. Например,"foo=1"、"foo-1"、"foo_1"все сериализуются в"foo[]=1"。

  • options
    Тип: Object
    Параметры для настройки сериализации.
    • key(По умолчанию:The part before the delimiter in the attribute）
      Тип: String
      Описание: Заменитьpart1[]на указанное значение.
    • attribute(По умолчанию:"id"）
      Тип: String
      Описание: Имя атрибута, используемое для значения.
    • expression(По умолчанию:/(.+)[-=_](.+)/）
      Тип: RegExp
      Описание: Регулярное выражение для разделения значения атрибута на ключ и значение.

Пример кода:

Вызов метода serialize:

var sorted = $( ".selector" ).sortable( "serialize", { key: "sort" } );
    
toArray( options ) Массив Сериализует сортируемые элементыidв массив строк.
  • options
    Тип: Object
    Параметры для настройки сериализации.
    • attribute(По умолчанию:"id"）
      Тип: String
      Описание: Имя атрибута, используемое для значения.

Пример кода:

Вызов метода toArray:

var sortedIDs = $( ".selector" ).sortable( "toArray" );
    
widget() jQuery ВозвращаетjQueryобъект, содержащий сортируемые элементы.
  • Этот метод не принимает аргументов.

Пример кода:

Вызов метода widget:

var widget = $( ".selector" ).sortable( "widget" );
    

Events Type Описание
activate( event, ui ) sortactivate Это событие срабатывает при использовании связанных списков; каждый связанный список получает его в начале перетаскивания.
  • event
    Тип: Event
  • ui
    Тип: Object
    • helper
      Тип: jQuery
      Описание: объект jQuery, представляющий сортируемый helper.
    • item
      Тип: jQuery
      Описание: объект jQuery, представляющий текущий перетаскиваемый элемент.
    • offset
      Тип: Object
      Описание: текущая абсолютная позиция helper, представленная как{ top, left }。
    • position
      Тип: Object
      Описание: текущая позиция helper, представленная как{ top, left }。
    • originalPosition
      Тип: Object
      Описание: Исходная позиция элемента, представленная как{ top, left }。
    • sender
      Тип: jQuery
      Описание: Если перемещение происходит из одного sortable в другой, то sortable, из которого пришёл элемент.
    • placeholder
      Тип: jQuery
      Описание: Объект jQuery, представляющий элемент, используемый в качестве placeholder.

Пример кода:

Инициализируйте sortable с указанным обратным вызовом activate:

$( ".selector" ).sortable({
activate: function( event, ui ) {}
});
    

Привяжите обработчик события к событию sortactivate:

$( ".selector" ).on( "sortactivate", function( event, ui ) {} );
    
beforeStop( event, ui ) sortbeforestop Это событие запускается, когда сортировка останавливается, за исключением случаев, когда placeholder/helper всё ещё доступен.
  • event
    Тип: Event
  • ui
    Тип: Object
    • helper
      Тип: jQuery
      Описание: Объект jQuery, представляющий сортируемый helper.
    • item
      Тип: jQuery
      Описание: Объект jQuery, представляющий текущий перетаскиваемый элемент.
    • offset
      Тип: Object
      Описание: Текущая абсолютная позиция helper, представленная как{ top, left }。
    • position
      Тип: Object
      Описание: Текущая позиция helper, представленная как{ top, left }。
    • originalPosition
      Тип: Object
      Описание: Исходная позиция элемента, представленная как{ top, left }。
    • sender
      Тип: jQuery
      Описание: Если элемент перемещён из одного sortable в другой, sortable, из которого пришёл элемент.
    • placeholder
      Тип: jQuery
      Описание: jQuery-объект, представляющий элемент, используемый в качестве placeholder.

Пример кода:

Инициализировать sortable с указанной callback-функцией beforeStop:

$( ".selector" ).sortable({
beforeStop: function( event, ui ) {}
});
    

Привязать обработчик события к событию sortbeforestop:

$( ".selector" ).on( "sortbeforestop", function( event, ui ) {} );
    
change( event, ui ) sortchange Срабатывает во время сортировки, за исключением случаев, когда изменяется позиция DOM.
  • event
    Тип: Event
  • ui
    Тип: Object
    • helper
      Тип: jQuery
      Описание: Объект jQuery, представляющий сортируемый helper.
    • item
      Тип: jQuery
      Описание: Объект jQuery, представляющий текущий перетаскиваемый элемент.
    • offset
      Тип: Object
      Описание: Текущая абсолютная позиция helper, представленная как{ top, left }。
    • position
      Тип: Object
      Описание: Текущая позиция helper, представленная как{ top, left }。
    • originalPosition
      Тип: Object
      Описание: Исходная позиция элемента, представленная как{ top, left }。
    • sender
      Тип: jQuery
      Описание: Если элемент перемещён из одного sortable в другой, sortable, из которого пришёл элемент.
    • placeholder
      Тип: jQuery
      Описание: jQuery-объект, представляющий элемент, используемый в качестве placeholder.

Пример кода:

Инициализировать sortable с указанной callback-функцией change:

$( ".selector" ).sortable({
change: function( event, ui ) {}
});
    

Привязать обработчик события к событию sortchange:

$( ".selector" ).on( "sortchange", function( event, ui ) {} );
    
create( event, ui ) sortcreate Срабатывает при создании droppable.
  • event
    Тип: Event
  • ui
    Тип: Object

Примечание:uiОбъект пуст; он включён для согласованности с другими событиями.

Пример кода:

Инициализировать sortable с указанной callback-функцией create:

$( ".selector" ).sortable({
create: function( event, ui ) {}
});
    

Привяжите обработчик события к событию sortcreate:

$( ".selector" ).on( "sortcreate", function( event, ui ) {} );
    
deactivate( event, ui ) sortdeactivate Срабатывает, когда сортировка останавливается, и это событие распространяется на все возможные связанные списки.
  • event
    Тип: Event
  • ui
    Тип: Object
    • helper
      Тип: jQuery
      Описание: Объект jQuery, представляющий сортируемый helper.
    • item
      Тип: jQuery
      Описание: Объект jQuery, представляющий текущий перетаскиваемый элемент.
    • offset
      Тип: Object
      Описание: Текущая абсолютная позиция helper, представленная как{ top, left }。
    • position
      Тип: Object
      Описание: Текущая позиция helper, представленная как{ top, left }。
    • originalPosition
      Тип: Object
      Описание: Исходная позиция элемента, представленная как{ top, left }。
    • sender
      Тип: jQuery
      Описание: Если элемент перемещён из одного sortable в другой, sortable, из которого пришёл элемент.
    • placeholder
      Тип: jQuery
      Описание: jQuery-объект, представляющий элемент, используемый в качестве placeholder.

Пример кода:

Инициализируйте sortable с указанной функцией обратного вызова deactivate:

$( ".selector" ).sortable({
deactivate: function( event, ui ) {}
});
    

Привяжите обработчик события к событию sortdeactivate:

$( ".selector" ).on( "sortdeactivate", function( event, ui ) {} );
    
out( event, ui ) sortout Срабатывает, когда сортируемый элемент удаляется из сортируемого списка.

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

  • event
    Тип: Event
  • ui
    Тип: Object
    • helper
      Тип: jQuery
      Описание: Объект jQuery, представляющий сортируемый helper.
    • item
      Тип: jQuery
      Описание: Объект jQuery, представляющий текущий перетаскиваемый элемент.
    • offset
      Тип: Object
      Описание: Текущая абсолютная позиция helper, представленная как{ top, left }。
    • position
      Тип: Object
      Описание: Текущая позиция helper, представленная как{ top, left }。
    • originalPosition
      Тип: Object
      Описание: Исходная позиция элемента, представленная как{ top, left }。
    • sender
      Тип: jQuery
      Описание: Если элемент перемещён из одного sortable в другой, sortable, из которого пришёл элемент.
    • placeholder
      Тип: jQuery
      Описание: jQuery-объект, представляющий элемент, используемый в качестве placeholder.

Пример кода:

Инициализируйте sortable с указанной функцией обратного вызова out:

$( ".selector" ).sortable({
out: function( event, ui ) {}
});
    

Привяжите обработчик события к событию sortout:

$( ".selector" ).on( "sortout", function( event, ui ) {} );
    
over( event, ui ) sortover Срабатывает, когда сортируемый элемент перемещается в сортируемый список.
  • event
    Тип: Event
  • ui
    Тип: Object
    • helper
      Тип: jQuery
      Описание: Объект jQuery, представляющий сортируемый helper.
    • item
      Тип: jQuery
      Описание: Объект jQuery, представляющий текущий перетаскиваемый элемент.
    • offset
      Тип: Object
      Описание: Текущая абсолютная позиция helper, представленная как{ top, left }。
    • position
      Тип: Object
      Описание: Текущая позиция helper, представленная как{ top, left }。
    • originalPosition
      Тип: Object
      Описание: Исходная позиция элемента, представленная как{ top, left }。
    • sender
      Тип: jQuery
      Описание: Если элемент перемещён из одного sortable в другой, sortable, из которого пришёл элемент.
    • placeholder
      Тип: jQuery
      Описание: jQuery-объект, представляющий элемент, используемый в качестве placeholder.

Пример кода:

Инициализировать sortable с указанной callback-функцией over:

$( ".selector" ).sortable({
out: function( event, ui ) {}
});
    

Привязать обработчик события к событию sortover:

$( ".selector" ).on( "sortout", function( event, ui ) {} );
    
receive( event, ui ) sortreceive Срабатывает, когда элемент из связанного списка sortable помещается в другой список. Последний является целевым объектом события.
  • event
    Тип: Event
  • ui
    Тип: Object
    • helper
      Тип: jQuery
      Описание: Объект jQuery, представляющий сортируемый helper.
    • item
      Тип: jQuery
      Описание: Объект jQuery, представляющий текущий перетаскиваемый элемент.
    • offset
      Тип: Object
      Описание: Текущая абсолютная позиция helper, представленная как{ top, left }。
    • position
      Тип: Object
      Описание: Текущая позиция helper, представленная как{ top, left }。
    • originalPosition
      Тип: Object
      Описание: Исходная позиция элемента, представленная как{ top, left }。
    • sender
      Тип: jQuery
      Описание: Если элемент перемещён из одного sortable в другой, sortable, из которого пришёл элемент.
    • placeholder
      Тип: jQuery
      Описание: jQuery-объект, представляющий элемент, используемый в качестве placeholder.

Пример кода:

Инициализировать sortable с указанной callback-функцией receive:

$( ".selector" ).sortable({
receive: function( event, ui ) {}
});
    

Привязать обработчик события к событию sortreceive:

$( ".selector" ).on( "sortreceive", function( event, ui ) {} );
    
remove( event, ui ) sortremove Срабатывает, когда элемент из связанного списка sortable помещается в другой список. Первый является целевым объектом события.
  • event
    Тип: Event
  • ui
    Тип: Object
    • helper
      Тип: jQuery
      Описание: Объект jQuery, представляющий сортируемый helper.
    • item
      Тип: jQuery
      Описание: Объект jQuery, представляющий текущий перетаскиваемый элемент.
    • offset
      Тип: Object
      Описание: Текущая абсолютная позиция helper, представленная как{ top, left }。
    • position
      Тип: Object
      Описание: Текущее положение helper, выраженное как{ top, left }。
    • originalPosition
      Тип: Object
      Описание: Исходная позиция элемента, выраженная как{ top, left }。
    • placeholder
      Тип: jQuery
      Описание: объект jQuery, представляющий элемент, используемый в качестве заполнителя.

Пример кода:

Инициализировать sortable с указанной callback-функцией remove:

$( ".selector" ).sortable({
remove: function( event, ui ) {}
});
    

Привязать обработчик события к событию sortremove:

$( ".selector" ).on( "sortremove", function( event, ui ) {} );
    
sort( event, ui ) сортировка Это событие срабатывает во время сортировки.
  • event
    Тип: Event
  • ui
    Тип: Object
    • helper
      Тип: jQuery
      Описание: объект jQuery, представляющий сортируемый helper.
    • item
      Тип: jQuery
      Описание: объект jQuery, представляющий элемент, который в данный момент перетаскивается.
    • offset
      Тип: Object
      Описание: текущая абсолютная позиция helper, выраженная как{ top, left }。
    • position
      Тип: Object
      Описание: Текущее положение helper, выраженное как{ top, left }。
    • originalPosition
      Тип: Object
      Описание: Исходная позиция элемента, выраженная как{ top, left }。
    • sender
      Тип: jQuery
      Описание: Если элемент перемещается из одного sortable в другой, sortable, из которого пришёл элемент.
    • placeholder
      Тип: jQuery
      Описание: объект jQuery, представляющий элемент, используемый в качестве заполнителя.

Пример кода:

Инициализировать sortable с указанной callback-функцией sort:

$( ".selector" ).sortable({
sort: function( event, ui ) {}
});
    

Привязать обработчик события к событию sort:

$( ".selector" ).on( "sort", function( event, ui ) {} );
    
start( event, ui ) sortstart Это событие срабатывает при начале сортировки.
  • event
    Тип: Event
  • ui
    Тип: Object
    • helper
      Тип: jQuery
      Описание: объект jQuery, представляющий сортируемый helper.
    • item
      Тип: jQuery
      Описание: объект jQuery, представляющий элемент, который в данный момент перетаскивается.
    • offset
      Тип: Object
      Описание: текущая абсолютная позиция helper, выраженная как{ top, left }。
    • position
      Тип: Object
      Описание: Текущее положение helper, выраженное как{ top, left }。
    • originalPosition
      Тип: Object
      Описание: Исходная позиция элемента, выраженная как{ top, left }。
    • sender
      Тип: jQuery
      Описание: Если элемент перемещается из одного sortable в другой, sortable, из которого пришёл элемент.
    • placeholder
      Тип: jQuery
      Описание: объект jQuery, представляющий элемент, используемый в качестве заполнителя.

Пример кода:

Инициализируйте sortable с указанной функцией обратного вызова start:

$( ".selector" ).sortable({
start: function( event, ui ) {}
});
    

Привяжите обработчик события к событию sortstart:

$( ".selector" ).on( "sortstart", function( event, ui ) {} );
    
stop( event, ui ) sortstop Это событие срабатывает при остановке сортировки.
  • event
    Тип: Event
  • ui
    Тип: Object
    • helper
      Тип: jQuery
      Описание: объект jQuery, представляющий сортируемый helper.
    • item
      Тип: jQuery
      Описание: объект jQuery, представляющий элемент, который в данный момент перетаскивается.
    • offset
      Тип: Object
      Описание: текущая абсолютная позиция helper, выраженная как{ top, left }。
    • position
      Тип: Object
      Описание: Текущее положение helper, выраженное как{ top, left }。
    • originalPosition
      Тип: Object
      Описание: Исходная позиция элемента, выраженная как{ top, left }。
    • sender
      Тип: jQuery
      Описание: Если элемент перемещается из одного sortable в другой, sortable, из которого пришёл элемент.
    • placeholder
      Тип: jQuery
      Описание: объект jQuery, представляющий элемент, используемый в качестве заполнителя.

Пример кода:

Инициализируйте sortable с указанной функцией обратного вызова stop:

$( ".selector" ).sortable({
stop: function( event, ui ) {}
});
    

Привяжите обработчик события к событию sortstop:

$( ".selector" ).on( "sortstop", function( event, ui ) {} );
    
update( event, ui ) sortupdate Это событие срабатывает, когда пользователь прекращает сортировку и позиция в DOM изменилась.
  • event
    Тип: Event
  • ui
    Тип: Object
    • helper
      Тип: jQuery
      Описание: объект jQuery, представляющий сортируемый helper.
    • item
      Тип: jQuery
      Описание: объект jQuery, представляющий элемент, который в данный момент перетаскивается.
    • offset
      Тип: Object
      Описание: текущая абсолютная позиция helper, выраженная как{ top, left }。
    • position
      Тип: Object
      Описание: Текущее положение helper, выраженное как{ top, left }。
    • originalPosition
      Тип: Object
      Описание: Исходная позиция элемента, выраженная как{ top, left }。
    • sender
      Тип: jQuery
      Описание: Если элемент перемещается из одного sortable в другой, sortable, из которого пришёл элемент.
    • placeholder
      Тип: jQuery
      Описание: объект jQuery, представляющий элемент, используемый в качестве заполнителя.

Пример кода:

Инициализируйте sortable с указанной функцией обратного вызова update:

$( ".selector" ).sortable({
update: function( event, ui ) {}
});
    

Привяжите обработчик события к событию sortupdate:

$( ".selector" ).on( "sortupdate", function( event, ui ) {} );
    

Примеры

Простой сортируемый виджет jQuery UI.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>可排序小部件（Sortable Widget）演示</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
</head>
<body>
 
<ul id="sortable">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
 
<script>$("#sortable").sortable();</script>
 
</body>
</html>

Другие расширения