Draggable Widget · jQuery UI API 中文文檔 1.10

# Draggable Widget Categories: [Interactions](http://www.css88.com/jquery-ui-api/category/interactions/ "View all posts in Interactions") ## version added: 1.0 **Description:** 該組件可以讓你使用鼠標拖動所有元素。 ## QuickNav[Examples](#entry-examples) ### Options + [addClasses](#option-addClasses) + [appendTo](#option-appendTo) + [axis](#option-axis) + [cancel](#option-cancel) + [connectToSortable](#option-connectToSortable) + [containment](#option-containment) + [cursor](#option-cursor) + [cursorAt](#option-cursorAt) + [delay](#option-delay) + [disabled](#option-disabled) + [distance](#option-distance) + [grid](#option-grid) + [handle](#option-handle) + [helper](#option-helper) + [iframeFix](#option-iframeFix) + [opacity](#option-opacity) + [refreshPositions](#option-refreshPositions) + [revert](#option-revert) + [revertDuration](#option-revertDuration) + [scope](#option-scope) + [scroll](#option-scroll) + [scrollSensitivity](#option-scrollSensitivity) + [scrollSpeed](#option-scrollSpeed) + [snap](#option-snap) + [snapMode](#option-snapMode) + [snapTolerance](#option-snapTolerance) + [stack](#option-stack) + [zIndex](#option-zIndex) ### Methods + [destroy](#method-destroy) + [disable](#method-disable) + [enable](#method-enable) + [option](#method-option) + [widget](#method-widget) ### Events + [create](#event-create) + [drag](#event-drag) + [start](#event-start) + [stop](#event-stop) 讓被選擇元素可以被鼠標拖動。如果你想把元素拖放到另一個元素內部，查看[jQuery UI Droppable plugin](/droppable/),該組件為被拖動元素提供了一個目標容器。 ### Dependencies（依賴性） * [UI Core](/category/ui-core/) * [Widget Factory](/jQuery.widget/) * [Mouse Interaction](/mouse/) ## Options ### addClasses**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:** `true`如果值設置為`false`, `ui-draggable`樣式類將不能被添加引用。當在大量元素上調用`.draggable()`時，你可能會想要這樣設置，作為一個性能優化。**Code examples:** 使用`addClasses`選項初始化Draggable Widget： ``` $( ".selector" ).draggable({ addClasses: false }); ``` 在組件初始化之后，讀取或設置`addClasses`選項 ``` // getter var addClasses = $( ".selector" ).draggable( "option", "addClasses" ); // setter $( ".selector" ).draggable( "option", "addClasses", false ); ``` ### appendTo**Type:** [jQuery](http://api.jquery.com/Types/#jQuery) or [Element](http://api.jquery.com/Types/#Element) or [Selector](http://api.jquery.com/Types/#Selector) or [String](http://api.jquery.com/Types/#String) **Default:** `"parent"`當進行拖動時，拖動組件助手應該被添加到的元素。**支持多種類型:** * **jQuery**: 一個含有要被添加拖動組件助手的元素的Jquery對象。 * **Element**: 要被添加拖動組件助手的元素。 * **Selector**: 一個用來識別要被添加拖動組件助手的元素的選擇器。 * **String**: 字符串`"parent"`將會使拖動組件助手成為組件的同級元素。 **Code examples:** 使用`appendTo`選項初始化Draggable Widget： ``` $( ".selector" ).draggable({ appendTo: "body" }); ``` 在組件初始化之后，讀取或設置`appendTo`選項 ``` // getter var appendTo = $( ".selector" ).draggable( "option", "appendTo" ); // setter $( ".selector" ).draggable( "option", "appendTo", "body" ); ``` ### axis**Type:** [String](http://api.jquery.com/Types/#String) **Default:** `false`約束拖動的動作只能在水平(x軸)或垂直(y軸)上執行。可選值: `"x"`, `"y"`。**Code examples:** 使用`axis`選項初始化Draggable Widget： ``` $( ".selector" ).draggable({ axis: "x" }); ``` 在組件初始化之后，讀取或設置`axis`選項： ``` // getter var axis = $( ".selector" ).draggable( "option", "axis" ); // setter $( ".selector" ).draggable( "option", "axis", "x" ); ``` ### cancel**Type:** [Selector](http://api.jquery.com/Types/#Selector) **Default:** `"input,textarea,button,select,option"`防止在指定元素上開始拖動。**Code examples:** 使用`cancel`選項初始化Draggable Widget： ``` $( ".selector" ).draggable({ cancel: ".title" }); ``` 在組件初始化之后，讀取或設置`cancel`選項： ``` // getter var cancel = $( ".selector" ).draggable( "option", "cancel" ); // setter $( ".selector" ).draggable( "option", "cancel", ".title" ); ``` ### connectToSortable**Type:** [Selector](http://api.jquery.com/Types/#Selector) **Default:** `false`允許draggable被拖拽到指定的sortables中。如果使用了該選項，被拖動的元素可以被放置于一個應用了排序組件的元素列表中并成為該列表的一部分。注意: 為了完美的使用該特性，[`helper`](#option-helper)選項必須被設置為`"clone"`。必須包含[jQuery UI 排序組件](/sortable/)。**Code examples:** 使用`connectToSortable`選項初始化Draggable Widget： ``` $( ".selector" ).draggable({ connectToSortable: "#my-sortable" }); ``` 在組件初始化之后，讀取或設置`connectToSortable`選項： ``` // getter var connectToSortable = $( ".selector" ).draggable( "option", "connectToSortable" ); // setter $( ".selector" ).draggable( "option", "connectToSortable", "#my-sortable" ); ``` ### containment**Type:** [Selector](http://api.jquery.com/Types/#Selector) or [Element](http://api.jquery.com/Types/#Element) or [String](http://api.jquery.com/Types/#String) or [Array](http://api.jquery.com/Types/#Array) **Default:** `false`可以限制draggable只能在指定的元素或區域的邊界以內進行拖動。**支持多種類型:** * **Selector**: 可拖動元素將被置于由選擇器指定的第一個元素的起界限作用的盒模型中。如果沒有找到任何元素，則不會設置界限。 * **Element**: 可拖動的元素將包含該元素的邊界框。 * **String**:可選值: `"parent"`, `"document"`, `"window"`. * **Array**: 以 `[ x1, y1, x2, y2 ]` 數組形式定義一個限制區域. **Code examples:** 使用`containment`選項初始化Draggable Widget： ``` $( ".selector" ).draggable({ containment: "parent" }); ``` 在組件初始化之后，讀取或設置`containment`選項： ``` // getter var containment = $( ".selector" ).draggable( "option", "containment" ); // setter $( ".selector" ).draggable( "option", "containment", "parent" ); ``` ### cursor**Type:** [String](http://api.jquery.com/Types/#String) **Default:** `"auto"`指定在做拖拽動作時，鼠標的CSS樣式。**Code examples:** 使用`cursor`選項初始化Draggable Widget： ``` $( ".selector" ).draggable({ cursor: "crosshair" }); ``` 在組件初始化之后，讀取或設置`cursor`選項： ``` // getter var cursor = $( ".selector" ).draggable( "option", "cursor" ); // setter $( ".selector" ).draggable( "option", "cursor", "crosshair" ); ``` ### cursorAt**Type:** [Object](http://api.jquery.com/Types/#Object) **Default:** `false`設置拖動幫手相對于鼠標光標的偏移量。坐標可被指定為一個散列使用的組合中的一個或兩個鍵：`{ top, left, right, bottom }` 。**Code examples:** 使用`cursorAt`選項初始化Draggable Widget： ``` $( ".selector" ).draggable({ cursorAt: { left: 5 } }); ``` 在組件初始化之后，讀取或設置`cursorAt`選項： ``` // getter var cursorAt = $( ".selector" ).draggable( "option", "cursorAt" ); // setter $( ".selector" ).draggable( "option", "cursorAt", { left: 5 } ); ``` ### delay**Type:** [Number](http://api.jquery.com/Types/#Number) **Default:** `0`當鼠標按下后，指定時延遲間后才開始激活拖拽動作（單位：毫秒）。此選項可用來阻止當點擊一個元素時可能發生的非期望拖動行為。**Code examples:** 使用`delay`選項初始化Draggable Widget： ``` $( ".selector" ).draggable({ delay: 300 }); ``` 在組件初始化之后，讀取或設置`delay`選項： ``` // getter var delay = $( ".selector" ).draggable( "option", "delay" ); // setter $( ".selector" ).draggable( "option", "delay", 300 ); ``` ### disabled**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:** `false`如果該值設置為`true`，拖動特效將被禁用。**Code examples:** 使用`disabled`選項初始化Draggable Widget： ``` $( ".selector" ).draggable({ disabled: true }); ``` 在組件初始化之后，讀取或設置`disabled`選項： ``` // getter var disabled = $( ".selector" ).draggable( "option", "disabled" ); // setter $( ".selector" ).draggable( "option", "disabled", true ); ``` ### distance**Type:** [Number](http://api.jquery.com/Types/#Number) **Default:** `1`當鼠標點下后，只有移動指定像素后才開始激活拖拽動作，單位為像素。此選項可用來阻止當點擊一個元素時可能發生的非期望拖動行為。**Code examples:** 使用`distance`選項初始化Draggable Widget： ``` $( ".selector" ).draggable({ distance: 10 }); ``` 在組件初始化之后，讀取或設置`distance`選項： ``` // getter var distance = $( ".selector" ).draggable( "option", "distance" ); // setter $( ".selector" ).draggable( "option", "distance", 10 ); ``` ### grid**Type:** [Array](http://api.jquery.com/Types/#Array) **Default:** `false`拖拽元素時，只能以指定大小的方格進行拖動。數組形式為`[ x, y ]`。**Code examples:** 使用`grid`選項初始化Draggable Widget： ``` $( ".selector" ).draggable({ grid: [ 50, 20 ] }); ``` 在組件初始化之后，讀取或設置`grid` 選項: ``` // getter var grid = $( ".selector" ).draggable( "option", "grid" ); // setter $( ".selector" ).draggable( "option", "grid", [ 50, 20 ] ); ``` ### handle**Type:** [Selector](http://api.jquery.com/Types/#Selector) or [Element](http://api.jquery.com/Types/#Element) **Default:** `false`當參數值為true時,只有在特定的元素上觸發鼠標按下事件時，才可以拖動。只有被拖到元素的子元素才可以應用該參數。**Code examples:** 使用`handle`選項初始化Draggable Widget： ``` $( ".selector" ).draggable({ handle: "h2" }); ``` 在組件初始化之后，讀取或設置`handle` 選項: ``` // getter var handle = $( ".selector" ).draggable( "option", "handle" ); // setter $( ".selector" ).draggable( "option", "handle", "h2" ); ``` ### helper**Type:** [String](http://api.jquery.com/Types/#String) or [Function](http://api.jquery.com/Types/#Function)() **Default:** `"original"`允許一個元素被用來進行拖動。**支持多種類型:** * **String**:如果值設置為`"clone"`, 那么該元素將會被復制，并且被復制的元素將被拖動。 * **Function**: 當拖動時，函數將返回一個DOM元素以供使用。 **Code examples:** 使用`helper`選項初始化Draggable Widget： ``` $( ".selector" ).draggable({ helper: "clone" }); ``` 在組件初始化之后，讀取或設置`helper` 選項: ``` // getter var helper = $( ".selector" ).draggable( "option", "helper" ); // setter $( ".selector" ).draggable( "option", "helper", "clone" ); ``` ### iframeFix**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) or [Selector](http://api.jquery.com/Types/#Selector) **Default:** `false`在拖動期間阻止iframe捕捉鼠標移過事件。與[`cursorAt`](#option-cursorAt)選項搭配使用時或者當鼠標指針可能不在拖動助手元素之上時，該參數非常有用。**支持多種類型:** * **Boolean**: 當設置為`true`, 透明層將被放置于頁面上的所有iframe之上。/li> * **Selector**: 任何由選擇器匹配的iframe將被透明層覆蓋。 **Code examples:** 使用`iframeFix`選項初始化Draggable Widget： ``` $( ".selector" ).draggable({ iframeFix: true }); ``` 在組件初始化之后，讀取或設置`iframeFix` 選項: ``` // getter var iframeFix = $( ".selector" ).draggable( "option", "iframeFix" ); // setter $( ".selector" ).draggable( "option", "iframeFix", true ); ``` ### opacity**Type:** [Number](http://api.jquery.com/Types/#Number) **Default:** `false`當拖動時，拖動助手元素的不透明度。**Code examples:** 使用`opacity`選項初始化Draggable Widget： ``` $( ".selector" ).draggable({ opacity: 0.35 }); ``` 在組件初始化之后，讀取或設置`opacity` 選項: ``` // getter var opacity = $( ".selector" ).draggable( "option", "opacity" ); // setter $( ".selector" ).draggable( "option", "opacity", 0.35 ); ``` ### refreshPositions**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:** `false`如果設置為`true`，所有的可拖動位置在每次鼠標移動時都會被計算。 _注意: 這解決了具有高度動態內容頁面的問題，但是卻降低了性能。_**Code examples:** 使用`refreshPositions`選項初始化Draggable Widget： ``` $( ".selector" ).draggable({ refreshPositions: true }); ``` 在組件初始化之后，讀取或設置`refreshPositions` 選項: ``` // getter var refreshPositions = $( ".selector" ).draggable( "option", "refreshPositions" ); // setter $( ".selector" ).draggable( "option", "refreshPositions", true ); ``` ### revert**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) or [String](http://api.jquery.com/Types/#String) **Default:** `false`當拖動停止時，元素是否要被重置到它的初始位置。**支持多種類型:** * **Boolean**: 如果設置為`true`，當拖動停止時，元素位置將被重置。 * **String**: 如果設置為`"invalid"`, 重置僅當拖動沒有被放置于一個可放置的對象時才會發生。如果設置為`"valid"`, 情況則相反。 **Code examples:** 使用`revert`選項初始化Draggable Widget： ``` $( ".selector" ).draggable({ revert: true }); ``` 在組件初始化之后，讀取或設置`revert` 選項: ``` // getter var revert = $( ".selector" ).draggable( "option", "revert" ); // setter $( ".selector" ).draggable( "option", "revert", true ); ``` ### revertDuration**Type:** [Number](http://api.jquery.com/Types/#Number) **Default:** `500`動畫重置時間, 單位為微秒。如果[`revert`](#option-revert)選項設置為`false`，則忽略（譯者注：即被拖到元素不會被重置。）。**Code examples:** 使用`revertDuration`選項初始化Draggable Widget： ``` $( ".selector" ).draggable({ revertDuration: 200 }); ``` 在組件初始化之后，讀取或設置`revertDuration` 選項: ``` // getter var revertDuration = $( ".selector" ).draggable( "option", "revertDuration" ); // setter $( ".selector" ).draggable( "option", "revertDuration", 200 ); ``` ### scope**Type:** [String](http://api.jquery.com/Types/#String) **Default:** `"default"`被用來將拖動組件和拖動至容器組件的參數進行分組, 除了拖動至容器組件的[`accept`](/droppable#option-accept)選項。如果一個一般拖動組件的`scope`參數值和一個拖動至容器組件的`scope`參數值一樣，那么這個一般拖動組件將被接受為拖動至容器組件。**Code examples:** 使用`scope`選項初始化Draggable Widget： ``` $( ".selector" ).draggable({ scope: "tasks" }); ``` 在組件初始化之后，讀取或設置`scope` 選項: ``` // getter var scope = $( ".selector" ).draggable( "option", "scope" ); // setter $( ".selector" ).draggable( "option", "scope", "tasks" ); ``` ### scroll**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) **Default:** `true`如果設置為`true`, 當拖動時，div盒模型將自動翻滾。**Code examples:** 使用`scroll`選項初始化Draggable Widget： ``` $( ".selector" ).draggable({ scroll: false }); ``` 在組件初始化之后，讀取或設置`scroll` 選項: ``` // getter var scroll = $( ".selector" ).draggable( "option", "scroll" ); // setter $( ".selector" ).draggable( "option", "scroll", false ); ``` ### scrollSensitivity**Type:** [Number](http://api.jquery.com/Types/#Number) **Default:** `20`離開可視區域邊緣多少距離開始滾動。距離是相對指針進行計算的，而不是被拖到元素本身。如果[`scroll`](#option-scroll) 選項設置為`false`，則不滾動。**Code examples:** 使用`scrollSensitivity`選項初始化Draggable Widget： ``` $( ".selector" ).draggable({ scrollSensitivity: 100 }); ``` 在組件初始化之后，讀取或設置`scrollSensitivity` 選項: ``` // getter var scrollSensitivity = $( ".selector" ).draggable( "option", "scrollSensitivity" ); // setter $( ".selector" ).draggable( "option", "scrollSensitivity", 100 ); ``` ### scrollSpeed**Type:** [Number](http://api.jquery.com/Types/#Number) **Default:** `20`當鼠標指針的值小于[`scrollSensitivity`](#option-scrollSensitivity)的值時，窗口滾動的速度。如果[`scroll`](#option-scroll)選項設置為`false`，則該參數無效。**Code examples:** 使用`scrollSpeed`選項初始化Draggable Widget： ``` $( ".selector" ).draggable({ scrollSpeed: 100 }); ``` 在組件初始化之后，讀取或設置`scrollSpeed` 選項: ``` // getter var scrollSpeed = $( ".selector" ).draggable( "option", "scrollSpeed" ); // setter $( ".selector" ).draggable( "option", "scrollSpeed", 100 ); ``` ### snap**Type:** [Boolean](http://api.jquery.com/Types/#Boolean) or [Selector](http://api.jquery.com/Types/#Selector) **Default:** `false`決定一個元素是否應該吸附到其它元素上。**支持多種類型:** * **Boolean**: 當設置為 `true`時, 元素將可以吸附到所有其它可拖動元素上。 * **Selector**: 確定被吸附元素。 **Code examples:** 使用`snap`選項初始化Draggable Widget： ``` $( ".selector" ).draggable({ snap: true }); ``` 在組件初始化之后，讀取或設置`snap` 選項: ``` // getter var snap = $( ".selector" ).draggable( "option", "snap" ); // setter $( ".selector" ).draggable( "option", "snap", true ); ``` ### snapMode**Type:** [String](http://api.jquery.com/Types/#String) **Default:** `"both"`決定可拖動元素將要吸附到哪個元素的邊緣。如果[`snap`](#option-snap)選項設置為`false`，則忽略該參數。可選值: `"inner"`, `"outer"`, `"both"`.**Code examples:** 使用`snapMode`選項初始化Draggable Widget： ``` $( ".selector" ).draggable({ snapMode: "inner" }); ``` 在組件初始化之后，讀取或設置`snapMode` 選項: ``` // getter var snapMode = $( ".selector" ).draggable( "option", "snapMode" ); // setter $( ".selector" ).draggable( "option", "snapMode", "inner" ); ``` ### snapTolerance**Type:** [Number](http://api.jquery.com/Types/#Number) **Default:** `20`當距離可吸附元素多遠時，觸發吸附事件。如果[`snap`](#option-snap)選項設置為`false`，則忽略該參數。**Code examples:** 使用`snapTolerance`選項初始化Draggable Widget： ``` $( ".selector" ).draggable({ snapTolerance: 30 }); ``` 在組件初始化之后，讀取或設置`snapTolerance` 選項: ``` // getter var snapTolerance = $( ".selector" ).draggable( "option", "snapTolerance" ); // setter $( ".selector" ).draggable( "option", "snapTolerance", 30 ); ``` ### stack**Type:** [Selector](http://api.jquery.com/Types/#Selector) **Default:** `false`控制由選擇器所觸發的一系列元素的z-index值, 總是將當前被拖動對象至于最前。對于像窗口管理這樣的應用來說，非常有用。**Code examples:** 使用`stack`選項初始化Draggable Widget： ``` $( ".selector" ).draggable({ stack: ".products" }); ``` 在組件初始化之后，讀取或設置`stack` 選項: ``` // getter var stack = $( ".selector" ).draggable( "option", "stack" ); // setter $( ".selector" ).draggable( "option", "stack", ".products" ); ``` ### zIndex**Type:** [Number](http://api.jquery.com/Types/#Number) **Default:** `false`當被拖動時，拖動助手的Z-index值。**Code examples:** 使用`zIndex`選項初始化Draggable Widget： ``` $( ".selector" ).draggable({ zIndex: 100 }); ``` 在組件初始化之后，讀取或設置`zIndex` 選項: ``` // getter var zIndex = $( ".selector" ).draggable( "option", "zIndex" ); // setter $( ".selector" ).draggable( "option", "zIndex", 100 ); ``` ## Methods ### destroy() 完全銷毀一般拖動組件的功能，這將使元素返回它的初始狀態。 * 這個方法不接受任何參數。 **Code examples:** 請求destroy方法: ``` $( ".selector" ).draggable( "destroy" ); ``` ### disable() 禁用一般拖動組件。 * 這個方法不接受任何參數。 **Code examples:** 請求disable方法: ``` $( ".selector" ).draggable( "disable" ); ``` ### enable() 啟用一般拖動組件。 * 這個方法不接受任何參數。 **Code examples:** 請求enable方法: ``` $( ".selector" ).draggable( "enable" ); ``` ### option( optionName )Returns: [Object](http://api.jquery.com/Types/#Object) 獲取與`optionName`對應的參數值。 * **optionName**Type: [String](http://api.jquery.com/Types/#String)要獲取的值所對應的選項的名稱。 **Code examples:** 請求方法: ``` var isDisabled = $( ".selector" ).draggable( "option", "disabled" ); ``` ### option()Returns: [PlainObject](http://api.jquery.com/Types/#PlainObject) 獲取一個包含有描述當前一般拖動組件選項哈希值的鍵/值對。 * 這個方法不接受任何參數。 **Code examples:** 請求方法: ``` var options = $( ".selector" ).draggable( "option" ); ``` ### option( optionName, value ) 設置一般拖動組件選項的值，選項名稱由`optionName`指定。 * **optionName**Type: [String](http://api.jquery.com/Types/#String)要設置的選項的名稱。 * **value**Type: [Object](http://api.jquery.com/Types/#Object)要為選項設置的參數值。 **Code examples:** 請求方法: ``` $( ".selector" ).draggable( "option", "disabled", true ); ``` ### option( options ) 為一般拖動組件設置一個或多個選項值。 * **options**Type: [Object](http://api.jquery.com/Types/#Object)要設置的選項與值之間的映射關系。 **Code examples:** 請求方法: ``` $( ".selector" ).draggable( "option", { disabled: true } ); ``` ### widget()Returns: [jQuery](http://api.jquery.com/Types/#jQuery) 返回一個包含有可拖動元素的`jQuery`對象。 * 這個方法不接受任何參數。 **Code examples:** 請求widget方法: ``` var widget = $( ".selector" ).draggable( "widget" ); ``` ## Events ### create( event, ui )Type: `dragcreate` 當一般拖動組件被創建時觸發。 * **event**Type: [Event](http://api.jquery.com/Types/#Event) * **ui**Type: [Object](http://api.jquery.com/Types/#Object) _注意: `ui`對象是空的，但是為了與其它元素保持一直，它總是被包含。_ **Code examples:** 使用create回調函數指定事件: ``` $( ".selector" ).draggable({ create: function( event, ui ) {} }); ``` 綁定一個事件監聽器到dragcreate事件: ``` $( ".selector" ).on( "dragcreate", function( event, ui ) {} ); ``` ### drag( event, ui )Type: `drag` 當鼠標在拖動過程中移動時觸發。 * **event**Type: [Event](http://api.jquery.com/Types/#Event) * **ui**Type: [Object](http://api.jquery.com/Types/#Object) * **helper**Type: [jQuery](http://api.jquery.com/Types/#jQuery)代表被拖動的元素。 * **position**Type: [Object](http://api.jquery.com/Types/#Object)當前元素的CSS位置，以`{ top, left }`形式給出。 * **offset**Type: [Object](http://api.jquery.com/Types/#Object)當前元素的偏移位置，以`{ top, left }`形式給出。 **Code examples:** 使用drag回調函數指定事件: ``` $( ".selector" ).draggable({ drag: function( event, ui ) {} }); ``` 綁定一個事件監聽者到drag事件: ``` $( ".selector" ).on( "drag", function( event, ui ) {} ); ``` ### start( event, ui )Type: `dragstart` 當拖動開始時觸發。 * **event**Type: [Event](http://api.jquery.com/Types/#Event) * **ui**Type: [Object](http://api.jquery.com/Types/#Object) * **helper**Type: [jQuery](http://api.jquery.com/Types/#jQuery)代表被拖動的元素。 * **position**Type: [Object](http://api.jquery.com/Types/#Object)當前元素的CSS位置，以`{ top, left }`形式給出。 * **offset**Type: [Object](http://api.jquery.com/Types/#Object)當前元素的偏移位置，以`{ top, left }`形式給出。 **Code examples:** 使用start callback specified: ``` $( ".selector" ).draggable({ start: function( event, ui ) {} }); ``` 拖動事件綁定一個事件監聽器： ``` $( ".selector" ).on( "dragstart", function( event, ui ) {} ); ``` ### stop( event, ui )Type: `dragstop` 當拖動停止時觸發。 * **event**Type: [Event](http://api.jquery.com/Types/#Event) * **ui**Type: [Object](http://api.jquery.com/Types/#Object) * **helper**Type: [jQuery](http://api.jquery.com/Types/#jQuery)代表被拖動的元素。 * **position**Type: [Object](http://api.jquery.com/Types/#Object)當前元素的CSS位置，以`{ top, left }`形式給出。 * **offset**Type: [Object](http://api.jquery.com/Types/#Object)當前元素的偏移位置，以`{ top, left }`形式給出。 **Code examples:** 使用start回調函數指定事件: ``` $( ".selector" ).draggable({ stop: function( event, ui ) {} }); ``` 綁定一個事件監聽者到dragstart事件: ``` $( ".selector" ).on( "dragstop", function( event, ui ) {} ); ``` ## Example: #### 一個簡單的jQuery UI一般拖動 ``` <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>draggable demo</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css"> <style> #draggable { width: 100px; height: 100px; background: #ccc; } </style> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> </head> <body> <div id="draggable">Drag me</div> <script> $( "#draggable" ).draggable(); </script> </body> </html> ```