放置 Droppable

示例

基本形式

<draggable data="success"><div class="u-color u-color-success">拖我</div></draggable>
<draggable data="warning"><div class="u-color u-color-warning">拖我</div></draggable>
<draggable data="error"><div class="u-color u-color-error">拖我</div></draggable>
<p></p>
<droppable data={dropData}><div class="u-color u-color-{dropData || 'primary'}">放到这里</div></droppable>

列表排序

待完成……

拖放文件

待完成……

API

Class

Droppable

继承自Component。

Options

new Droppable()

参数	类型	默认值	数据流向	描述
`data`	object			绑定属性
`data.data`	object		outer <= inner	拖放后传递过来的数据
`data.disabled`	boolean	`false`	outer => inner	是否禁用
`data.class`	string	`'z-droppable'`	outer => inner	可放置时（即disabled=false）给元素附加此class
`data.dragOverClass`	string	`'z-dragover'`	outer => inner	拖拽该元素上方时给元素附加此class

Events

droppable.$on('dragenter')

拖拽进入该元素时触发

属性	类型	描述
`sender`	object	事件发送对象，为当前droppable
`origin`	object	拖拽源，为拖拽的draggable
`source`	object	拖拽起始元素
`proxy`	object	拖拽代理元素
`target`	object	拖拽目标元素
`data`	object	拖拽时接收到的数据
`screenX`	number	鼠标指针相对于屏幕的水平位置
`screenY`	number	鼠标指针相对于屏幕的垂直位置
`clientX`	number	鼠标指针相对于浏览器的水平位置
`clientY`	number	鼠标指针相对于浏览器的垂直位置
`pageX`	number	鼠标指针相对于页面的水平位置
`pageY`	number	鼠标指针相对于页面的垂直位置
`movementX`	number	鼠标指针水平位置相对于上次操作的偏移量
`movementY`	number	鼠标指针垂直位置相对于上次操作的偏移量
`cancel`	function	取消拖拽操作

droppable.$on('dragleave')

拖拽离开该元素时触发

属性	类型	描述
`sender`	object	事件发送对象，为当前droppable
`origin`	object	拖拽源，为拖拽的draggable
`source`	object	拖拽起始元素
`proxy`	object	拖拽代理元素
`target`	object	拖拽目标元素
`data`	object	拖拽时接收到的数据
`screenX`	number	鼠标指针相对于屏幕的水平位置
`screenY`	number	鼠标指针相对于屏幕的垂直位置
`clientX`	number	鼠标指针相对于浏览器的水平位置
`clientY`	number	鼠标指针相对于浏览器的垂直位置
`pageX`	number	鼠标指针相对于页面的水平位置
`pageY`	number	鼠标指针相对于页面的垂直位置
`movementX`	number	鼠标指针水平位置相对于上次操作的偏移量
`movementY`	number	鼠标指针垂直位置相对于上次操作的偏移量
`cancel`	function	取消拖拽操作

droppable.$on('dragover')

拖拽在该元素上方时触发

属性	类型	描述
`sender`	object	事件发送对象，为当前droppable
`origin`	object	拖拽源，为拖拽的draggable
`source`	object	拖拽起始元素
`proxy`	object	拖拽代理元素
`target`	object	拖拽目标元素
`data`	object	拖拽时接收到的数据
`ratioX`	number	鼠标指针相对于接收元素所占的长度比
`ratioY`	number	鼠标指针相对于接收元素所占的高度比
`screenX`	number	鼠标指针相对于屏幕的水平位置
`screenY`	number	鼠标指针相对于屏幕的垂直位置
`clientX`	number	鼠标指针相对于浏览器的水平位置
`clientY`	number	鼠标指针相对于浏览器的垂直位置
`pageX`	number	鼠标指针相对于页面的水平位置
`pageY`	number	鼠标指针相对于页面的垂直位置
`movementX`	number	鼠标指针水平位置相对于上次操作的偏移量
`movementY`	number	鼠标指针垂直位置相对于上次操作的偏移量
`cancel`	function	取消拖拽操作

droppable.$on('drop')

拖拽放置时触发

属性	类型	描述
`sender`	object	事件发送对象，为当前droppable
`origin`	object	拖拽源，为拖拽的draggable
`source`	object	拖拽起始元素
`proxy`	object	拖拽代理元素
`target`	object	拖拽目标元素
`data`	object	拖拽时接收到的数据
`ratioX`	number	鼠标指针相对于接收元素所占的长度比
`ratioY`	number	鼠标指针相对于接收元素所占的高度比
`screenX`	number	鼠标指针相对于屏幕的水平位置
`screenY`	number	鼠标指针相对于屏幕的垂直位置
`clientX`	number	鼠标指针相对于浏览器的水平位置
`clientY`	number	鼠标指针相对于浏览器的垂直位置
`pageX`	number	鼠标指针相对于页面的水平位置
`pageY`	number	鼠标指针相对于页面的垂直位置
`movementX`	number	鼠标指针水平位置相对于上次操作的偏移量
`movementY`	number	鼠标指针垂直位置相对于上次操作的偏移量