拖移 Movable

示例

基本形式

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

轴向约束

<movable axis="horizontal"><div class="u-color u-color-info">水平</div></movable>
<movable axis="vertical"><div class="u-color u-color-warning">垂直</div></movable>

网格约束

<movable grid={ { x: 40, y: 30 } }><div class="u-color u-color-success">网格</div></movable>

范围约束

.m-well {display: inline-block; vertical-align: bottom; width: 300px; height: 300px; padding: 20px; background: #f4f4f4; border: 4px solid #ccc; position: relative;}
.m-well .u-color {border: 2px solid black;}

<div class="m-well">
    <movable range={ { left: 0, top: 0, right: 200, bottom: 200 } }><div class="u-color u-color-info">object</div></movable>
</div>
<div class="m-well">
    <movable range="offsetParent"><div class="u-color u-color-info" style="position: absolute;">offsetParent</div></movable>
</div>

范围约束模式

<div class="m-well">
    <movable range="offsetParent" rangeMode="inside"><div class="u-color u-color-info" style="position: absolute;">inside</div></movable>
</div>
<div class="m-well">
    <movable range="offsetParent" rangeMode="center"><div class="u-color u-color-info" style="position: absolute; margin-left: -68px; margin-top: -68px;">center</div></movable>
</div>

API

Class

Movable

继承自。

Options

new Movable()

参数	类型	默认值	数据流向	描述
`data`	Object			绑定属性
`data.proxy`	string Dragable.Proxy Element function	`'self'`	outside @=> inside	拖拽代理，即拖拽时移动的元素。默认值为`clone`，表示拖拽时会拖起自身的一个拷贝；当值为`self`，拖拽时直接拖起自身。也可以用`<draggable.proxy>`自定义代理，或直接传入一个元素或函数。`''`表示不使用拖拽代理。
`data.axis`	string	`'both'`	outside => inside	拖拽代理移动时限制的轴向，`both`表示可以在任意方向上移动，`horizontal`表示限制在水平方向上移动，`vertical`表示限制在垂直方向上移动。
`data.grid`	Object	`{x:0,y:0}`	outside => inside	拖拽代理移动时限制的网格。值为一个{x,y}格式的对象，表示水平方向和垂直方向网格的大小。
`data.range`	string object function		outside @=> inside	拖拽范围。值可以为一个{left,top,right,bottom}格式的对象，表示代理元素移动的上下左右边界，也可以传一个函数。当值为`offsetParent`，代理元素限制在offsetParent中移动，仅适用于`position`为`absolute`的情况；当值为`parent`；当值为`window`时，拖拽时代理元素限制在window中移动，仅适用于`position`为`fixed`的情况。
`data.rangeMode`	string	`inside`	outside => inside	拖拽范围模式，默认为`inside`，表示在拖拽范围内侧移动，`center`表示在拖拽范围边缘及内侧移动。
`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