拖拽 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()

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

Methods

draggable.cancel()

取消拖拽操作

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

Events

draggable.$on('dragstart')

拖拽开始时触发

属性类型描述
senderobject事件发送对象,为当前draggable
originobject拖拽源,为当前draggable
sourceobject拖拽起始元素
proxyobject拖拽代理元素
dataobject拖拽时需要传递的数据
screenXnumber鼠标指针相对于屏幕的水平位置
screenYnumber鼠标指针相对于屏幕的垂直位置
clientXnumber鼠标指针相对于浏览器的水平位置
clientYnumber鼠标指针相对于浏览器的垂直位置
pageXnumber鼠标指针相对于页面的水平位置
pageYnumber鼠标指针相对于页面的垂直位置
movementXnumber鼠标指针水平位置相对于上次操作的偏移量
movementYnumber鼠标指针垂直位置相对于上次操作的偏移量
cancelfunction取消拖拽操作

draggable.$on('drag')

正在拖拽时触发

属性类型描述
senderobject事件发送对象,为当前draggable
originobject拖拽源,为当前draggable
sourceobject拖拽起始元素
proxyobject拖拽代理元素
dataobject拖拽时需要传递的数据
screenXnumber鼠标指针相对于屏幕的水平位置
screenYnumber鼠标指针相对于屏幕的垂直位置
clientXnumber鼠标指针相对于浏览器的水平位置
clientYnumber鼠标指针相对于浏览器的垂直位置
pageXnumber鼠标指针相对于页面的水平位置
pageYnumber鼠标指针相对于页面的垂直位置
movementXnumber鼠标指针水平位置相对于上次操作的偏移量
movementYnumber鼠标指针垂直位置相对于上次操作的偏移量
cancelfunction取消拖拽操作

draggable.$on('dragend')

拖拽结束时触发

属性类型描述
senderobject事件发送对象,为当前draggable
originobject拖拽源,为当前draggable
sourceobject拖拽起始元素
proxyobject拖拽代理元素