Draggable

拖拽功能
KISSY.use('dd',function(S,dd){
    // use dd.Draggable
});

Class

Class Detail

class dd.Draggable
Draggable (config)
继承自 Base ,包含其所有配置,属性,方法.
Parameters:config (Object) – 实例化可拖放对象的配置项, 详细见下节.

Configs Detail

Draggable.config.node

{String|HTMLElement} - 将要进行拖放的节点.

Draggable.config.groups

{Object} - 可拖动对象在的组。(设置后只和本组的 droppable 对象交互),默认值为true, 可以和所有组的 droppable 都交互。 若不需要和任何droppable 交互,为了性能,请设置 groups 为 false. 例如: {‘x’:1,’y’:1} 表示属于 x 和 y 组

Draggable.config.handlers

{Array<String|HTMLElement>} - 作为鼠标在其上按下时触发节点拖放的钩子. 字符串时表示选择器字符串. 如果不设置, 则整个 node 作为触发钩子.

Note

handlers 的每个元素 DOM 节点必须位于配置项 node DOM 子树中.

Draggable.config.clickPixelThresh

{Number} - 默认同 DDM.get("clickPixelThresh")

Draggable.config.bufferTime

{Number} - 默认同 DDM.get("bufferTime")

Draggable.config.disabled

{Boolean} - 默认 false。是否禁用改拖对象功能.

Draggable.config.move

{Boolean} - 默认 false。关联元素是否随鼠标移动。(例如:resize 功能完全不需要关联元素移动)

Draggable.config.mode

{String} - 枚举值, 默认值 “point”, 和 Droppable 关联, 决定何时和可放对象开始交互(触发相应事件), 可取值 “point”,”intersect”,”strict”

  • 在 “point” 模式下, 只要鼠标略过可放对象, 即开始和可放对象交互.
  • 在 “intersect” 模式下, 只要拖动对象和可放对象有交集, 即开始和可放对象交互.
  • 在 “strict” 模式下, 只有拖动对象完全位于可放对象内, 才开始和可放对象交互.

Attributes Detail

Draggable.POINT

static, {String} - 等于 “point”

Draggable.INTERSECT

static, {String} - 等于 “intersect”

Draggable.STRICT

static, {String} - 等于 “strict”

Draggable.prototype.disabled

{Boolean} - 是否禁用或启用拖放功能

Draggable.prototype.node

{KISSY.Node} - 只读。表示当前拖动的节点, 在应用 DD.Proxy 时表示代理节点.

Draggable.prototype.dragNode

{KISSY.Node} - 只读。表示配置项中 node 代表的节点.

Events Detail

Draggable.Events.dragstart()
dragstart ( ev )
当可拖放对象开始被用户拖放时触发.
Parameters:ev.drag (Object) – 自身, 当前拖放对象.
Draggable.Events.drag()
drag ( ev )
当可拖放对象拖放过程中触发.

Note

事件对象不再包括 left/top 属性

Parameters:
  • ev.pageX (Number) – 当前鼠标的绝对横坐标.
  • ev.pageY (Number) – 当前鼠标的绝对纵坐标.
  • ev.drag (Object) – 自身, 当前拖放对象.
Draggable.Events.dragend()
dragend ( ev )
当用户鼠标弹起放弃拖放时触发.
Parameters:ev.drag (Object) – 自身, 当前拖放对象.
Draggable.Events.dragenter()
dragenter ( ev )
当前 Draggable 对象达到一个 Droppable 对象时触发, 可简单理解成 mouseenter.
Parameters:
  • ev.drag (Object) – 自身, 当前拖放对象.
  • ev.drop (Object) – 当前交互的Droppable对象.
Draggable.Events.dragover()
dragover ( ev )
当前 Draggable 对象在一个 Droppable 实例上移动时触发, 可简单理解成 mouseover.
Parameters:
  • ev.drag (Object) – 自身, 当前拖放对象.
  • ev.drop (Object) – 当前交互的Droppable对象.
Draggable.Events.dragexit()
dragexit ( ev )
当前 Draggable 对象离开一个 Droppable 实例上移动时触发, 可简单理解成 mouseleave. 相当于 html5 dd API targetNode 的 dragleave 事件的概念.
Parameters:
  • ev.drag (Object) – 自身, 当前拖放对象.
  • ev.drop (Object) – 当前交互的Droppable对象.
Draggable.Events.dragdrophit()
dragdrophit ( ev )
当前 Draggable 对象被放置在一个 Droppable 实例时触发. 相当于 html5 dd API targetNode 的 drop 事件的概念.
Parameters:
  • ev.drag (Object) – 自身, 当前拖放对象.
  • ev.drop (Object) – 当前交互的Droppable对象.
Draggable.Events.dragdropmiss()
dragdropmiss ( ev )
当用户鼠标弹起但是没有放置当前 Draggable 对象到一个 Droppable 对象时触发.
Parameters:ev.drag (Object) – 自身, 当前拖放对象.

Note

Draggable 默认实例化后仅表示会根据鼠标拖放触发 drag() 事件, 并不会导致节点移动, 通过以下设置来使得节点跟随鼠标移动:

设置 move 为 true.

new Draggable({
    node:"#d",
    move:true
});