拖拽 Draggable

示例

基本形式

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

移动自身

如果DOM元素的CSS属性position默认为static，则在拖拽时会自动设置为relative。

<draggable proxy="self"><div class="u-color u-color-info">自身</div></draggable>

设置代理

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

事件

请打开浏览器的控制台查看结果。

<draggable
    on-dragstart={console.log('on-dragstart:', '$event:', $event)}
    on-dragend={console.log('on-dragend:', '$event:', $event)}>
    <div class="u-color u-color-primary">拖我</div>
</draggable>

API

Class

Draggable

继承自。

Options

new Draggable()

参数	类型	默认值	数据流向	描述
`data`	Object			绑定属性
`data.proxy`	string Dragable.Proxy Element function	`'clone'`	outside @=> inside	拖拽代理，即拖拽时移动的元素。默认值为`clone`，拖拽时拖起自身的一个拷贝；当值为`self`，拖拽时直接拖起自身。也可以用`<draggable.proxy>`自定义代理，或直接传入一个元素或函数。`''`表示不使用拖拽代理。
`data.value`	var		outside => inside	拖拽时需要传递的值
`data.disabled`	boolean	`false`	outside => inside	是否禁用
`data.class`	string	`'z-draggable'`	outside => inside	可拖拽时（即disabled=false）给该元素附加此class
`data.sourceClass`	string	`'z-dragSource'`	outside => inside	拖拽时给起始元素附加此class
`data.proxyClass`	string	`'z-dragProxy'`	outside => inside	拖拽时给代理元素附加此class

Methods

draggable.cancel()

取消拖拽操作

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

Events

draggable.$on('dragstart')

拖拽开始时触发

属性	类型	描述
`sender`	object	事件发送对象，为当前draggable
`origin`	object	拖拽源，为当前draggable
`source`	object	拖拽起始元素
`proxy`	object	拖拽代理元素
`value`	var	拖拽时需要传递的值
`screenX`	number	鼠标指针相对于屏幕的水平坐标
`screenY`	number	鼠标指针相对于屏幕的垂直坐标
`clientX`	number	鼠标指针相对于浏览器的水平坐标
`clientY`	number	鼠标指针相对于浏览器的垂直坐标
`pageX`	number	鼠标指针相对于页面的水平坐标
`pageY`	number	鼠标指针相对于页面的垂直坐标
`startX`	number	拖拽开始时鼠标指针的水平坐标
`startY`	number	拖拽开始时鼠标指针的垂直坐标
`dragX`	number	拖拽时鼠标指针相对于起始坐标的水平位移
`dragY`	number	拖拽时鼠标指针相对于起始坐标的垂直位移
`startLeft`	number	拖拽开始时代理元素的left值
`startTop`	number	拖拽开始时代理元素的top值
`left`	number	拖拽时代理元素的left值
`top`	number	拖拽时代理元素的top值
`cancel`	function	取消拖拽操作

draggable.$on('drag')

正在拖拽时触发

属性	类型	描述
`sender`	object	事件发送对象，为当前draggable
`origin`	object	拖拽源，为当前draggable
`source`	object	拖拽起始元素
`proxy`	object	拖拽代理元素
`value`	var	拖拽时需要传递的值
`screenX`	number	鼠标指针相对于屏幕的水平坐标
`screenY`	number	鼠标指针相对于屏幕的垂直坐标
`clientX`	number	鼠标指针相对于浏览器的水平坐标
`clientY`	number	鼠标指针相对于浏览器的垂直坐标
`pageX`	number	鼠标指针相对于页面的水平坐标
`pageY`	number	鼠标指针相对于页面的垂直坐标
`startX`	number	拖拽开始时鼠标指针的水平坐标
`startY`	number	拖拽开始时鼠标指针的垂直坐标
`dragX`	number	拖拽时鼠标指针相对于起始坐标的水平位移
`dragY`	number	拖拽时鼠标指针相对于起始坐标的垂直位移
`startLeft`	number	拖拽开始时代理元素的left值
`startTop`	number	拖拽开始时代理元素的top值
`left`	number	拖拽时代理元素的left值
`top`	number	拖拽时代理元素的top值
`cancel`	function	取消拖拽操作

draggable.$on('dragend')

拖拽结束时触发

属性	类型	描述
`sender`	object	事件发送对象，为当前draggable
`origin`	object	拖拽源，为当前draggable
`source`	object	拖拽起始元素
`proxy`	object	拖拽代理元素
`value`	var	拖拽时需要传递的值