Show:

DD.Draggable Class

Extends Base
Module: dd

使得节点可被拖动

Constructor

DD.Draggable

(
  • config
)

Parameters:

Example:

require(['dd'],function(DD){
    var drag=new DD.Draggable({
        node:'#test-drag',
        cursor:'move',
        move:true
    });
});
  • Index
  • Methods
  • Attributes
  • Events

Methods

addAttr

(
  • name
  • attrConfig
)

Inherited from Attribute

给宿主对象增加一个属性

Parameters:

  • name String

    属性名

  • attrConfig Object

    属性配置信息, 支持下面的配置项:

    • value String | Number

      属性默认值。注意默认值请不要设置为复杂对象（通过自定义构造器 new 出来的），复杂对象可设置 valueFn 返回.如果配置项中没有设置 value, 会调用 valueFn 函数获取默认值并赋给 value

    • valueFn Function

      提供属性默认值的函数，传入对象内部对应的属性值和属性名，取该函数的返回值作为最终值给用户

    • setter Function

      写属性时的处理函数，传入从 set() 参数得到的属性值和属性名，如果返回非 undefined 则作为新的属性设置值

    • getter Function

      读属性时的处理函数

    • validator Function

      写属性时的验证函数，传入从 set() 参数得到的属性值和属性名，返回 false 则不改变该属性值

addAttrs

(
  • attrConfigs
  • values
)

Inherited from Attribute

批量添加属性

Parameters:

  • attrConfigs Object

    属性名/配置信息对

  • values Object

    属性名/值对, 批量设置当前对象的属性值

addTarget

(
  • target
)

Inherited from CustomEvent.Target

添加冒泡事件源对象

Parameters:

  • target Object

    事件往上冒泡的事件源

Example:

require(['util', 'event/custom'], function(Util, CustomEvent) {
    function Custom(id){
        this.id = id;
        this.publish("run",{
            bubbles:1
        });
    }

    Util.augment(Custom, CustomEvent.Target);

    var c1 = new Custom("c1");

    var c2 = new Custom("c1");

    c1.addTarget(c2);

    c2.on("run",function(e){
        S.log(e.target.id +" fires event run"); // => c1 fires event run
    });

    c1.fire("run");
});

callSuper

()

Inherited from Base

调用父类的对应方法，如果没有，则返回undefined

Example:

require(['base'], function(Base) {
    var A = Base.extend({
        m: function (value) {
            return 'am:' + value;
        },
        m2: function (value) {
            return 'am2:' + value;
        }
    });

    var B = A.extend({
        m: function(value) {
            return 'bm:(' + this.callSuper(value) + ')';
        },
        m2: function(value) {
            return 'bm2(' + this.callSuper.apply(this, arguments) + ')';
        }
    });

    var b = new B();
    console.log(b.m(1));
    console.log(b.m2(2));
});

destroy

()

Inherited from Base

销毁实例

detach

(
  • eventType
  • fn
  • [scope]
)

Inherited from CustomEvent.Target

解除绑定的事件处理器

Parameters:

  • eventType String | Object
  • fn Function

    当事件触发时的回调函数

  • [scope] Object optional

    回调函数的 this 值. 如果不指定默认为绑定事件的当前元素

extend

(
  • [extensions]
  • methodDesc
  • staticAttributes
  • desc
)

Inherited from Base

从当前类上扩展出一个子类

Parameters:

  • [extensions] Function[] optional

    扩展类数组

  • methodDesc Object

    方法集合键值对

  • staticAttributes Object

    放到新产生组件类上的静态属性集合键值对，其中 ATTRS 属性特殊对待

  • desc Object

    类元信息

fire

(
  • type
  • eventData
)
Boolean

Inherited from CustomEvent.Target

触发绑定 type 类型的事件处理器, 并给触发的事件处理器的事件对象参数中混入数据 eventData

Parameters:

  • type String

    要触发的自定义事件名称

  • eventData Object

    要混入触发事件对象的数据对象

Returns:

Boolean:

如果其中一个事件处理器返回 false , 则返回 false, 否则返回最后一个事件处理器的返回值

get

(
  • name
)

Inherited from Attribute

获取属性 name 的值

Parameters:

  • name String

    属性名.也可以为 “x.y” 形式. 此时要求 x 属性为包含 y 属性的普通 Object.当没有设置属性值时, 会取该属性的默认值

getAttrVals

() Object

Inherited from Attribute

获取目前实例的所有属性键值对集合

Returns:

Object:

属性键值对集合

getPlugin

(
  • id
)

Inherited from Base

根据指定的 id 获取对应的plugin实例

Parameters:

Returns:

对应的plugin实例

Example:

dialog.getPlugin('component/plugin/drag')
   .getPlugin('dd/plugin/constrain')
   .set('constrain', false);

hasAttr

(
  • name
)
Boolean

Inherited from Attribute

判断是否有名为 name 的属性

Parameters:

Returns:

Boolean:

on

(
  • eventType
  • fn
  • [scope]
)

Inherited from CustomEvent.Target

为相应事件添加事件处理器

Parameters:

  • eventType String | Object
    • 当为String时 包含一个或多个事件名称的字符串, 多个事件名以空格分开。 事件可以通过加点来表示分组，例如 "click.one" , "click.two"
    • 当为Object时，类似这样：
      {
  'click':{
      fn:function(){
      },
      filter: '' // delegate,
      once:true // 绑定一次
  },
  'mouseenter':function(){}
}
  • fn Function

    当事件触发时的回调函数

  • [scope] Object optional

    回调函数的 this 值. 如果不指定默认为绑定事件的当前元素

plug

(
  • plugin
)

Inherited from Base

安装指定插件

Parameters:

Returns:

自身

Example:

require(['overlay', 'component/plugin/resize'],function(Overlay,Resize){
    new Overlay({
        content:'test'
    }).plug(new Resize({
        handlers:['t','t']
    }));
});

publish

(
  • type
  • cfg
)

Inherited from CustomEvent.Target

配置自定义事件的一些特有信息

Parameters:

  • type String

    要触发的自定义事件名称

  • cfg Object

    事件的具体配置对象

    • [bubbles=true] Boolean optional

      类型 boolean. 是否支持冒泡。 默认 true

    • [defaultFn] Function optional

removeAttr

(
  • name
)

Inherited from Attribute

删除名为 name 的属性

Parameters:

removeTarget

(
  • target
)

Inherited from CustomEvent.Target

删除冒泡事件源对象

Parameters:

  • target Object

    事件往上冒泡的事件源

reset

(
  • name
  • opts
)

Inherited from Attribute but overwritten by this Class

重置属性 name 为初始值. (调用一次 set() )

Parameters:

  • name String

    属性

  • opts Object

    控制对象，包括以下控制选项

    • silent=false Boolean

      默认 false , 是否触发 change 系列事件

set

(
  • name
  • value
  • opts
)
Boolean

Inherited from Attribute

设置属性 name 的值为 value

Parameters:

  • name String

    属性名.也可以为 “x.y” 形式，此时要求 x 属性为包含 y 属性的普通 Object，这时会设置 x 属性值的 y 属性.但只会触发 x 的相关 change 事件

  • value String

    属性的值

  • opts Object

    控制对象，包括以下控制选项

    • silent=false Boolean

      默认 false , 是否触发 change 系列事件

    • error Function

      验证失败的回调，包括失败原因

    • force Function

      是否强制触发 change 事件，默认值为 false，当值发生变化时才触发

Returns:

Boolean:

该次属性设置是否生效（是否通过了 validator 验证）

unplug

(
  • plugin
)

Inherited from Base

卸载指定插件

Parameters:

Returns:

自身

Example:

require(['overlay','component/plugin/resize'],function(Overlay,Resize){
    var o= new Overlay({
        content:'test'
    }).plug(new Resize({
        handlers:['t','t']
    }));

    o.unplug('component/plugin/resize'); // 卸载 resize 插件
});

Attributes

disabled

Boolean

是否禁用或启用拖放功能

dragNode

KISSY.Node

只读。表示配置项中 node 代表的节点.

groups

Object

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

handlers

HTMLElement[] | Function[] | String[]

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

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

Default: 配置中的 node 设置的节点

INTERSECT

String

等于 "intersect"

listeners

Object

Inherited from Base

配置组件的事件绑定,例如:

{
    listeners:{
        customEvent:function(e){
            alert(e.type); // => "customEvent"
        }
    }
}

or

{
    listeners:{
        customEvent:{
            fn:function(e){
                // e.type // => customEvent
                // this.xx => 1
            },
            context:{xx:1}
        }
    }
}

mode

String

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

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

Default: 'point'

move

Boolean

默认 false。关联元素是否随鼠标移动。（例如：resize 功能完全不需要关联元素移动）

Default: false

Example:

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

设置 move 为 true.

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

node

String | HTMLElement

将要进行拖放的节点

plugins

Function[] | Object[]

Inherited from Base

插件构造器数组或插件对象数组. 例如

{
    plugins: [ Plugin1,Plugin2 ]
}

// or

{
    plugins: [new Plugin1(cfg),new Plugin2(cfg)]
}

POINT

String

等于 "point"

STRICT

String

等于 "strict"

Events

*Change

Inherited from Attribute

每调用 set() 一次后就触发一次该事件

Event Payload:

  • e Object

    回调函数传入的对象

    • newVal

      本次 set 导致的属性当前值集合

    • prevVal

      本次 set 导致的属性在 set 前的值集合

    • attrName String

      本次 set 导致改变的属性名集合

    • subAttrName String

      本次 set 导致的属性全名集合

afterAttrNameChange

Inherited from Attribute

名为 “attrName” 的属性, 在改变它的值之后触发该事件

Event Payload:

  • e Object

    回调函数传入的对象

    • newVal

      当前的属性值

    • prevVal

      当前改变前的属性值

    • attrName String

      当前的属性名，例如 “x”

    • subAttrName String

      当前的完整属性名，例如 “x.y”

beforeAttrNameChange

Inherited from Attribute

名为 “attrName” 的属性, 在改变它的值之前触发该事件

Event Payload:

  • e Object

    回调函数传入的对象

    • newVal

      将要改变到的属性值

    • prevVal

      当前的属性值

    • attrName String

      当前的属性名，例如 “x”

    • subAttrName String

      当前的完整属性名，例如 “x.y”

drag

当可拖放对象拖放过程中触发.

Event Payload:

  • ev Object
    • pageX Number

      当前鼠标的绝对横坐标.

    • pageY Number

      当前鼠标的绝对纵坐标.

    • drag Object

      自身, 当前拖放对象.

dragdrophit

当前 Draggable 对象被放置在一个 Droppable 实例时触发. 相当于 html5 dd API targetNode 的 drop 事件的概念.

Event Payload:

  • ev Object
    • drag Object

      自身, 当前拖放对象.

    • drop Object

      当前交互的Droppable对象.

dragdropmiss

当用户鼠标弹起但是没有放置当前 Draggable 对象到一个 Droppable 对象时触发.

Event Payload:

dragend

当用户鼠标弹起放弃拖放时触发.

Event Payload:

dragenter

当前 Draggable 对象达到一个 Droppable 对象时触发, 可简单理解成 mouseenter.

Event Payload:

  • ev Object
    • drag Object

      自身, 当前拖放对象.

    • drop Object

      当前交互的Droppable对象.

dragexit

当前 Draggable 对象离开一个 Droppable 实例上移动时触发, 可简单理解成 mouseleave. 相当于 html5 dd API targetNode 的 dragleave 事件的概念.

Event Payload:

  • ev Object
    • drag Object

      自身, 当前拖放对象.

    • drop Object

      当前交互的Droppable对象.

dragover

当前 Draggable 对象在一个 Droppable 实例上移动时触发, 可简单理解成 mouseover.

Event Payload:

  • ev Object
    • drag Object

      自身, 当前拖放对象.

    • drop Object

      当前交互的Droppable对象.

dragstart

当可拖放对象开始被用户拖放时触发.

Event Payload:

@2010 - 2112 KISSY UI LIBARAY