拖拽 KLDraggable

基本形式

<kl-draggable><kl-button type="primary" title="拖我"></kl-button></kl-draggable>

移动自身

<kl-draggable proxy="self"><kl-button type="primary" title="自由"></kl-button></kl-draggable>
<kl-draggable proxy="self" direction="horizontal"><kl-button title="水平"></kl-button></kl-draggable>
<kl-draggable proxy="self" direction="vertical"><kl-button title="垂直"></kl-button></kl-draggable>

修改代理

<kl-draggable>
    <kl-button type="primary" title="拖我"></kl-button>
    <kl-draggable-proxy>
        <kl-button title="拖我"></kl-button>
    </kl-draggable-proxy>
</kl-draggable>

API

KLDraggable

Param	Type	Default	Description
[options.data]	`object`		= 绑定属性
[options.data.data]	`object`		=> 拖拽时需要传递的数据
[options.data.proxy]	`string/Dragable.Proxy/Element/function`		@=> 拖拽代理，即拖拽时显示的元素。默认值为`clone`，拖拽时拖起自身的一个拷贝；当值为`self`，拖拽时直接拖起自身。也可以用`<draggable.proxy>`自定义代理，或直接传入一个元素或函数。其他值表示不使用拖拽代理。
[options.data.direction]	`string`	`"all"`	=> 拖拽代理可以移动的方向，`all`为任意方向，`horizontal`为水平方向，`vertical`为垂直方向
[options.data.disabled]	`boolean`	`false`	=> 是否禁用
[options.data.class]	`string`	`"is-draggable"`	=> 可拖拽时（即disabled=false）给元素附加此class
[options.data.dragClass]	`string`	`"is-drag"`	=> 拖拽该元素时给元素附加此class

dragstart 拖拽开始时触发Event

Name	Type	Description
sender	`object`	事件发送对象，为当前draggable
origin	`object`	拖拽源，为当前draggable
source	`object`	拖拽起始元素
proxy	`object`	拖拽代理元素
data	`object`	拖拽时需要传递的数据
screenX	`number`	鼠标指针相对于屏幕的水平位置
screenY	`number`	鼠标指针相对于屏幕的垂直位置
clientX	`number`	鼠标指针相对于浏览器的水平位置
clientY	`number`	鼠标指针相对于浏览器的垂直位置
pageX	`number`	鼠标指针相对于页面的水平位置
pageY	`number`	鼠标指针相对于页面的垂直位置
movementX	`number`	鼠标指针水平位置相对于上次操作的偏移量
movementY	`number`	鼠标指针垂直位置相对于上次操作的偏移量
cancel	`function`	取消拖拽操作

drag 正在拖拽时触发Event

Name	Type	Description
sender	`object`	事件发送对象，为当前draggable
origin	`object`	拖拽源，为当前draggable
source	`object`	拖拽起始元素
proxy	`object`	拖拽代理元素
data	`object`	拖拽时需要传递的数据
screenX	`number`	鼠标指针相对于屏幕的水平位置
screenY	`number`	鼠标指针相对于屏幕的垂直位置
clientX	`number`	鼠标指针相对于浏览器的水平位置
clientY	`number`	鼠标指针相对于浏览器的垂直位置
pageX	`number`	鼠标指针相对于页面的水平位置
pageY	`number`	鼠标指针相对于页面的垂直位置
movementX	`number`	鼠标指针水平位置相对于上次操作的偏移量
movementY	`number`	鼠标指针垂直位置相对于上次操作的偏移量
cancel	`function`	取消拖拽操作

dragend 拖拽结束时触发Event

Name	Type	Description
sender	`object`	事件发送对象，为当前draggable
origin	`object`	拖拽源，为当前draggable
source	`object`	拖拽起始元素
proxy	`object`	拖拽代理元素