拖拽 Draggable

示例

基本形式

<draggable><div class="u-color u-color-primary">拖我</div></draggable>

移动自身

<draggable proxy="self"><div class="u-color u-color-primary">自由</div></draggable>
<draggable proxy="self" direction="horizontal"><div class="u-color u-color-info">水平</div></draggable>
<draggable proxy="self" direction="vertical"><div class="u-color u-color-success">垂直</div></draggable>

修改代理

<draggable>
    <div class="u-color u-color-primary">拖我</div>
    <draggable.proxy>
        <div class="u-color u-color-warning">拖我</div>
    </draggable.proxy>
</draggable>

API

Class

Draggable

继承自Component。

Options

new Draggable()

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

Methods

draggable.cancel()

取消拖拽操作

参数	类型	默认值
无参数
返回值	类型	描述
无返回值

Events

draggable.$on('dragstart')

拖拽开始时触发

属性	类型	描述
`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	取消拖拽操作

draggable.$on('drag')

正在拖拽时触发

属性	类型	描述
`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	取消拖拽操作

draggable.$on('dragend')

拖拽结束时触发

属性	类型	描述
`sender`	object	事件发送对象，为当前draggable
`origin`	object	拖拽源，为当前draggable
`source`	object	拖拽起始元素
`proxy`	object	拖拽代理元素