Macro Da

每天学一点,成长多一点!

jQuery.UI的Draggable(拖动)、Droppable(放置)功能组件参数、事件和方法说明

Draggable(拖动)

1、参数(Options)

选项类型描述默认值
addClassesBoolean如果设置为 false,将阻止 ui-draggable class 被添加。当在数百个元素上调用 .draggable() 时,这么设置有利于性能优化。true
appendTojQuery 或 Element 或 Selector 或 String当拖拽时,draggable 助手(helper)要追加到哪一个元素。

支持多个类型:

  • jQuery:一个 jQuery 对象,包含助手(helper)要追加到的元素。
  • Element:要追加助手(helper)的元素。
  • Selector:一个选择器,指定哪一个元素要追加助手(helper)。
  • String:字符串 "parent" 将促使助手(helper)成为 draggable 的同级。
"parent"
axisString约束在水平轴 (x) 或垂直轴 (y) 上拖拽。可能的值:"x", "y"false
cancelSelector防止从指定的元素上开始拖拽。"input, textarea, button, select, option"
connectToSortableSelector允许 draggable 放置在指定的 sortable 上。如果使用了该选项,一个 draggable 可被放置在一个 sortable 列表上,然后成为列表的一部分。注意:helper 选项必须设置为 "clone",以便更好地工作。必须包含 可排序小部件(Sortable Widget)。       false
containmentSelector 或 Element 或 String 或 Array约束在指定元素或区域的边界内拖拽。
支持多个类型:
  • Selector:可拖拽元素将被包含在 selector 第一个元素的边界内。如果未找到元素,则不设置 containment。
  • Element:可拖拽元素将被包含在元素的边界。
  • String:可能的值:"parent""document""window"
  • Array:一个数组, 以形式 [ x1, y1, x2, y2 ] 定义元素的边界。
false
cursorString拖拽操作期间的 CSS 光标。"auto"
cursorAtObject设置拖拽助手(helper)相对于鼠标光标的偏移。坐标可通过一个或两个键的组合成一个哈希给出:{ top, left, right, bottom }false
delayNumber鼠标按下后直到拖拽开始为止的时间,以毫秒计。该选项可以防止点击在某个元素上时不必要的拖拽。0
disabledBoolean如果设置为 true,则禁用该 draggable。false
distanceNumber鼠标按下后拖拽开始前必须移动的距离,以像素计。该选项可以防止点击在某个元素上时不必要的拖拽。1
gridArray对齐拖拽助手(helper)到网格,每个 x 和 y 像素。数组形式必须是 [ x, y ]false
handleSelector 或 Element如果指定了该选项,则限制开始拖拽,除非鼠标在指定的元素上按下。只有可拖拽(draggable)元素的后代元素才允许被拖拽。false
helperString 或 Function()允许一个 helper 元素用于拖拽显示。

支持多个类型:

  • String:如果设置为 "clone",元素将被克隆,且克隆将被拖拽。
  • Function:一个函数,将返回拖拽时要使用的 DOMElement。     
"original"
iframeFixBoolean 或 Selector防止拖拽期间 iframes 捕捉鼠标移动(mousemove )事件。在与 cursorAt 选项结合使用时,或鼠标光标未覆盖在助手(helper)上时,非常有用。

支持多个类型:

  • Boolean:当设置为 true 时,透明遮罩将被放置在页面上所有 iframes 上。
  • Selector:匹配 selector 的任意 iframes 将被透明遮罩覆盖。     
false
opacityNumber当被拖拽时助手(helper)的不透明度。false
refreshPositionsBoolean如果设置为 true,在每次鼠标移动(mousemove)时都会计算所有可放置的位置。注意:这解决了高度动态的问题,但是明显降低了性能。false
revertBoolean 或 String 或 Function()当拖拽停止时,元素是否还原到它的开始位置。

支持多个类型:

  • Boolean:如果设置为 true,元素总会还原。
  • String:如果设置为 "invalid",还原仅在 draggable 未放置在 droppable 上时发生,如果设置为 "valid" 则相反。
  • Function:一个函数,确定元素是否还原到它的开始位置。该函数必须返回 true 才能还原元素。     
false
revertDurationNumber还原(revert)动画的持续时间,以毫秒计。如果 revert 选项是 false 则忽略。500
scopeString用于组合配套 draggable 和 droppable 项,除了 droppable 的 accept 选项之外。一个与 droppable 带有相同的 scope 值的 draggable 会被该 droppable 接受。"default"
scrollBoolean如果设置为 true,当拖拽时容器会自动滚动。true
scrollSensitivityNumber从要滚动的视区边缘起的距离,以像素计。距离是相对于指针的,不是相对于 draggable。如果 scroll 选项是 false 则忽略。     20
scrollSpeedNumber当鼠标指针获取到在 scrollSensitivity 距离内时,窗体滚动的速度。如果 scroll 选项是 false 则忽略。20
snapBoolean 或 Selector元素是否对齐到其他元素。

支持多个类型:

  • Boolean:当设置为 true 时,元素会对齐到其它可拖拽(draggable )元素。
  • Selector:一个选择器,指定要对齐到哪个元素。     
false
snapModeString决定 draggable 将对齐到对齐元素的哪个边缘。如果 snap 选项是 false 则忽略。可能的值:"inner""outer""both""both"
snapToleranceNumber从要发生对齐的对齐元素边缘起的距离,以像素计。如果 snap 选项是 false 则忽略。20
stackSelector控制匹配选择器(selector)的元素集合的 z-index,总是在当前拖拽项的前面,在类似窗口管理器这样的事物中非常有用。false
zIndexNumber当被拖拽时,助手(helper)的 Z-index。false

2、事件(Events)

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

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

drag( event, ui )drag在拖拽期间当鼠标移动时触发。
  • event
    类型:Event
  • ui
    类型:Object
    • helper
      类型:jQuery
      描述:jQuery 对象,表示被拖拽的助手(helper)。
    • position
      类型:Object
      描述:助手(helper)的当前 CSS 位置,比如 { top, left } 对象。
    • offset
      类型:Object
      描述:助手(helper)的当前偏移位置,比如 { top, left } 对象。
start( event, ui )dragstart当拖拽开始时触发。
  • event
    类型:Event
  • ui
    类型:Object
    • helper
      类型:jQuery
      描述:jQuery 对象,表示被拖拽的助手(helper)。
    • position
      类型:Object
      描述:助手(helper)的当前 CSS 位置,比如 { top, left } 对象。
    • offset
      类型:Object
      描述:助手(helper)的当前偏移位置,比如 { top, left } 对象。
stop( event, ui )dragstop当拖拽停止时触发。
  • event
    类型:Event
  • ui
    类型:Object
    • helper
      类型:jQuery
      描述:jQuery 对象,表示被拖拽的助手(helper)。
    • position
      类型:Object
      描述:助手(helper)的当前 CSS 位置,比如 { top, left } 对象。
    • offset
      类型:Object
      描述:助手(helper)的当前偏移位置,比如 { top, left } 对象。

3、方法(Methods)

方法返回描述
destroy()jQuery (plugin only)完全移除 draggable 功能。这会把元素返回到它的预初始化状态。
  • 该方法不接受任何参数。     
disable()jQuery (plugin only)禁用 draggable。
  • 该方法不接受任何参数。     
enable()jQuery (plugin only)启用 draggable。
  • 该方法不接受任何参数。     
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 对象。
  • 该方法不接受任何参数。

Droppable(放置)

1、参数(Options)

选项类型描述默认值
acceptSelector 或 Function()控制哪个可拖拽(draggable)元素可被 droppable 接受。

支持多个类型:

  • Selector:一个选择器,指定哪个可拖拽(draggable)元素可被 droppable 接受。
  • Function():一个函数,将被页面上每个 draggable 调用(作为第一个参数传递给函数)。如果 draggable 被接受,该函数必须返回 true     
"*"
activeClassString如果指定了该选项,当一个可接受的 draggable 被拖拽时,class 将被添加到 droppable。false
addClassesBoolean如果设置为 false,将防止 ui-droppable class 被添加。这在数百个元素上调用 .droppable() 时有助于性能优化。true
disabledBoolean如果设置为 true,则禁用该 droppable。false
greedyBoolean默认情况下,当一个元素被放置在嵌套是 droppable 上时,每个 droppable 将接收该元素。然而,通过设置该选项为 true,任何父元素的 droppable 将无法接收该元素。 drop 事件仍将照常,但会检查 event.target 以便查看哪个 droppable 接收 draggable 元素。false
hoverClassString如果指定了该选项,当一个可接受 draggable 被覆盖在 droppable 上时,class 将被添加到 droppable。false
scopeString用于组合配套 draggable 和 droppable 项,除了 droppable 的 accept 选项之外。一个与 droppable 带有相同的 scope 值的 draggable 会被该 droppable 接受。"default"
toleranceString指定用于测试一个 draggable 是否覆盖在一个 droppable 上的模式。可能的值:
  • "fit":draggable 完全重叠在 droppable 上。
  • "intersect":draggable 重叠在 droppable 上,两个方向上至少 50%。
  • "pointer":鼠标指针重叠在 droppable 上。
  • "touch":draggable 重叠在 droppable 上,任何数量皆可。
"intersect"

2、事件(Events)

事件类型描述
activate( event, ui )dropactivate当一个可接受的 draggable 开始拖拽时触发。如果您想让 droppable 被放置时"点亮",该选项就可以派上用场。
  • event
    类型:Event
  • ui
    类型:Object
    • draggable
      类型:jQuery
      描述:jQuery 对象,表示 draggable 元素。
    • helper
      类型:jQuery
      描述:jQuery 对象,表示被拖拽的助手(helper)。
    • position
      类型:Object
      描述:draggable 助手(helper)的当前 CSS 位置,比如 { top, left } 对象。
    • offset
      类型:Object
      描述:draggable 助手(helper)的当前偏移位置,比如 { top, left } 对象。
create( event, ui )dropcreate当 droppable 被创建时触发。
  • event
    类型:Event
  • ui
    类型:Object

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

deactivate( event, ui )dropdeactivate当一个可接受的 draggable 停止拖拽时触发。
  • event
    类型:Event
  • ui
    类型:Object
    • draggable
      类型:jQuery
      描述:jQuery 对象,表示 draggable 元素。
    • helper
      类型:jQuery
      描述:jQuery 对象,表示被拖拽的助手(helper)。
    • position
      类型:Object
      描述:draggable 助手(helper)的当前 CSS 位置,比如 { top, left } 对象。
    • offset
      类型:Object
      描述:draggable 助手(helper)的当前偏移位置,比如 { top, left } 对象。
drop( event, ui )drop当一个可接受的 draggable 被放置在 droppable(基于 tolerance 选项)上时触发。
  • event
    类型:Event
  • ui
    类型:Object
    • draggable
      类型:jQuery
      描述:jQuery 对象,表示 draggable 元素。
    • helper
      类型:jQuery
      描述:jQuery 对象,表示被拖拽的助手(helper)。
    • position
      类型:Object
      描述:draggable 助手(helper)的当前 CSS 位置,比如 { top, left } 对象。
    • offset
      类型:Object
      描述:draggable 助手(helper)的当前偏移位置,比如 { top, left } 对象。
out( event, ui )dropout当 droppable 被拖拽出 droppable(基于 tolerance 选项)时触发。
  • event
    类型:Event
  • ui
    类型:Object

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

over( event, ui )dropover当一个可接受的 draggable 被拖拽在 droppable(基于 tolerance 选项)上时触发。
  • event
    类型:Event
  • ui
    类型:Object
    • draggable
      类型:jQuery
      描述:jQuery 对象,表示 draggable 元素。
    • helper
      类型:jQuery
      描述:jQuery 对象,表示被拖拽的助手(helper)。
    • position
      类型:Object
      描述:draggable 助手(helper)的当前 CSS 位置,比如 { top, left } 对象。
    • offset
      类型:Object
      描述:draggable 助手(helper)的当前偏移位置,比如 { top, left } 对象。

3、方法(Methods)

方法返回描述
destroy()jQuery (plugin only)完全移除 droppable 功能。这会把元素返回到它的预初始化状态。
  • 该方法不接受任何参数。     
disable()jQuery (plugin only)禁用 droppable。
  • 该方法不接受任何参数。     
enable()jQuery (plugin only)启用 droppable。
  • 该方法不接受任何参数。     
option( optionName )Object获取当前与指定的 optionName 关联的值。
  • optionName
    类型:String
    描述:要获取的选项的名称。
option()PlainObject获取一个包含键/值对的对象,键/值对表示当前 droppable 选项哈希。
  • 该方法不接受任何参数。
option( optionName, value )jQuery (plugin only)设置与指定的 optionName 关联的 droppable 选项的值。
  • optionName
    类型:String
    描述:要设置的选项的名称。
  • value
    类型:Object
    描述:要为选项设置的值。
option( options )jQuery (plugin only)为 droppable 设置一个或多个选项。
  • options
    类型:Object
    描述:要设置的 option-value 对。
widget()jQuery返回一个包含 droppable 元素的 jQuery 对象。
  • 该方法不接受任何参数。
点赞

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注