Перетаскиваемый виджет

Перетаскиваемый виджетверсия добавлена: 1.0

Описание: Разрешает перемещение элементов с помощью мыши.

Быстрый доступПримеры

Методы

События

Делает выбранные элементы перетаскиваемыми мышкой. Если вам нужен не только перенос, но и перетаскивание с размещением, см. плагин jQuery UI Droppable, который предоставляет целевой объект для перетаскиваемых элементов.

Тема

Виджет перетаскивания использует фреймворк стилей jQuery UI для оформления. Если требуется настройка стилей для перетаскивания, можно использовать следующие имена CSS-классов для переопределения или в качестве ключей для classes параметра:

ui-draggable: Элемент, подлежащий перетаскиванию. Когда перетаскивание отключено, добавляется класс ui-draggable-disabled. Во время перетаскивания добавляется класс ui-draggable-dragging.
ui-draggable-handle: Элемент управления перетаскиванием, указанный с помощью handle параметра. По умолчанию, сам перетаскиваемый элемент является элементом управления.

Зависимости

Параметры

addClasses

Тип: Boolean

Значение по умолчанию: true

Если установлено в false, предотвратит добавление класса ui-draggable. Это может быть желательно для оптимизации производительности при вызове .draggable() на сотнях элементов.

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

Инициализируйте перетаскиваемый элемент с указанным параметром addClasses:

$( ".selector" ).draggable({
  addClasses: false
});

Получите или установите параметр addClasses после инициализации:

// Getter
var addClasses = $( ".selector" ).draggable( "option", "addClasses" );
 
// Setter
$( ".selector" ).draggable( "option", "addClasses", false );

appendTo

Тип: jQuery или Элемент или Селектор или Строка

Значение по умолчанию: "parent"

Элемент, к которому должен быть добавлен помощник перетаскивания во время перетаскивания.

Примечание: Параметр appendTo работает только тогда, когда параметр helper установлен так, чтобы не использовать исходный элемент.

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

jQuery: Объект jQuery, содержащий элемент, к которому нужно добавить помощник.
Элемент: Элемент, к которому нужно добавить помощник.
Селектор: Селектор, определяющий элемент, к которому нужно добавить помощник.
Строка: Строка "parent" приведет к тому, что помощник станет следующим за перетаскиваемым элементом.

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

Инициализируйте перетаскиваемый элемент с указанным параметром appendTo:

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

Получите или установите параметр appendTo после инициализации:

// Getter
var appendTo = $( ".selector" ).draggable( "option", "appendTo" );
 
// Setter
$( ".selector" ).draggable( "option", "appendTo", "body" );

axis

Тип: Строка

Значение по умолчанию: false

Ограничивает перетаскивание осью X (горизонтальной) или осью Y (вертикальной). Возможные значения: "x", "y".

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

Инициализируйте перетаскиваемый элемент с указанным параметром axis:

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

Получите или установите параметр axis после инициализации:

// Getter
var axis = $( ".selector" ).draggable( "option", "axis" );
 
// Setter
$( ".selector" ).draggable( "option", "axis", "x" );

cancel

Тип: Селектор

Значение по умолчанию: "input,textarea,button,select,option"

Предотвращает начало перетаскивания на указанных элементах.

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

Инициализируйте перетаскиваемый элемент с указанным параметром cancel:

$( ".selector" ).draggable({
  cancel: ".title"
});

Получите или установите параметр cancel после инициализации:

// Getter
var cancel = $( ".selector" ).draggable( "option", "cancel" );
 
// Setter
$( ".selector" ).draggable( "option", "cancel", ".title" );

classes

Тип: Объект

Значение по умолчанию: {}

Укажите дополнительные классы, которые нужно добавить к элементам виджета. Любые классы, указанные в разделе Стиль, могут быть использованы в качестве ключей для переопределения их значения. Для получения дополнительной информации об этом параметре ознакомьтесь со статьей учебником о параметре classes.

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

Инициализируйте перетаскиваемый элемент с указанным параметром classes, изменив стиль для класса ui-draggable:

$( ".selector" ).draggable({
  classes: {
    "ui-draggable": "highlight"
  }
});

Получите или установите свойство параметра classes после инициализации, здесь читая и изменяя стиль для класса ui-draggable:

// Getter
var themeClass = $( ".selector" ).draggable( "option", "classes.ui-draggable" );
 
// Setter
$( ".selector" ).draggable( "option", "classes.ui-draggable", "highlight" );

connectToSortable

Тип: Селектор

Значение по умолчанию: false

Разрешает перетаскивание на указанные сортируемые элементы. Если этот параметр используется, перетаскиваемый элемент может быть помещен в сортируемый список и станет его частью. Примечание: параметр helper должен быть установлен в "clone" для правильной работы. Требуется плагин jQuery UI Sortable.

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

Инициализируйте перетаскиваемый элемент с указанным параметром connectToSortable:

$( ".selector" ).draggable({
  connectToSortable: "#my-sortable"
});

Получите или установите параметр connectToSortable после инициализации:

// Getter
var connectToSortable = $( ".selector" ).draggable( "option", "connectToSortable" );
 
// Setter
$( ".selector" ).draggable( "option", "connectToSortable", "#my-sortable" );

containment

Тип: Селектор или Элемент или Строка или Массив

Значение по умолчанию: false

Ограничивает перетаскивание пределами указанного элемента или области.

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

Селектор: Перетаскиваемый элемент будет ограничен границами первого элемента, найденного по селектору. Если элемент не найден, ограничений не будет.
Элемент: Перетаскиваемый элемент будет ограничен границами этого элемента.
Строка: Возможные значения: "parent", "document", "window".
Массив: Массив, определяющий ограничивающую прямоугольную область в виде [ x1, y1, x2, y2 ].

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

Инициализируйте перетаскиваемый элемент с указанным параметром containment:

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

Получите или установите параметр containment после инициализации:

// Getter
var containment = $( ".selector" ).draggable( "option", "containment" );
 
// Setter
$( ".selector" ).draggable( "option", "containment", "parent" );

cursor

Тип: Строка

Значение по умолчанию: "auto"

Курсор CSS во время операции перетаскивания.

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

Инициализируйте перетаскиваемый элемент с указанным параметром cursor:

$( ".selector" ).draggable({
  cursor: "crosshair"
});

Получите или установите параметр cursor после инициализации:

// Getter
var cursor = $( ".selector" ).draggable( "option", "cursor" );
 
// Setter
$( ".selector" ).draggable( "option", "cursor", "crosshair" );

cursorAt

Тип: Объект

Значение по умолчанию: false

Устанавливает смещение помощника перетаскивания относительно курсора мыши. Координаты можно задать в виде объекта, используя комбинацию одного или двух ключей: { top, left, right, bottom }.

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

Инициализируйте перетаскиваемый элемент с указанным параметром cursorAt:

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

Получите или установите параметр cursorAt после инициализации:

// Getter
var cursorAt = $( ".selector" ).draggable( "option", "cursorAt" );
 
// Setter
$( ".selector" ).draggable( "option", "cursorAt", { left: 5 } );

delay

Тип: Число

Значение по умолчанию: 0

Время в миллисекундах после нажатия левой кнопки мыши, до начала перетаскивания. Этот параметр может использоваться для предотвращения нежелательных перетаскиваний при нажатии на элемент. (версия устарела: 1.12)

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

Инициализируйте перетаскиваемый элемент с указанным параметром delay:

$( ".selector" ).draggable({
  delay: 300
});

Получите или установите параметр delay после инициализации:

// Getter
var delay = $( ".selector" ).draggable( "option", "delay" );
 
// Setter
$( ".selector" ).draggable( "option", "delay", 300 );

disabled

Тип: Boolean

Значение по умолчанию: false

Отключает перетаскивание, если установлено в true.

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

Инициализируйте перетаскиваемый элемент с указанным параметром disabled:

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

Получите или установите параметр disabled после инициализации:

// Getter
var disabled = $( ".selector" ).draggable( "option", "disabled" );
 
// Setter
$( ".selector" ).draggable( "option", "disabled", true );

distance

Тип: Число

Значение по умолчанию: 1

Расстояние в пикселях после нажатия левой кнопки мыши, которое должно пройти, прежде чем начнется перетаскивание. Этот параметр может использоваться для предотвращения нежелательных перетаскиваний при нажатии на элемент. (версия устарела: 1.12)

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

Инициализируйте перетаскиваемый элемент с указанным параметром distance:

$( ".selector" ).draggable({
  distance: 10
});

Получите или установите параметр distance после инициализации:

// Getter
var distance = $( ".selector" ).draggable( "option", "distance" );
 
// Setter
$( ".selector" ).draggable( "option", "distance", 10 );

grid

Тип: Массив

Значение по умолчанию: false

Фиксирует помощник перетаскивания на сетке через каждые x и y пикселей. Массив должен иметь вид [ x, y ].

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

Инициализируйте перетаскиваемый элемент с указанным параметром grid:

$( ".selector" ).draggable({
  grid: [ 50, 20 ]
});

Получите или установите параметр grid после инициализации:

// Getter
var grid = $( ".selector" ).draggable( "option", "grid" );
 
// Setter
$( ".selector" ).draggable( "option", "grid", [ 50, 20 ] );

handle

Тип: Селектор или Элемент

Значение по умолчанию: false

Если указано, ограничит начало перетаскивания случаем, если нажатие левой кнопки мыши произойдет на указанном элементе(ах). Допускаются только элементы, являющиеся потомками перетаскиваемого элемента.

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

Инициализируйте перетаскиваемый элемент с указанным параметром handle:

$( ".selector" ).draggable({
  handle: "h2"
});

Получите или установите параметр handle после инициализации:

// Getter
var handle = $( ".selector" ).draggable( "option", "handle" );
 
// Setter
$( ".selector" ).draggable( "option", "handle", "h2" );

помощник

Тип: Строка или Функция()

По умолчанию: "original"

Позволяет использовать вспомогательный элемент для отображения при перетаскивании.

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

Строка: Если установлено значение "clone", то элемент будет скопирован, а копия будет перетаскиваться.
Функция: Функция, которая должна возвращать jQuery-объект или DOM-элемент для использования во время перетаскивания.

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

Инициализируйте перетаскиваемый элемент с указанным параметром helper:

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

Получение или установка параметра helper после инициализации:

// Getter
var helper = $( ".selector" ).draggable( "option", "helper" );
 
// Setter
$( ".selector" ).draggable( "option", "helper", "clone" );

iframeFix

Тип: Булево или Селектор

По умолчанию: false

Препятствует тому, чтобы фреймы iframes захватывали события mousemove во время перетаскивания. Полезно в сочетании с параметром cursorAt или в любых случаях, когда курсор мыши может не находиться над вспомогательным элементом.

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

Булево: При установке значения true будут созданы прозрачные наложения поверх всех фреймов iframes на странице.
Селектор: Все фреймы iframes, соответствующие селектору, будут покрыты прозрачными наложениями.

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

Инициализируйте перетаскиваемый элемент с указанным параметром iframeFix:

$( ".selector" ).draggable({
  iframeFix: true
});

Получение или установка параметра iframeFix после инициализации:

// Getter
var iframeFix = $( ".selector" ).draggable( "option", "iframeFix" );
 
// Setter
$( ".selector" ).draggable( "option", "iframeFix", true );

прозрачность

Тип: Число

По умолчанию: false

Прозрачность вспомогательного элемента во время перетаскивания.

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

Инициализируйте перетаскиваемый элемент с указанным параметром opacity:

$( ".selector" ).draggable({
  opacity: 0.35
});

Получение или установка параметра opacity после инициализации:

// Getter
var opacity = $( ".selector" ).draggable( "option", "opacity" );
 
// Setter
$( ".selector" ).draggable( "option", "opacity", 0.35 );

refreshPositions

Тип: Булево

По умолчанию: false

Если установлено значение true, все позиции элементов droppable вычисляются при каждом mousemove. Внимание: Это решает проблемы на высокодинамических страницах, но значительно снижает производительность.

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

Инициализируйте перетаскиваемый элемент с указанным параметром refreshPositions:

$( ".selector" ).draggable({
  refreshPositions: true
});

Получение или установка параметра refreshPositions после инициализации:

// Getter
var refreshPositions = $( ".selector" ).draggable( "option", "refreshPositions" );
 
// Setter
$( ".selector" ).draggable( "option", "refreshPositions", true );

восстановить

Тип: Булево или Строка или Функция()

По умолчанию: false

Возвращение элемента в исходное положение при завершении перетаскивания.

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

Булево: Если установлено значение true, элемент всегда вернётся в исходное положение.
Строка: Если установлено значение "invalid", возврат произойдёт только если перетаскиваемый элемент не был помещён на элемент droppable. Для "valid", наоборот.
Функция: Функция, определяющая, следует ли возвращать элемент в исходное положение. Функция должна возвращать true для возврата элемента.

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

Инициализируйте перетаскиваемый элемент с указанным параметром revert:

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

Получение или установка параметра revert после инициализации:

// Getter
var revert = $( ".selector" ).draggable( "option", "revert" );
 
// Setter
$( ".selector" ).draggable( "option", "revert", true );

revertDuration

Тип: Число

По умолчанию: 500

Продолжительность анимации возврата в миллисекундах. Игнорируется, если параметр revert имеет значение false.

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

Инициализируйте перетаскиваемый элемент с указанным параметром revertDuration:

$( ".selector" ).draggable({
  revertDuration: 200
});

Получение или установка параметра revertDuration после инициализации:

// Getter
var revertDuration = $( ".selector" ).draggable( "option", "revertDuration" );
 
// Setter
$( ".selector" ).draggable( "option", "revertDuration", 200 );

scope

Тип: Строка

По умолчанию: "default"

Используется для группировки наборов перетаскиваемых и размещаемых элементов, в дополнение к параметру размещаемого элемента accept. Перетаскиваемый элемент с одинаковым значением scope, что и размещаемый элемент, будет принят размещаемым элементом.

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

Инициализируйте перетаскиваемый элемент с указанным параметром scope:

$( ".selector" ).draggable({
  scope: "tasks"
});

Получение или установка параметра scope после инициализации:

// Getter
var scope = $( ".selector" ).draggable( "option", "scope" );
 
// Setter
$( ".selector" ).draggable( "option", "scope", "tasks" );

прокрутка

Тип: Булево

По умолчанию: true

Если установлено значение true, контейнер автоматически прокручивается во время перетаскивания.

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

Инициализируйте перетаскиваемый элемент с указанным параметром scroll:

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

Получение или установка параметра scroll после инициализации:

// Getter
var scroll = $( ".selector" ).draggable( "option", "scroll" );
 
// Setter
$( ".selector" ).draggable( "option", "scroll", false );

scrollSensitivity

Тип: Число

По умолчанию: 20

Расстояние в пикселях от края области просмотра, после чего область просмотра должна прокручиваться. Расстояние относительно указателя, а не перетаскиваемого элемента. Игнорируется, если параметр scroll имеет значение false.

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

Инициализируйте перетаскиваемый элемент с указанным параметром scrollSensitivity:

$( ".selector" ).draggable({
  scrollSensitivity: 100
});

Получение или установка параметра scrollSensitivity после инициализации:

// Getter
var scrollSensitivity = $( ".selector" ).draggable( "option", "scrollSensitivity" );
 
// Setter
$( ".selector" ).draggable( "option", "scrollSensitivity", 100 );

scrollSpeed

Тип: Число

По умолчанию: 20

Скорость прокрутки окна, как только указатель мыши окажется в пределах расстояния scrollSensitivity. Игнорируется, если параметр scroll имеет значение false.

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

Инициализируйте перетаскиваемый элемент с указанным параметром scrollSpeed:

$( ".selector" ).draggable({
  scrollSpeed: 100
});

Получение или установка параметра scrollSpeed после инициализации:

// Getter
var scrollSpeed = $( ".selector" ).draggable( "option", "scrollSpeed" );
 
// Setter
$( ".selector" ).draggable( "option", "scrollSpeed", 100 );

привязка

Тип: Булево или Селектор

По умолчанию: false

Привязка элемента к другим элементам.

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

Булево: При установке значения true элемент будет привязываться ко всем другим перетаскиваемым элементам.
Селектор: Селектор, определяющий элементы, к которым нужно привязываться.

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

Инициализируйте перетаскиваемый элемент с указанным параметром snap:

$( ".selector" ).draggable({
  snap: true
});

Получение или установка параметра snap после инициализации:

// Getter
var snap = $( ".selector" ).draggable( "option", "snap" );
 
// Setter
$( ".selector" ).draggable( "option", "snap", true );

snapMode

Тип: Строка

По умолчанию: "both"

Определяет, к каким сторонам элементов привязки будет привязываться перетаскиваемый элемент. Игнорируется, если параметр snap имеет значение false. Возможные значения: "inner", "outer", "both".

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

Инициализируйте перетаскиваемый элемент с указанным параметром snapMode:

$( ".selector" ).draggable({
  snapMode: "inner"
});

Получение или установка параметра snapMode после инициализации:

// Getter
var snapMode = $( ".selector" ).draggable( "option", "snapMode" );
 
// Setter
$( ".selector" ).draggable( "option", "snapMode", "inner" );

snapTolerance

Тип: Число

По умолчанию: 20

Расстояние в пикселях от краёв элемента привязки, при котором должно происходить привязывание. Игнорируется, если параметр snap имеет значение false.

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

Инициализируйте перетаскиваемый элемент с указанным параметром snapTolerance:

$( ".selector" ).draggable({
  snapTolerance: 30
});

Получение или установка параметра snapTolerance после инициализации:

// Getter
var snapTolerance = $( ".selector" ).draggable( "option", "snapTolerance" );
 
// Setter
$( ".selector" ).draggable( "option", "snapTolerance", 30 );

стек

Тип: Селектор

По умолчанию: false

Управляет индексом z-порядка набора элементов, соответствующих селектору, всегда перемещает текущий перетаскиваемый элемент вперёд. Очень полезно в таких задачах, как менеджеры окон.

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

Инициализируйте перетаскиваемый элемент с указанным параметром stack:

$( ".selector" ).draggable({
  stack: ".products"
});

Получение или установка параметра stack после инициализации:

// Getter
var stack = $( ".selector" ).draggable( "option", "stack" );
 
// Setter
$( ".selector" ).draggable( "option", "stack", ".products" );

zIndex

Тип: Число

По умолчанию: false

Индекс z для помощника во время перетаскивания.

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

Инициализируйте перетаскиваемый элемент с указанным параметром zIndex:

$( ".selector" ).draggable({
  zIndex: 100
});

Получите или установите параметр zIndex после инициализации:

// Getter
var zIndex = $( ".selector" ).draggable( "option", "zIndex" );
 
// Setter
$( ".selector" ).draggable( "option", "zIndex", 100 );

Методы

destroy()Возвращает: jQuery (только для плагина)

Полностью удаляет функциональность перетаскивания. Это вернёт элемент в состояние до инициализации.

Этот метод не принимает аргументов.

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

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

$( ".selector" ).draggable( "destroy" );

disable()Возвращает: jQuery (только для плагина)

Отключает перетаскивание.

Этот метод не принимает аргументов.

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

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

$( ".selector" ).draggable( "disable" );

enable()Возвращает: jQuery (только для плагина)

Включает перетаскивание.

Этот метод не принимает аргументов.

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

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

$( ".selector" ).draggable( "enable" );

instance()Возвращает: Объект

Получает объект экземпляра перетаскиваемого элемента. Если у элемента нет связанного экземпляра, возвращается undefined.

В отличие от других методов виджета, instance() безопасно вызывать для любого элемента после загрузки плагина перетаскивания.

Этот метод не принимает аргументов.

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

Вызовите метод instance:

$( ".selector" ).draggable( "instance" );

option( optionName )Возвращает: Объект

Получает значение, текущее связанное с указанным optionName.

Примечание: Для параметров, имеющих объекты в качестве значения, вы можете получить значение определённого ключа, используя нотацию точек. Например, "foo.bar" получит значение свойства bar параметра foo.

optionName

Тип: Строка

Имя параметра для получения.

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

Вызовите метод:

var isDisabled = $( ".selector" ).draggable( "option", "disabled" );

option()Возвращает: ОбъектPlain

Получает объект, содержащий пары "ключ-значение", представляющие текущий хэш параметров перетаскивания.

Эта сигнатура не принимает аргументов.

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

Вызовите метод:

var options = $( ".selector" ).draggable( "option" );

option( optionName, value )Возвращает: jQuery (только для плагина)

Устанавливает значение параметра перетаскивания, связанного с указанным optionName.

Примечание: Для параметров, имеющих объекты в качестве значения, вы можете установить значение только одного свойства, используя нотацию точек для optionName. Например, "foo.bar" обновит только свойство bar параметра foo.

optionName

Тип: Строка

Имя параметра для установки.
value

Тип: Объект

Значение для установки параметра.

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

Вызовите метод:

$( ".selector" ).draggable( "option", "disabled", true );

option( options )Возвращает: jQuery (только для плагина)

Устанавливает один или несколько параметров для перетаскивания.

options

Тип: Объект

Карта пар "параметр-значение" для установки.

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

Вызовите метод:

$( ".selector" ).draggable( "option", { disabled: true } );

События

create( event, ui )Тип: `dragcreate`

Срабатывает при создании перетаскиваемого элемента.

event

Тип: Событие
ui

Тип: Объект

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

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

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

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

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

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

drag( event, ui )Тип: `drag`

Срабатывает, когда курсор перемещается во время перетаскивания, непосредственно перед текущим перемещением.

event

Тип: Событие
ui

Тип: Объект
- helper
  
  Тип: jQuery
  
  Объект jQuery, представляющий помощника, который перетаскивается.
- position
  
  Тип: Объект
  
  Текущее положение CSS помощника как объект { top, left }. Значения можно изменить, чтобы изменить положение элемента. Это полезно для пользовательской привязки, привязки к сетке и т. д.
- offset
  
  Тип: Объект
  
  Текущее смещение положения помощника как объект { top, left }.

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

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

$( ".selector" ).draggable({
  drag: function( event, ui ) {}
});

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

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

Ограничьте движение с помощью ui.position:

$( ".selector" ).draggable({
  drag: function( event, ui ) {
 
    // Keep the left edge of the element
    // at least 100 pixels from the container
    ui.position.left = Math.min( 100, ui.position.left );
  }
});

start( event, ui )Тип: `dragstart`

Срабатывает при начале перетаскивания.

event

Тип: Событие
ui

Тип: Объект
- helper
  
  Тип: jQuery
  
  Объект jQuery, представляющий помощника, который перетаскивается.
- position
  
  Тип: Объект
  
  Текущее положение CSS помощника как объект { top, left }.
- offset
  
  Тип: Объект
  
  Текущее смещение положения помощника как объект { top, left }.

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

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

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

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

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

stop( event, ui )Тип: `dragstop`

Срабатывает при остановке перетаскивания.

event

Тип: Событие
ui

Тип: Объект
- helper
  
  Тип: jQuery
  
  Объект jQuery, представляющий помощника, который перетаскивается.
- position
  
  Тип: Объект
  
  Текущее положение CSS помощника как объект { top, left }.
- offset
  
  Тип: Объект
  
  Текущее смещение положения помощника как объект { top, left }.

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

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

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

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

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

Пример:

Простой jQuery UI перетаскиваемый элемент

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>draggable demo</title>
  <link rel="stylesheet" href="https://code.jquery.com/ui/1.13.3/themes/smoothness/jquery-ui.css">
  <style>
  #draggable {
    width: 100px;
    height: 100px;
    background: #ccc;
  }
  </style>
  <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
  <script src="https://code.jquery.com/ui/1.13.3/jquery-ui.js"></script>
</head>
<body>
 
<div id="draggable">Drag me</div>
 
<script>
$( "#draggable" ).draggable();
</script>
 
</body>
</html>

Перетаскиваемый виджет