交互-拖动

AuxUI 概览，下载、使用，模板示例，二次开发……

交互-拖动

需要加载elemple模块，可通过下列方式加载

    
    //加载example模块
    auxui(['elemple'], function (){
        
    });

在任何DOM元素上启用可拖动功能。通过用鼠标单击可拖动对象并将其拖动到视口中的任何位置来移动它。

拖我走吧



自动滚动

当 draggable 移动到视区外时自动滚动文档。设置 scroll 选项为 true 来启用自动滚动，当滚动触发时进行微调，滚动速度是通过 scrollSensitivity 和 scrollSpeed 选项设置的。

Scroll 设置为 true，默认设置

scrollSensitivity 设置为 100

scrollSpeed 设置为 100



约束拖动

通过定义 draggable 区域的边界来约束每个 draggable 的拖动，设置 axis 选项来限制 draggable 的路径为 x 轴或者 y 轴，或者使用 containment 选项来指定一个父级的 DOM 元素或者一个 jQuery 选择器，比如 'document.'。

我只能垂直拖动

我只能水平拖动

我只能在盒子里拖动

我被约束在父元素内



光标样式

当拖拽对象时定位光标。默认情况下，光标是出现在被拖拽对象的中间，使用 cursorAt 选项来指定相对于 draggable 的另一个位置（指定一个相对于 top、right、bottom、left 的像素值），通过提供一个带有有效的 CSS 光标值的 cursor 选项，来自定义光标的外观。有效的 CSS 光标值包括：default、move、pointer、crosshair，等等。

光标位置总是在中间

光标位置在left -5 和 top -5

光标位置只控制了 'bottom' 值



延迟开始

通过 delay 选项设置延迟开始拖拽的毫秒数。通过 distance 选项设置光标被按下且拖拽指定像素后才允许拖拽。

只有把我拖拽到 50 像素后，拖拽才开始

不管 distance 是多少，都必须拖拽并等待 1000ms 后拖拽才开始




还原位置

当带有布尔值 revert 选项的 draggable 停止拖拽时，返回 draggable（或它的助手）到原始位置。

还原

还原助手




对齐到元素或网格

将可拖动捕捉到DOM元素内部或外部边界，使用snap，snapMode（内部，外部，两者）和snapTolerance（在调用捕捉时，draggable必须来自元素的像素距离）选项，或者将可拖动的按钮捕捉到网格，使用选项设置网格单元的尺寸（高度和宽度，以像素为单位）grid。

我是对齐目标盒子


对齐到所有其他的draggable元素

慢慢移动到盒子内4个边缘

移动到盒子外部边缘

我对齐到一个 20 x 20 网格

我对齐到一个 80 x 80 网格










视觉反馈

给用户提供反馈，就像以助手方式拖拽对象一样。helper 选项接受值 'original'（用光标移动 draggable 对象），'clone'（用光标移动 draggable 的副本），或者一个返回 DOM 元素的函数（该元素在拖拽期间显示在光标附近）,通过 opacity 选项控制助手的透明度。为了区别哪一个 draggable 正在被拖拽，让在运动中的 draggable 保持最前。如果正在拖拽，使用 zIndex 选项来设置助手的高度 z-index，或者使用 stack 选项来确保当停止拖拽时，最后一个被拖拽的项目总是出现在同组其他项目的上面。

原始的

半透明的克隆

自定义助手（与 cursorAt 结合）

我们是 draggables

它的 z-index 是自动控制的

带有 stack 选项



无缝交互

Draggable 与 Sortable 的无缝交互。

  • 请拖拽我到列表中
  • 列表 1
  • 列表 2
  • 列表 3
  • 列表 4
  • 列表 5


事件

draggable 上的 start、drag 和 stop 事件，拖拽开始时触发 start 事件，拖拽期间触发 drag 事件，拖拽停止时触发 stop 事件。

请拖拽我，触发一连串的事件。

  • "start" 被调用 0x
  • "drag" 被调用 0x
  • "stop" 被调用 0x


选项

选项 类型 描述 默认值
addClasses Boolean 如果设置为 false，将阻止 ui-draggable class 被添加。当在数百个元素上调用 .draggable() 时，这么设置有利于性能优化。

true
appendTo jQuery 或 Element 或 Selector 或 String 当拖拽时，draggable 助手（helper）要追加到哪一个元素。

支持多个类型：

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

代码实例：

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

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

 "parent"
axis String 约束在水平轴 (x) 或垂直轴 (y) 上拖拽。可能的值："x", "y"。

代码实例：

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

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

 false
cancel Selector 防止从指定的元素上开始拖拽。

代码实例：

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

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

 "input, textarea, button, select, option"
connectToSortable Selector 允许 draggable 放置在指定的 sortable 上。如果使用了该选项，一个 draggable 可被放置在一个 sortable 列表上，然后成为列表的一部分。注意：helper 选项必须设置为 "clone"，以便更好地工作。必须包含 可排序小部件（Sortable Widget）。

代码实例：

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

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

 false
containment Selector 或 Element 或 String 或 Array 约束在指定元素或区域的边界内拖拽。

支持多个类型：

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

代码实例：

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

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

 false
cursor String 拖拽操作期间的 CSS 光标。

代码实例：

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

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

 "auto"
cursorAt Object 设置拖拽助手（helper）相对于鼠标光标的偏移。坐标可通过一个或两个键的组合成一个哈希给出：{ top, left, right, bottom }。

代码实例：

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

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

 false
delay Number 鼠标按下后直到拖拽开始为止的时间，以毫秒计。该选项可以防止点击在某个元素上时不必要的拖拽。

代码实例：

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

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

 0
disabled Boolean 如果设置为 true，则禁用该 draggable。

代码实例：

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

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

 false
distance Number 鼠标按下后拖拽开始前必须移动的距离，以像素计。该选项可以防止点击在某个元素上时不必要的拖拽。

代码实例：

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

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

 1
grid Array 对齐拖拽助手（helper）到网格，每个 x 和 y 像素。数组形式必须是 [ x, y ]。

代码实例：

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

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

 false
handle Selector 或 Element 如果指定了该选项，则限制开始拖拽，除非鼠标在指定的元素上按下。只有可拖拽（draggable）元素的后代元素才允许被拖拽。

代码实例：

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

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

 false
helper String 或 Function() 允许一个 helper 元素用于拖拽显示。

支持多个类型：

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

代码实例：

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

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

 "original"
iframeFix Boolean 或 Selector 防止拖拽期间 iframes 捕捉鼠标移动（mousemove ）事件。在与 cursorAt 选项结合使用时，或鼠标光标未覆盖在助手（helper）上时，非常有用。

支持多个类型：

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

代码实例：

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

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

 false
opacity Number 当被拖拽时助手（helper）的不透明度。

代码实例：

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

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

 false
refreshPositions Boolean 如果设置为 true，在每次鼠标移动（mousemove）时都会计算所有可放置的位置。注意：这解决了高度动态的问题，但是明显降低了性能。

代码实例：

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

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

 false
revert Boolean 或 String 或 Function() 当拖拽停止时，元素是否还原到它的开始位置。

支持多个类型：

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

代码实例：

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

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

 false
revertDuration Number 还原（revert）动画的持续时间，以毫秒计。如果 revert 选项是 false 则忽略。

代码实例：

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

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

 500
scope String 用于组合配套 draggable 和 droppable 项，除了 droppable 的 accept 选项之外。一个与 droppable 带有相同的 scope 值的 draggable 会被该 droppable 接受。

代码实例：

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

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

 "default"
scroll Boolean 如果设置为 true，当拖拽时容器会自动滚动。

代码实例：

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

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

 true
scrollSensitivity Number 从要滚动的视区边缘起的距离，以像素计。距离是相对于指针的，不是相对于 draggable。如果 scroll 选项是 false 则忽略。

代码实例：

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

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

 20
scrollSpeed Number 当鼠标指针获取到在 scrollSensitivity 距离内时，窗体滚动的速度。如果 scroll 选项是 false 则忽略。

代码实例：

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

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

 20
snap Boolean 或 Selector 元素是否对齐到其他元素。

支持多个类型：

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

代码实例：

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

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

 false
snapMode String 决定 draggable 将对齐到对齐元素的哪个边缘。如果 snap 选项是 false 则忽略。可能的值："inner"、"outer"、"both"。

代码实例：

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

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

 "both"
snapTolerance Number 从要发生对齐的对齐元素边缘起的距离，以像素计。如果 snap 选项是 false 则忽略。

代码实例：

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

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

 20
stack Selector 控制匹配选择器（selector）的元素集合的 z-index，总是在当前拖拽项的前面，在类似窗口管理器这样的事物中非常有用。

代码实例：

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

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

 false
zIndex Number 当被拖拽时，助手（helper）的 Z-index。

代码实例：

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

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

 false

方法

方法 返回 描述
destroy() jQuery (plugin only) 完全移除 draggable 功能。这会把元素返回到它的预初始化状态。
  • 该方法不接受任何参数。

代码实例：

调用 destroy 方法：
disable() jQuery (plugin only) 禁用 draggable。
  • 该方法不接受任何参数。

代码实例：

调用 disable 方法：
enable() jQuery (plugin only) 启用 draggable。
  • 该方法不接受任何参数。

代码实例：

调用 enable 方法：
option( optionName ) Object 获取当前与指定的 optionName 关联的值。
  • optionName
    类型：String
    描述：要获取的选项的名称。

代码实例：

调用该方法：
option() PlainObject 获取一个包含键/值对的对象，键/值对表示当前 draggable 选项哈希。
  • 该方法不接受任何参数。

代码实例：

调用该方法：
option( optionName, value ) jQuery (plugin only) 设置与指定的 optionName 关联的 draggable 选项的值。
  • optionName
    类型：String
    描述：要设置的选项的名称。
  • value
    类型：Object
    描述：要为选项设置的值。

代码实例：

调用该方法：
option( options ) jQuery (plugin only) 为 draggable 设置一个或多个选项。
  • options
    类型：Object
    描述：要设置的 option-value 对。

代码实例：

调用该方法：
widget() jQuery 返回一个包含 draggable 元素的 jQuery 对象。
  • 该方法不接受任何参数。

代码实例：

调用 widget 方法：

事件

事件 类型 描述
create( event, ui ) dragcreate 当 draggable 被创建时触发。
  • event
    类型：Event
  • ui
    类型：Object

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

代码实例：

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

绑定一个事件监听器到 dragcreate 事件：
drag( event, ui ) drag 在拖拽期间当鼠标移动时触发。
  • event
    类型：Event
  • ui
    类型：Object
    • helper
      类型：jQuery
      描述：jQuery 对象，表示被拖拽的助手（helper）。
    • position
      类型：Object
      描述：助手（helper）的当前 CSS 位置，比如 { top, left } 对象。
    • offset
      类型：Object
      描述：助手（helper）的当前偏移位置，比如 { top, left } 对象。

代码实例：

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

绑定一个事件监听器到 drag 事件：
start( event, ui ) dragstart 当拖拽开始时触发。
  • event
    类型：Event
  • ui
    类型：Object
    • helper
      类型：jQuery
      描述：jQuery 对象，表示被拖拽的助手（helper）。
    • position
      类型：Object
      描述：助手（helper）的当前 CSS 位置，比如 { top, left } 对象。
    • offset
      类型：Object
      描述：助手（helper）的当前偏移位置，比如 { top, left } 对象。

代码实例：

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

绑定一个事件监听器到 dragstart 事件：
stop( event, ui ) dragstop 当拖拽停止时触发。
  • event
    类型：Event
  • ui
    类型：Object
    • helper
      类型：jQuery
      描述：jQuery 对象，表示被拖拽的助手（helper）。
    • position
      类型：Object
      描述：助手（helper）的当前 CSS 位置，比如 { top, left } 对象。
    • offset
      类型：Object
      描述：助手（helper）的当前偏移位置，比如 { top, left } 对象。

代码实例：

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

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