Droppable

放置功能
KISSY.use('dd',function(S,dd){
    // use dd.Droppable
});

Class

Class Detail

class dd.Droppable
Droppable ( config )
继承自 Base ,包含其所有配置,属性,方法.
Parameters:config (Object) – 配置项, 详细见下方 Configs Detail .

Configs Detail

Droppable.config.node

{String | HTMLElement} - 可与拖动对象交互的节点.

Droppable.config.groups

{Object} - 可与拖动对象交互的节点. 例如: {‘x’:1,’y’:1} 表示属于 x 和 y 组.

Droppable.config.disabled

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

Events Detail

Droppable.Event.dropenter()
dropenter ( ev )
当一个 Draggable 对象根据其 Draggable.mode 配置达到和当前 Droppable 实例交互条件时触发.
一般即鼠标进入当前 Droppable 对象代表节点的区域, 可简单理解成 mouseenter. 相当于 html5 dd API targetNode 的 dragenter 事件的概念.
Parameters:
  • ev.drag (Object) – 当前交互的 Draggable 对象.
  • ev.drop (Object) – 自身, 当前Droppable对象.
Droppable.Event.dropover()
dropover ( ev )
当一个 Draggable 在当前 Droppable 实例上移动时触发, 可简单理解成 mouseover. 相当于 html5 dd API targetNode 的 dragover 事件的概念.
Parameters:
  • ev.drag (Object) – 当前交互的 Draggable 对象.
  • ev.drop (Object) – 自身, 当前Droppable对象.
Droppable.Event.dropexit()
dropexit ( ev )
当一个 Draggable 离开当前 Droppable 实例时触发, 可简单理解成 mouseleave. 相当于 html5 dd API targetNode 的 dragleave 事件的概念.
Parameters:
  • ev.drag (Object) – 当前交互的 Draggable 对象.
  • ev.drop (Object) – 自身, 当前Droppable对象.
Droppable.Event.drophit()
drophit ( ev )
当一个 Draggable 被放置在当前 Droppable 实例时触发. 相当于 html5 dd API targetNode 的 drop 事件的概念.
Parameters:
  • ev.drag (Object) – 当前交互的 Draggable 对象.
  • ev.drop (Object) – 自身, 当前Droppable对象.