代码实例：

初始化带有指定 addClasses 选项的 draggable：

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

在初始化后，获取或设置 addClasses 选项：

// getter
var addClasses = $( ".selector" ).draggable( "option", "addClasses" );
 
// setter
$( ".selector" ).draggable( "option", "addClasses", false );
    

支持多个类型：

• jQuery：一个 jQuery 对象，包含助手（helper）要追加到的元素。
• Element：要追加助手（helper）的元素。
• Selector：一个选择器，指定哪一个元素要追加助手（helper）。
• String：字符串 "parent" 将促使助手（helper）成为 draggable 的同级。

代码实例：

初始化带有指定 appendTo 选项的 draggable：

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

在初始化后，获取或设置 appendTo 选项：

// getter
var appendTo = $( ".selector" ).draggable( "option", "appendTo" );
 
// setter
$( ".selector" ).draggable( "option", "appendTo", "body" );
    

代码实例：

初始化带有指定 axis 选项的 draggable：

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

在初始化后，获取或设置 axis 选项：

// getter
var axis = $( ".selector" ).draggable( "option", "axis" );
 
// setter
$( ".selector" ).draggable( "option", "axis", "x" );
    

代码实例：

初始化带有指定 cancel 选项的 draggable：

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

在初始化后，获取或设置 cancel 选项：

// getter
var cancel = $( ".selector" ).draggable( "option", "cancel" );
 
// setter
$( ".selector" ).draggable( "option", "cancel", ".title" );
    

代码实例：

初始化带有指定 connectToSortable 选项的 draggable：

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

在初始化后，获取或设置 connectToSortable 选项：

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

支持多个类型：

• Selector：可拖拽元素将被包含在 selector 第一个元素的边界内。如果未找到元素，则不设置 containment。
• Element：可拖拽元素将被包含在元素的边界。
• String：可能的值："parent"、"document"、"window"。
• Array：一个数组， 以形式 [ x1, y1, x2, y2 ] 定义元素的边界。

代码实例：

初始化带有指定 containment 选项的 draggable：

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

在初始化后，获取或设置 containment 选项：

// getter
var containment = $( ".selector" ).draggable( "option", "containment" );
 
// setter
$( ".selector" ).draggable( "option", "containment", "parent" );
    

代码实例：

初始化带有指定 cursor 选项的 draggable：

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

在初始化后，获取或设置 cursor 选项：

// getter
var cursor = $( ".selector" ).draggable( "option", "cursor" );
 
// setter
$( ".selector" ).draggable( "option", "cursor", "crosshair" );
    

代码实例：

初始化带有指定 cursorAt 选项的 draggable：

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

在初始化后，获取或设置 cursorAt 选项：

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

代码实例：

初始化带有指定 delay 选项的 draggable：

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

在初始化后，获取或设置 delay 选项：

// getter
var delay = $( ".selector" ).draggable( "option", "delay" );
 
// setter
$( ".selector" ).draggable( "option", "delay", 300 );
    

代码实例：

初始化带有指定 disabled 选项的 draggable：

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

在初始化后，获取或设置 disabled 选项：

// getter
var disabled = $( ".selector" ).draggable( "option", "disabled" );
 
// setter
$( ".selector" ).draggable( "option", "disabled", true );
    

代码实例：

初始化带有指定 distance 选项的 draggable：

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

在初始化后，获取或设置 distance 选项：

// getter
var distance = $( ".selector" ).draggable( "option", "distance" );
 
// setter
$( ".selector" ).draggable( "option", "distance", 10 );
    

代码实例：

初始化带有指定 grid 选项的 draggable：

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

在初始化后，获取或设置 grid 选项：

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

代码实例：

初始化带有指定 handle 选项的 draggable：

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

在初始化后，获取或设置 handle 选项：

// getter
var handle = $( ".selector" ).draggable( "option", "handle" );
 
// setter
$( ".selector" ).draggable( "option", "handle", "h2" );
    

支持多个类型：

• String：如果设置为 "clone"，元素将被克隆，且克隆将被拖拽。
• Function：一个函数，将返回拖拽时要使用的 DOMElement。

代码实例：

初始化带有指定 helper 选项的 draggable：

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

在初始化后，获取或设置 helper 选项：

// getter
var helper = $( ".selector" ).draggable( "option", "helper" );
 
// setter
$( ".selector" ).draggable( "option", "helper", "clone" );
    

支持多个类型：

• Boolean：当设置为 true 时，透明遮罩将被放置在页面上所有 iframes 上。
• Selector：匹配 selector 的任意 iframes 将被透明遮罩覆盖。

代码实例：

初始化带有指定 iframeFix 选项的 draggable：

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

在初始化后，获取或设置 iframeFix 选项：

// getter
var iframeFix = $( ".selector" ).draggable( "option", "iframeFix" );
 
// setter
$( ".selector" ).draggable( "option", "iframeFix", true );
    

代码实例：

初始化带有指定 opacity 选项的 draggable：

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

在初始化后，获取或设置 opacity 选项：

// getter
var opacity = $( ".selector" ).draggable( "option", "opacity" );
 
// setter
$( ".selector" ).draggable( "option", "opacity", 0.35 );
    

代码实例：

初始化带有指定 refreshPositions 选项的 draggable：

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

在初始化后，获取或设置 refreshPositions 选项：

// getter
var refreshPositions = $( ".selector" ).draggable( "option", "refreshPositions" );
 
// setter
$( ".selector" ).draggable( "option", "refreshPositions", true );
    

支持多个类型：

• Boolean：如果设置为 true，元素总会还原。
• String：如果设置为 "invalid"，还原仅在 draggable 未放置在 droppable 上时发生，如果设置为 "valid" 则相反。
• Function：一个函数，确定元素是否还原到它的开始位置。该函数必须返回 true 才能还原元素。

代码实例：

初始化带有指定 revert 选项的 draggable：

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

在初始化后，获取或设置 revert 选项：

// getter
var revert = $( ".selector" ).draggable( "option", "revert" );
 
// setter
$( ".selector" ).draggable( "option", "revert", true );
    

代码实例：

初始化带有指定 revertDuration 选项的 draggable：

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

在初始化后，获取或设置 revertDuration 选项：

// getter
var revertDuration = $( ".selector" ).draggable( "option", "revertDuration" );
 
// setter
$( ".selector" ).draggable( "option", "revertDuration", 200 );
    

代码实例：

初始化带有指定 scope 选项的 draggable：

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

在初始化后，获取或设置 scope 选项：

// getter
var scope = $( ".selector" ).draggable( "option", "scope" );
 
// setter
$( ".selector" ).draggable( "option", "scope", "tasks" );
    

代码实例：

初始化带有指定 scroll 选项的 draggable：

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

在初始化后，获取或设置 scroll 选项：

// getter
var scroll = $( ".selector" ).draggable( "option", "scroll" );
 
// setter
$( ".selector" ).draggable( "option", "scroll", false );
    

代码实例：

初始化带有指定 scrollSensitivity 选项的 draggable：

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

在初始化后，获取或设置 scrollSensitivity 选项：

// getter
var scrollSensitivity = $( ".selector" ).draggable( "option", "scrollSensitivity" );
 
// setter
$( ".selector" ).draggable( "option", "scrollSensitivity", 100 );
    

代码实例：

初始化带有指定 scrollSpeed 选项的 draggable：

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

在初始化后，获取或设置 scrollSpeed 选项：

// getter
var scrollSpeed = $( ".selector" ).draggable( "option", "scrollSpeed" );
 
// setter
$( ".selector" ).draggable( "option", "scrollSpeed", 100 );
    

支持多个类型：

• Boolean：当设置为 true 时，元素会对齐到其它可拖拽（draggable ）元素。
• Selector：一个选择器，指定要对齐到哪个元素。

代码实例：

初始化带有指定 snap 选项的 draggable：

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

在初始化后，获取或设置 snap 选项：

// getter
var snap = $( ".selector" ).draggable( "option", "snap" );
 
// setter
$( ".selector" ).draggable( "option", "snap", true );
    

代码实例：

初始化带有指定 snapMode 选项的 draggable：

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

在初始化后，获取或设置 snapMode 选项：

// getter
var snapMode = $( ".selector" ).draggable( "option", "snapMode" );
 
// setter
$( ".selector" ).draggable( "option", "snapMode", "inner" );
    

代码实例：

初始化带有指定 snapTolerance 选项的 draggable：

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

在初始化后，获取或设置 snapTolerance 选项：

// getter
var snapTolerance = $( ".selector" ).draggable( "option", "snapTolerance" );
 
// setter
$( ".selector" ).draggable( "option", "snapTolerance", 30 );
    

代码实例：

初始化带有指定 stack 选项的 draggable：

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

在初始化后，获取或设置 stack 选项：

// getter
var stack = $( ".selector" ).draggable( "option", "stack" );
 
// setter
$( ".selector" ).draggable( "option", "stack", ".products" );
    

代码实例：

初始化带有指定 zIndex 选项的 draggable：

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

在初始化后，获取或设置 zIndex 选项：

// getter
var zIndex = $( ".selector" ).draggable( "option", "zIndex" );
 
// setter
$( ".selector" ).draggable( "option", "zIndex", 100 );
    

• 该方法不接受任何参数。

代码实例：

调用 destroy 方法：

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

• 该方法不接受任何参数。

代码实例：

调用 disable 方法：

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

• 该方法不接受任何参数。

代码实例：

调用 enable 方法：

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

• optionName
  类型：String
  描述：要获取的选项的名称。

代码实例：

调用该方法：

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

• 该方法不接受任何参数。

代码实例：

调用该方法：

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

• optionName
  类型：String
  描述：要设置的选项的名称。
• value
  类型：Object
  描述：要为选项设置的值。

代码实例：

调用该方法：

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

• options
  类型：Object
  描述：要设置的 option-value 对。

代码实例：

调用该方法：

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

• 该方法不接受任何参数。

代码实例：

调用 widget 方法：

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

• event
  类型：Event
• ui
  类型：Object

注意：ui 对象是空的，这里包含它是为了与其他事件保持一致性。

代码实例：

初始化带有指定 create 回调的 draggable：

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

绑定一个事件监听器到 dragcreate 事件：

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

• event
  类型：Event
• ui
  类型：Object
  • helper
    类型：jQuery
    描述：jQuery 对象，表示被拖拽的助手（helper）。
  • position
    类型：Object
    描述：助手（helper）的当前 CSS 位置，比如 { top, left } 对象。
  • offset
    类型：Object
    描述：助手（helper）的当前偏移位置，比如 { top, left } 对象。

代码实例：

初始化带有指定 drag 回调的 draggable：

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

绑定一个事件监听器到 drag 事件：

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

• event
  类型：Event
• ui
  类型：Object
  • helper
    类型：jQuery
    描述：jQuery 对象，表示被拖拽的助手（helper）。
  • position
    类型：Object
    描述：助手（helper）的当前 CSS 位置，比如 { top, left } 对象。
  • offset
    类型：Object
    描述：助手（helper）的当前偏移位置，比如 { top, left } 对象。

代码实例：

初始化带有指定 start 回调的 draggable：

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

绑定一个事件监听器到 dragstart 事件：

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

• event
  类型：Event
• ui
  类型：Object
  • helper
    类型：jQuery
    描述：jQuery 对象，表示被拖拽的助手（helper）。
  • position
    类型：Object
    描述：助手（helper）的当前 CSS 位置，比如 { top, left } 对象。
  • offset
    类型：Object
    描述：助手（helper）的当前偏移位置，比如 { top, left } 对象。

代码实例：

初始化带有指定 stop 回调的 draggable：

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

绑定一个事件监听器到 dragstop 事件：

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