首页 教程 API文档

拖动插件

2015-09-11 14:07:39

属性


使用频率
所属模块 Std.plugin.modules
成员类型 静态插件模块

描述


drag插件作用是给一个DOM元素,或者一个widget装入该插件,然后使其可以支持被随意性的拖动.

当给装入此插件的时候,其owner上的css属性position如果不是absolute或者fixed的时候,那么在开始拖动时候会被自动设置为absolute

参数选项


名称 类型 默认值 描述
x Boolean true 该值决定了是否允许横向拖动,如果为false,那么则不能横向拖动
y Boolean true 该值决定了是否允许纵向拖动,如果为false,那么则不能纵向拖动
opacity Number 0.7 当拖动的时候,需要给owner设置的不透明度,当拖动结束时候恢复
handle Object null handle决定了owner下面的拖动句柄,如果不设置该值, 那么整个区域在鼠标按下之后都可以被拖动,该值通常为一个DOM元素, 例如Std UI Kit中的Window组件,就是将handle设置为了头部那块, 那么只有在拖动Window上的标题时候才会有作用.
draggable Boolean true 默认是否可拖动的,如果设置为了false,那么需要之后执行成员函数draggable方法并且参数传递为true之后才可以被拖动

事件


名称 回调参数 描述
start
名称 类型 描述
left Number 相对父元素的左侧距离
top Number 相对父元素的顶部距离
当拖动开始的时候触发的事件
stop
名称 类型 描述
left Number 相对父元素的左侧距离
top Number 相对父元素的顶部距离
当拖动结束的时候触发的事件

相关例子



//创建一个DOM元素,追加到body中
var element = new Std.dom("div[style='background:red;width:128px;height:128px']","body");

//装入drag插件
element.plugin("drag",{});